Xamarin Forms: White screen between page push and pop solved

If you are experiencing white screen when pushing to Navigation or Modal stack on Android, read on.

I’m not sure is this a bug in Xamarin Forms or not, but I guess this is, because it comes only in certain scenarios, and not always.

What is happening, how do you notice this error?

You have got a NavigationPage. You are pushing a new page to the navigationstack, and the page is not getting rendered, only a blank white screen displays.

If you are rotating the device, the page is getting rendered well.

My environment was:
Xamarin.Forms: 4.8 up to 5.0
Device: Samsung Galaxy A12
Visual Studio 2019 Professional with Xamarin.Android SDK 11.4.0.5

Solution

Always invoke the INavigation’s methods on the applications Main Thread. UI changes must go always on the UI thread of the application.

Create a class which wraps the INavigation presented by your Views. It’s handy to store a reference in this class to the Applications Current MainPage’s INavigation instance, so try to build your code to supply the actual INavigation Instance every time to this class when the application’s mainpage is set.

	public class NavigationDispatcher : INavigation
	{
		private INavigation _navigation;

		public IReadOnlyList<Page> ModalStack => _navigation?.ModalStack;

		public IReadOnlyList<Page> NavigationStack => _navigation?.NavigationStack;

		private void SetNavigation(INavigation navigation)
		{
			_navigation = navigation;
		}

		public void InsertPageBefore(Page page, Page before)
		{
			_ = Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(() =>
			  {
				  _navigation.InsertPageBefore(page, before);
			  });
		}

		public Task<Page> PopAsync()
		{
			return Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(async () =>
			{
				return await _navigation.PopAsync();
			});
		}

		public Task<Page> PopAsync(bool animated)
		{
			return Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(async () =>
			{
				return await _navigation.PopAsync(animated);
			});
		}

		public Task<Page> PopModalAsync()
		{
			return Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(async () =>
			{
				return await _navigation.PopModalAsync();
			});
		}

		public Task<Page> PopModalAsync(bool animated)
		{
			return Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(async () =>
			{
				return await _navigation.PopModalAsync(animated);
			});
		}

		public Task PopToRootAsync()
		{
			return Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(async () =>
			{
				await _navigation.PopToRootAsync();
			});
		}

		public Task PopToRootAsync(bool animated)
		{
			return Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(async () =>
			{
				await _navigation.PopToRootAsync(animated);
			});
		}

		public Task PushAsync(Page page)
		{
			return Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(async () =>
			{
				await _navigation.PushAsync(page);
			});
		}

		public Task PushAsync(Page page, bool animated)
		{
			return Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(async () =>
			{
				await _navigation.PushAsync(page, animated);
			});
		}

		public Task PushModalAsync(Page page)
		{
			return Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(async () =>
			{
				await _navigation.PushModalAsync(page);
			});
		}

		public Task PushModalAsync(Page page, bool animated)
		{
			return Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(async () =>
			{
				await _navigation.PushModalAsync(page, animated);
			});
		}

		public void RemovePage(Page page)
		{
			_ = Xamarin.Essentials.MainThread.InvokeOnMainThreadAsync(() =>
			  {
				  _navigation.RemovePage(page);
			  });
		}
	}

Remarks

Consider a check for the current thread in the methods body.
If they are being executed in the main thread, you won’t need to switch to the main again
.

Bug is reported on Github: https://github.com/xamarin/Xamarin.Forms/issues/11993

3 thoughts on “Xamarin Forms: White screen between page push and pop solved”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.