Xamarin.forms: [Bug] Changing MainPage between AppShell and NagivationPage breaks app screen

[ivoryguard]

Description

Changing MainPage between AppShell and NagivationPage breaks app screen like this;
https://www.dropbox.com/s/skbgti26v6m2x3u/Screenshot_20190627-181115.png?dl=0

Steps to Reproduce

1) Create a new Xamarin.Forms 4.0 solution with AppShell Template at Visual Studio 2019.

2) Add a Content Page into Views folder (LoginPage.xaml)

3) Change MainPage at App.xaml.cs like this;
~~~
public App()
{
InitializeComponent();

    DependencyService.Register<MockDataStore>();
    //MainPage = new AppShell();
    MainPage = new NavigationPage(new Views.LoginPage());
}

~~~

4) Change MainPage in LoginPage like this (I added a Button at LoginPage.xaml);
~
private void LoginButton_Clicked(object sender, EventArgs e)
{
Application.Current.MainPage = new AppShell();
}
~

5) Add a MenuItem at AppShell and Add MenuItem Click event handler like this;
~
private void LogoutMenuItem_Clicked(object sender, EventArgs e)
{
Application.Current.MainPage = new NavigationPage(new Views.LoginPage());
}
~

6) Build and run the app

7) “Login and Logout” action makes app screen broken like this;
https://www.dropbox.com/s/skbgti26v6m2x3u/Screenshot_20190627-181115.png?dl=0

Expected Behavior

Changed MainPage is displayed correctly.

Actual Behavior

After MainPage is changed, the app screen breaks like this;
https://www.dropbox.com/s/skbgti26v6m2x3u/Screenshot_20190627-181115.png?dl=0

Basic Information

• Version with issue: Xamarin.Forms 4.0.0.540366
• IDE: Visual Studio 2019

Screenshots

Reproduction Link

XFShellTest1.zip

[ivoryguard]

I confirmed that the issue occurred at Android only. It did not occurr at iOS simulator.

[jsuarezruiz]

Thanks for the sample. I tested it and can confirm that I reproduce the problem (only on Android).

[aloptrbl]

Same with me, working fine with IOS but on android is broken.

[bryanphillips]

Can confirm this is still happening in version 4.4.0.991537 of Forms, any workarounds?

[ahmetkocadogan]

This issue still happening in version 4.5.0.356. My main page is navigation page (login page), when login completed, i change MainPage = AppShell().

[Mihael479]

I also have problem with this, any progress on this bug?
Also it seems that it also works on android when debugging application which is weird.

[Amine24h]

Same with me (version 4.5.0.495), any workarounds?

[gh-dekker]

I have the same problem. We fixed it (for now) to register the login page in the shell as well. When we logout, we just open the login page as a modal page, hide the tabbar menu and disable and hide the back button.. It's not great but it works..

The only ugly part that is left is when we switch from the first login page (when it's still a NavigationPage) and then after login we set the MainPage to new AppShell(). This works but shows a very ugly animation just like the screenshots above.

[julpan-id]

Little bit tricky to resolve this issue.
......
In App:

MainPage = new AppShell();
if (!isUserLogin)
{
        Shell.Current.GoToAsync($"login").Wait();
}

Register the login page in the shell:
Routing.RegisterRoute("login", typeof(LoginPage));

When Login Success:
App.Current.MainPage = new AppShell();

When Logout:
await Shell.Current.GoToAsync($"login");

In LoginPage:

Shell.SetTabBarIsVisible(this, false);
Shell.SetNavBarIsVisible(this, false);