Issue with navigation of pages

Question

Issue with navigation of pages

Sreenivasan, Sreejith 370

My home page is implemented as a FlyoutPage, with the detail page set as a TabbedPage and the flyout serving as the menu page. The TabbedPage contains three tabs in the order of Alerts, Home, and Menu.

The issue occurs when I select the first option, "Appointments," from the menu and navigate to that page. Upon clicking the back button from the Appointments page, the appointments page is closing and menu pop up will open again, if i close menu, the Home tab is displayed, if I then switch to the Alerts tab now, the Appointments page appears there instead of the Alerts page, if I click back button again the app will break with below exception.

Java.Lang.IllegalStateException: 'The specified child already has a parent. You must call removeView() on the child's parent first.'

Below code is using for back tap on Appointments page:

        private void HandleTapped(object sender, System.EventArgs e)
        {
            var navStack = Navigation?.NavigationStack;
            if (navStack?.Count == 2)
            {
                var dashboardMasterPage = MainService.HomePage.Value as DashboardMasterPage;
                if (dashboardMasterPage is DashboardMasterPage)
                {
                    dashboardMasterPage.IsPresented = !dashboardMasterPage.IsPresented;
                }
            }

            ViewModel.Navigation.Pop();
        }

I have updated it like below:

private async void HandleTapped(object sender, System.EventArgs e)
{
    var master = MainService.HomePage?.Value as DashboardMasterPage;
    if (master != null)
    {
        // Reset Detail page back to the DashboardTabPage
        master.Detail = new NavigationPage(new DashboardTabPage());
        master.IsPresented = false;
    }
}

With the above update, when I click on back button the entire home page is reopening again.

But my requirement is to close the appointment page only and reopen the menu pop up when tap on back button from appointment page.

2 answers

Your answer

Answer 1

It seems like you're encountering issues with navigation in your FlyoutPage setup, particularly when trying to manage the back navigation from the Appointments page. The behavior you're describing suggests that the navigation stack is not being managed correctly, leading to the IllegalStateException when trying to pop the Appointments page off the stack.

To achieve the desired behavior of closing the Appointments page and reopening the menu without resetting the entire home page, you can consider the following approach:

Use PopAsync for Back Navigation: Instead of setting the Detail property of the DashboardMasterPage to a new instance of DashboardTabPage, you should simply pop the current page off the navigation stack. This will allow you to return to the previous page without recreating the entire navigation structure.
Handle the Back Button: You can override the back button behavior in your Appointments page to ensure that it only pops the current page and does not interfere with the FlyoutPage's menu state.

Here’s an example of how you might implement the back navigation:

private async void HandleBackButtonPressed(object sender, System.EventArgs e)
{
    if (Navigation.NavigationStack.Count > 1)
    {
        await Navigation.PopAsync(); // This will close the Appointments page
        var master = MainService.HomePage?.Value as DashboardMasterPage;
        if (master != null)
        {
            master.IsPresented = true; // Show the menu again
        }
    }
}

This way, when you tap the back button, it will pop the Appointments page off the navigation stack and present the menu again without reinitializing the TabbedPage.

Make sure to test this implementation to ensure it meets your requirements and resolves the exceptions you're encountering. If you continue to face issues, you may need to further investigate how the navigation stack is being managed in your application.

References:

Answer 2

Thanks for sharing the details!

The exception occurs because the Appointment page is still in the navigation stack and the app attempts to re-use the same page instance inside the TabbedPage.

FlyoutPage + TabbedPage cannot safely reuse page instances when navigating back from a pushed modal/detail page.

Points to fix the issue:

Don't modify the TabbedPage or FlyoutPage when closing the Appointment page.
Simply pop the Appointment page and explicitly re-open the flyout menu.
Do not recreate or reset the Detail page. That is what caused the entire home page to reload.

You can replace with below code

private async void HandleTapped(object sender, EventArgs e)

{

await Navigation.PopAsync();

if (Application.Current.MainPage is FlyoutPage flyout)

{

flyout.IsPresented = true;

}

Share via

Issue with navigation of pages

2 answers

Your answer