.NET MAUI IOS application crash randomly when navigations several times

Question

I am using Stack-Based Navigation (similar to master-details in Xmarion forms). The application works fine for Android and IOS simulators but in physical iPhone it crash randomly.

This is my App.xaml:

MainPage = new Sidebar()
{
      FlowDirection = FlowDirection.LeftToRight
};

This is sibebar.xmal:

public partial class Sidebar : FlyoutPage
{

    public Sidebar()
    {
        InitializeComponent();
        Detail = new NavigationPage(new MainPage());
    }

 private async void GoToApplicationSettingsPage(object sender, TappedEventArgs e)
 {
    
     await Detail.Navigation.PushAsync(new ApplicationSetting());
     IsPresented = false;
 }

 private async void GoToHxSettingsPage(object sender, TappedEventArgs e)
 {
     await Detail.Navigation.PushAsync(new MedicalHistorySettings(), true);
     IsPresented = false;
 }

 private async void GoToVisitsSettingsPage(object sender, TappedEventArgs e)
 {
     await Detail.Navigation.PushAsync(new VisitsSettings(), true);
     IsPresented = false;
 }

 private async void GoToOperationsSettingsPage(object sender, TappedEventArgs e)
 {
     await Detail.Navigation.PushAsync(new OperationsSettings(), true);
     IsPresented = false;
 }

 private async void GoToVisitsSerachPage(object sender, TappedEventArgs e)
 {
     await Detail.Navigation.PushAsync(new VisitsSearch(), true);
     IsPresented = false;
 }

 private async void GoToOperationsSearchPage(object sender, TappedEventArgs e)
 {
     await Detail.Navigation.PushAsync(new OperationsSearch(), true);
     IsPresented = false;
 }

}

This is what happen using iPhone 13:

As seen the app is crashed when this code executed 3 times:

await Detail.Navigation.PushAsync(new ApplicationSetting(), true);

I tried on another device (iPhone 13 pro max) in the first time the app deployed to the device its work without any problem, but when deploy again it also crashed but when navigating for 5 or 7 times. It really very random and unexpected. I tried on debug and release mode but it doesn't solve the problem. Someone suggest to empty the stack before navigation, so I tried this:

await Detail.Navigation.PopAsync();
await Detail.Navigation.PushAsync(new ApplicationSetting());

But also same problem. It's worth mentioning that there no error or exceptions occur during the run time, but when I test it several times, only two times I get this error:

An unhandled exception of type 'System.InvalidCastException' occurred in Microsoft.iOS.dll: 'Specified cast is not valid.' at UIKit.UIApplication.xamarin_UIApplicationMain(Int32 argc, IntPtr argv, IntPtr principalClassName, IntPtr delegateClassName, IntPtr* gchandle) at UIKit.UIApplication.UIApplicationMain(Int32 argc, String[] argv, IntPtr principalClassName, IntPtr delegateClassName) at UIKit.UIApplication.Main(String[] args, Type principalClass, Type delegateClass) at EClinicMaui.Program.Main(String[] args) in /Users/sysprobs/Desktop/E-Clinic/EClinicMaui/Platforms/iOS/Program.cs:line 14

I upload the project to github so that anyone can test it. I am using Visual studio code in MAC OS.

Answer 1

After two weeks of searching, I finally find the problem. It was because all pages have an animated gif image with resolution 1500x1500. The problem solved by resizing the gif image to 100x100.

Answer 2

Well then you should rather use AppShell with pre-determined content and routing like so:

<Shell
    x:Class="TwentyMAUI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:dx="http://schemas.devexpress.com/maui"
    xmlns:local="clr-namespace:TwentyMAUI"
    FlyoutBehavior="Locked"
    FlyoutWidth="60"
    Title="TwentyMAUI"
    FlyoutBackground="{x:StaticResource gradientSilver}">


    <FlyoutItem Title="Home" Icon="main.png">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
    </FlyoutItem>
    <FlyoutItem Title="Login" Icon="region.png" x:Name="regionPage" FlyoutItemIsVisible="False">
        <ShellContent ContentTemplate="{DataTemplate local:RegionsPage}" Route="RegionsPage"/>
    </FlyoutItem>
    </Shell>

In your case you would probably need to adjust FlyoutWidth and FlyoutBehaviour,also you should define your own style for the items like so:

 <Shell.ItemTemplate>
     <DataTemplate>
         <Frame Background="{x:StaticResource gradientSilver}" Margin="4" Padding="0" InputTransparent="True" CascadeInputTransparent="False">
             <Image Source="{Binding FlyoutIcon}" HeightRequest="70"
                    Margin="5"
                    VerticalOptions="Center"/>
         </Frame>
     </DataTemplate>
 </Shell.ItemTemplate>

As for the navigation, click on items or use routing from the code behind: For register:

    Routing.RegisterRoute("StorePage", typeof(StorePage));

And for navigation:

    await Shell.Current.GoToAsync("//MainPage");

More on the subject: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/navigation?view=net-maui-9.0

Answer 3

Could you try pushing already formed page instead of forming new one every time and check if this fixes the problem? Like to change it to:

public partial class Sidebar : FlyoutPage
{
private ApplicationSettings AppSettingsPage;
    public Sidebar()
    {
        InitializeComponent();
        Detail = new NavigationPage(new MainPage());
        AppSettingsPage = new ApplicationSettings();
    }

 private async void GoToApplicationSettingsPage(object sender, TappedEventArgs e)
 {
    
     await Detail.Navigation.PushAsync(AppSettingsPage);
     IsPresented = false;
 }

}

Or try to change the behaviour from PushAsync to PushModalAsync, like

await Shell.Current.PushModalAsync(new ApplicationSettings());