Maui CommunityToolkit Popup crashes applications

In my .NET8 MAUI application, I use the MAUI CommunityToolkit version 9.0.1 and in particular Popup crashes my applications. I saw a bug on GitHub that is exactly my issue but there is no answer for it. Here what I understand about this error and how to avoid it.

Scenario

Following my post Open a loading popup from MAUI ViewModel, I defined my Popup called LoadingPopup view in my new project. This is the full code of the popup.

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup
        x:Class="LanguageInUse.Views.Popups.LoadingPopup"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:lang="clr-namespace:LanguageInUse"
        xmlns:popups="clr-namespace:LanguageInUse.Views.Popups"
        xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

    <toolkit:Popup.Resources>
        <Style TargetType="{x:Type popups:LoadingPopup}">
            <Setter Property="Size" Value="300,300" />
            <Setter Property="Color" Value="White" />
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="False" />
        </Style>
    </toolkit:Popup.Resources>

    <StackLayout
            Margin="30"
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            WidthRequest="350">
        <VerticalStackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <ActivityIndicator
                    HorizontalOptions="Center"
                    IsRunning="True"
                    Color="{StaticResource Gray900}" />
            <Label
                    x:Name="labelLoading"
                    MaximumWidthRequest="240"
                    Style="{StaticResource labelLoading}"
                    Text="{lang:Translate Loading}"
                    WidthRequest="240" />
        </VerticalStackLayout>
    </StackLayout>
</toolkit:Popup>

Open the popup from the ViewModel

Now, I want to display the popup from the ViewModel associate to a page. For reference, I’m going to call this page the MainPage. So, in the constructor of the page I bind the ViewModel.

public DictionaryWordsList(DictionaryWordsListViewModel model)
{
    InitializeComponent();

    vm = model;
    BindingContext = vm;
}

Then, in the ViewModel, I have a function that reads some data from the database and the APIs. For this reason, I want to display a nice message to the user that he has to wait, a loading popup basically. This is the code to display the popup.

var loadingPopup = new LoadingPopup();
loadingPopup.SetMessage(AppResources.DictionaryWordsLoading);
loadingPopup.Opened += async (s, e) =>
{
    try
    {
        // my code
    }
    catch (Exception ex)
    {
    }
    finally
    {
        if (loadingPopup != null)
            await loadingPopup.CloseAsync();
    }
};
await Application.Current.MainPage.ShowPopupAsync(loadingPopup);
loadingPopup = null;

Now, I tested the page and it is working fine.

Add navigation

The next step is to add the navigation between the MainPage and another page. So, the user can click a button in the UI and is redirected to another page with this code

await Shell.Current.GoToAsync($"{nameof(WordEdit)}?DictionaryID={DictionaryID}", true);

From this page, the user can go back to the MainPage. There is another button when I use this code to redirect the user back

await Shell.Current.GoToAsync("..", true);

Now, the navigation is sorted. I tested it on iOS, Android and Windows from my machine in Debug and it is working.

Deploy an Apple Store

Finally, I packaged the application for the Apple Store and published it. The application is live! Checking the AppCenter, I started to see a lot of error, these kinds of errors

libsystem_kernel.dylib
0x1d8ecf000 + 50220
libsystem_c.dylib
0x197d09000 + 482208
LanguageInUse
0x10245c000 + 3312336
LanguageInUse
0x10245c000 + 4931284
LanguageInUse
0x10245c000 + 4931396
LanguageInUse
0x10245c000 + 4931444
LanguageInUse
0x10245c000 + 4632768
LanguageInUse
0x10245c000 + 4641936
LanguageInUse
0x10245c000 + 5814296
libsystem_pthread.dylib
0x1ecc73000 + 24684

For me, those errors are impossible to understand. How you can see, I got a lot of those kind of errors. Now, I have to find a way to get some logs and understand what it happens.

Add MetroLog

So, I was looking around to find a way to get logs from my MAUI applications and get more details about the issues. Having logs is always useful and I want to find a solution that I can use everywhere.

After a bit of research, I found MetroLog. This is a component for MAUI that helps you to organize and share your logs. It is quite easy to add to a project and gives you the option to share the logs via email. This is so cool!

I won’t explain now how to add MetroLog in detail but in the GitHub page, you have the explanation. The documentation is very clear and the implementation is quite straightforward.

Release the app again

Finally, I managed to publish the app again in every store with the logs. I quite like the idea that the users can send me their logs and analyze them to understand the issues in the apps. So, what I discovered is that the component Popup crashes my application only in iOS. The error is this one

CommunityToolkit.Maui.Core.Views.MauiPopup.SetShadowView(UIView&
target)
CommunityToolkit.Maui.Core.Views.MauiPopup.ViewDidLayoutSubviews()
ObjCRuntime.Runtime.ThrowException(IntPtr )
UIKit.UIApplication.UIApplicationMain(Int32 , String[] , IntPtr ,
IntPtr ) UIKit.UIApplication.Main(String[] , Type , Type )
LanguageInUse.Program.Main(String[] args)

The discovery

After long hours, I discovered where the problem was. A quick recap. The user is in the MainPage, click a button and he is redirected to the second page. From the second page, click to go back. When the application goes back to the MainPage, the ViewModel starts again and calls the loading popup code to display the nice message to the user.

The issue is that at this point the page is not fully displayed, yet the ViewModel is working here. Because the page is not fully displayed, the PopUp component is not on the screen. When it tries to set the shadow of the view, iOS complains (only iOS, Android and Windows don’t care).

My solution

So, what is the solution? My solution is not to display the popup on the page but to replace it with a nice ActivityIndicator. Yes, I know this is not the best solution because I want to see something better, but for now this is a good compromise.

Please let me know if you have a real solution. For now, this post about Maui CommunityToolkit Popup crashes applications wants to give you my thoughts and my discovery. Maybe someone else has the same issue; you are not alone!

PS: the feature image of this post is created by Microsoft Designer. I’m not sure how it came up with this image. Any thoughts? 😜

Happy coding!