iOS Navigation / Back Button has page title of current page not previous page; slow/delayed to change navigation page

[edgiardina]

Description

When using Shell.Current.GoToAsync to navigate to a child page, the back button presented in iOS would have a left arrow / reverse disclosure indicator, and the previous page's title if it can fit. However, the title presented when on the child page is of the same page you are on, not the page you were just on previously. This can be confusing as users expect the text next to the back button to show where they were last.

Also, the titles lag and show the previous page's title for a few moments after navigation. Xamarin Forms on iOS had a smooth iOS navigation transition where it sort of slid in. I think that's a native behavior that MAUI has lost.

Simulator.Screen.Recording.-.iPhone.14.-.2022-11-27.at.16.42.10.mp4

Steps to Reproduce

1. Create a File -> New Maui app
2. Create a page that you can navigate to that should produce a back button in the Navigation Bar
3. Give both pages a title
4. Navigate to that new page. The title displayed next to the back button should be the parent page's title, not the current page's title

Link to public reproduction project repository

https://github.com/edgiardina/MauiBug_WrongBackButtonTitle

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16

Did you find any workaround?

https://github.com/PureWeen/ShanedlerSamples/blob/main/ShanedlerSamples/Library/Workarounds/ShellWorkarounds.iOS.cs

Relevant log output

No response

[3steve3]

The issue existed unfixed for a while already #8335

[maximfrisk]

This issue is can be solved by creating your own ShellRenderer by creating a CustomShell class. Overriding the CreatePageRendererTracker and suppling an own implementation of the ShellPageRendererTracker. Place the classes and code in the iOS Platform folder and add the Shell to the mauiprogram.cs handlers.

handlers.AddHandler(typeof(Shell), typeof(CustomActShell));

Example of CustomShell

using System;
using CoreGraphics;
using Microsoft.Maui.Controls.Platform.Compatibility;
using UIKit;

public class CustomShellPageRendererTracker : ShellPageRendererTracker
{
    private IShellContext Context { get; set; }
    private UINavigationItem NavigationItem { get; set; }

    public CustomShellPageRendererTracker(IShellContext context) : base(context)
    {
        Context = context;
    }

    protected override void OnRendererSet()
    {
        base.OnRendererSet();
        //store navigation item on render set
        NavigationItem = ViewController.NavigationItem;
    }

    protected override void OnPageSet(Page oldPage, Page newPage)
    {
        base.OnPageSet(oldPage, newPage);

        if (newPage != null && !newPage.IsLoaded)
            newPage.Loaded += OnPageLoaded;
    }

    protected override void UpdateToolbarItems()
    {
        if (Page.IsLoaded)
            base.UpdateToolbarItems();
    }

    protected override void UpdateTitleView()
    {
        if (!Page.IsLoaded || ViewController == null || NavigationItem == null)
            return;

        var titleView = Shell.GetTitleView(Page);
        if (titleView == null)
        {
            var view = NavigationItem.TitleView;
            NavigationItem.TitleView = null;
            view?.Dispose();
        }
        else
        {
            titleView.HeightRequest = 44;
            var view = new CustomTitleViewContainer(titleView);
            NavigationItem.TitleView = view;
        }
    }

    protected override void UpdateTitle()
    {
        if (Page.IsLoaded)
        {
            NavigationItem.Title = Page.Title;
        }
    }

    void OnPageLoaded(object sender, EventArgs e)
    {
        if (sender is Page page)
            page.Loaded -= OnPageLoaded;

        UpdateTitle();
        UpdateTitleView();
    }
}

Where CustomTitleViewContainer is an implementation of a custom title view class that solves a different issue.

using System;
using CoreGraphics;
using Microsoft.Maui.Controls.Platform.Compatibility;

public class CustomTitleViewContainer : UIContainerView
{
    public CustomTitleViewContainer(View view) : base(view)
    {
        TranslatesAutoresizingMaskIntoConstraints = false;
    }

    public override CGSize IntrinsicContentSize => UILayoutFittingExpandedSize;
}

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.