Blank page when using Navigation in Xamarin Forms

Question

Hi!

I have encountered a very strange and critical bug.

The application consists of three different main pages. It has a menu bar in the bottom to navigate between these three pages. There are also other popup pages that can be reached from these main pages.

This is an example of how we go from the first page to one of the popup pages:

var carViewScreen = new CarViewScreen(new CarViewViewModel(true));
await Navigation.PushAsync(carViewScreen);

Navigation is the INavigation.NavigableElement.

The BottomBarPage is wrapped in a renderer:

public class BottomBarPageRenderer : VisualElementRenderer, IOnTabClickListener

This is a piece of the code that runs when clicking on another tab in the bottom bar:

public virtual void OnTabSelected(int position)
{
    var bottomBarPage = Element as BottomBarPage;
    Device.BeginInvokeOnMainThread(() =>
    {
        try
        {
            SwitchContent(Element.Children[position]);
            Element.CurrentPage = Element.Children[position];
        }
        catch (Exception e)
        {
            System.Diagnostics.Debug.WriteLine(e.Message);
        }
    });
}

Here comes the issue. When running the app on most phones (iOS and Android) it works just as expected; the user is redirected to the new page and it renders correctly. However, on specific phones, the new page does not seem to render, as the user instead gets a white screen. The bottom bar menu is still visible and usable, but no other content is shown on the screen. If the user presses, for instance, page 2 (where the user gets a white screen) and then page 1 again, the first page is rendered correctly, but every other page returns a white screen.

I am currently getting this issue on a Samsung Galaxy S20 FE. The even weirder thing is that if I go into the settings and increase the screen zoom, I do not get any white screen. This issue only occurs when the screen zoom is at the minimum level - all other levels will make the app work just fine.

I also tried making page 2 the start page instead of page 1, and in this case page 2 is rendered correctly after starting the app, but then instead page 1 (and all other pages) give a white screen. So there does not seem to be any issue with the actual pages, more so the navigation that does not seem to make any other page than the start page render correctly.

We have been stuck on this for a long time now and I do not know how to fix this issue. Any help would be greatly appreciated!

Thank you very much in advance!

Answer

Hi!

I managed to solve the issue! After setting "bottomBarPage = new BottomBarPage(this)", I wrapped it in a navigation page: "MainPage = new AndroidNavigationPage(bottomBarPage)".
With this code, I did not get any more blank pages when navigating, but instead I got another navigation bar in the top which was blank, in addition to the normal navigation bar in the bottom. I solved this issue by creating a custom navigation page class and setting the bar height to 1, as it did not work to set it 0 or to set the visibility to false.

Thank you either way WenyanZhang-MSFT! I hope this will help anyone else who encounters similar problems with blank pages when navigating!

Blank page when using Navigation in Xamarin Forms

1 answer