[BUG] MAUI.iOS does not work with SKLottieView or SKCanvasView

[MrDeej]

Description

It does work on Android and Windows. But not on iOS

Does not work (no exception, no animation): <skia:SKLottieView Source="lottieoppgaver.json" HeightRequest="200" WidthRequest="200" RepeatCount="-1" RepeatMode="Restart" HorizontalOptions="Center"/>

Also does not work:

<skia2:SKCanvasView
                x:Name="skiaView"
                PaintSurface="OnPaintSurface"
                IgnorePixelScaling="True"
                HorizontalOptions="Center"/>

using CommunityToolkit.Maui.Views;
using SkiaSharp;
using SkiaSharp.Views.Maui;

namespace Fa.Maui2.Views.Oppgaver
{
    public partial class StartPage: ContentPage
    {
        SkiaSharp.Skottie.Animation animation;
        double time;
        public StartPage()
        {
            InitializeComponent();
        }

      


        protected override void OnDisappearing()
        {
            base.OnDisappearing();

            animation = null;
        }

        protected override async void OnAppearing()
        {
            base.OnAppearing();

            // Lottie file from https://lottiefiles.com/107653-trophy
            var json = await FileSystem.OpenAppPackageFileAsync("lottieoppgaver.json");

            // load Lottie animation
            SkiaSharp.Skottie.Animation.TryCreate(json, out animation);

            // Read important values
            var duration = animation.Duration.TotalSeconds;
            var interval = 1.0 / 60.0;

            // Start a timer to tick
            Dispatcher.StartTimer(TimeSpan.FromSeconds(interval), () =>
            {
                // null means the page is going away
                if (animation is null)
                    return false;

                // Move to the next frame
                animation.SeekFrameTime(time);

                // Increase the time for the next frame
                time = (time + interval) % duration;

                // Invalidate the canvas
                skiaView.InvalidateSurface();

                return true;
            });
        }

        private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
        {
            var canvas = e.Surface.Canvas;

            // Clear the canvas
            canvas.Clear(SKColors.Transparent);

            // Render the animation
            animation?.Render(canvas, e.Info.Rect);
        }
    }
}

Expected Behavior

Animation should show

Actual Behavior

SKLottieView- Does not show anything SKCanvasView - Crashes with exception:

Basic Information

	<PackageReference Include="SkiaSharp.Skottie" Version="2.88.4-preview.3" />
	<PackageReference Include="SkiaSharp.Views.Maui.Controls" Version="2.88.4-preview.3" />
	<PackageReference Include="SkiaSharp.Extended.UI.Maui" Version="2.0.0-preview.63" />

• Last known good version: NA

• IDE: Microsoft Visual Studio Professional 2022 (2) (64-bit) - Preview Version 17.4.0 Preview 3.0

• Platform Target Frameworks:

  • iOS: net7.0-ios

• Target Devices:

  • Device IPhone 12

[MrDeej]

After many many hours further developing my MAUI app, I see that it actually works when using MAC as build host, but not from local Visual Studio build.

[420tech]

I have same issue. Nothing displays/runs on iOS or Mac - but on Android everything works as expected.

[Syed-RI]

@mattleibow I have faces the same issue targeting .net7-ios and android. Please have a look once you get the chance?

[Syed-RI]

Has anyone found a workaround for this ?

[bryansjenks]

I also have this issue with slightly different behavior. I have the SKLottieView in a CarouselView and some pages it displays and others it doesn't. It's totally random because swiping around the pages it was working it will stop and the pages that didn't work will start or it will display while swiping then disappear. SkiaSharp.Extended.UI.Maui 2.0.0-preview.61

[vikher]

I also have this issue with slightly different behavior. I have the SKLottieView in a CarouselView and some pages it displays and others it doesn't. It's totally random because swiping around the pages it was working it will stop and the pages that didn't work will start or it will display while swiping then disappear. SkiaSharp.Extended.UI.Maui 2.0.0-preview.61

I've been observing a similar behavior as well. It's frustrating how random it seems—I'm encountering the SKLottieView displaying intermittently within a CarouselView. Sometimes, it works perfectly on certain pages but then abruptly stops, while on other pages where it wasn't working, it starts to display unexpectedly.

I'm also wondering if anyone has found a fix or workaround for this issue. It's been quite inconsistent for me,