.Net Maui Shell navigation not working correctly on iOS

Question

I have the following items in the .Net Maui Shell page:

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Places" Icon="cocktail.png" Route="Places" ContentTemplate="{DataTemplate views:Places}"/>
    <ShellContent FlyoutItemIsVisible="False" Route="PlaceRating" ContentTemplate="{DataTemplate views:PlaceRating}"/>
    <ShellContent FlyoutItemIsVisible="False" Route="ManagePlace" ContentTemplate="{DataTemplate views:ManagePlace}"/>
    <ShellContent FlyoutItemIsVisible="False" Route="PlaceDetails" ContentTemplate="{DataTemplate views:PlaceDetails}"/>
    <ShellContent FlyoutItemIsVisible="False" Route="MapPlace" ContentTemplate="{DataTemplate views:MapPlace}"/>
    <ShellContent Title="Cities" Icon="city.png" Route="Cities" ContentTemplate="{DataTemplate views:NearbyCities}" />
    <ShellContent Title="Search" Icon="worldsearch.png" Route="Search" ContentTemplate="{DataTemplate views:Search}" />
</FlyoutItem>
<ShellContent Title="Settings" Icon="settings.png" Route="Settings" ContentTemplate="{DataTemplate views:Settings}"/>
<ShellContent Title="About" Icon="info.png" Route="About" ContentTemplate="{DataTemplate views:About}" />

On Android - everything works as expected. In other words, when I click on the Cities menu option, I am taken to the Cities page as seen below:

However, in iOS, when I navigate to the Cities page - I get a screen that looks like this:

Any idea why this is happening?

Answer 1

So I figured out the issue. For some reason - on iOS - Maui does not like the hidden Flyout Items in the middle of the Shell declaration as shown below (even though it works find on Android)

<Shell x:Class="GBarScene.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:GBarScene.Views"
Shell.FlyoutBehavior="Flyout"
FlyoutWidth="200"
FlyoutBackgroundColor="#F2F5FF">
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Places" Icon="cocktail.png" Route="Places" ContentTemplate="{DataTemplate views:Places}"/>
    <ShellContent FlyoutItemIsVisible="False" Route="PlaceRating" ContentTemplate="{DataTemplate views:PlaceRating}"/>
    <ShellContent FlyoutItemIsVisible="False" Route="ManagePlace" ContentTemplate="{DataTemplate views:ManagePlace}"/>
    <ShellContent FlyoutItemIsVisible="False" Route="PlaceDetails" ContentTemplate="{DataTemplate views:PlaceDetails}"/>
    <ShellContent FlyoutItemIsVisible="False" Route="MapPlace" ContentTemplate="{DataTemplate views:MapPlace}"/>
    <ShellContent Title="Cities" Icon="city.png" Route="Cities" ContentTemplate="{DataTemplate views:NearbyCities}" />
    <ShellContent Title="Search" Icon="worldsearch.png" Route="Search" ContentTemplate="{DataTemplate views:Search}" />
</FlyoutItem>
<ShellContent Title="Settings" Icon="settings.png" Route="Settings" ContentTemplate="{DataTemplate views:Settings}"/>
<ShellContent Title="About" Icon="info.png" Route="About" ContentTemplate="{DataTemplate views:About}" />

To get the navigation to work correctly, I moved the hidden items to the end of the declaration as follows:

<Shell x:Class="GBarScene.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:GBarScene.Views"
Shell.FlyoutBehavior="Flyout"
FlyoutWidth="200"
FlyoutBackgroundColor="#F2F5FF">
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Places" Icon="cocktail.png" Route="Places" ContentTemplate="{DataTemplate views:Places}"/>
    <ShellContent Title="Cities" Icon="city.png" Route="Cities" ContentTemplate="{DataTemplate views:NearbyCities}" />
    <ShellContent Title="Search" Icon="worldsearch.png" Route="Search" ContentTemplate="{DataTemplate views:Search}" />
</FlyoutItem>
<ShellContent Title="Settings" Icon="settings.png" Route="Settings" ContentTemplate="{DataTemplate views:Settings}"/>
<ShellContent Title="About" Icon="info.png" Route="About" ContentTemplate="{DataTemplate views:About}" />
<ShellContent FlyoutItemIsVisible="False" Route="PlaceRating" ContentTemplate="{DataTemplate views:PlaceRating}"/>
<ShellContent FlyoutItemIsVisible="False" Route="ManagePlace" ContentTemplate="{DataTemplate views:ManagePlace}"/>
<ShellContent FlyoutItemIsVisible="False" Route="PlaceDetails" ContentTemplate="{DataTemplate views:PlaceDetails}"/>
<ShellContent FlyoutItemIsVisible="False" Route="MapPlace" ContentTemplate="{DataTemplate views:MapPlace}"/>

Then the navigation worked as expected in iOS and I was taken directly to the Cities page and was not presented with that menu list shown in the question.