Issue: First Lottie Animation Not Displaying in .NET MAUI CarouselView #311
Description
Moved Issue From dotnet/maui#29650
Description
I’m using .NET MAUI with SkiaSharp.Extended.UI.Maui 2.0.0 and trying to show a Lottie animation inside a CarouselView. My code works correctly for every item except the first one—the animation does not show at all. Only the text shows.
If I change the CarouselView.Position to 1, then the second item’s animation disappears instead. It seems like whichever item is initially rendered does not show the animation, while all others do.
Here's a simplified version of the setup:
<CarouselView
x:Name="WalkthroughCarousel"
ItemsSource="{Binding WalkthroughItems}"
VerticalOptions="FillAndExpand">
<CarouselView.ItemTemplate>
<DataTemplate x:DataType="uiEntities:WalkthroughItem">
<StackLayout Padding="20" Spacing="20">
<skia:SKLottieView
HeightRequest="300"
WidthRequest="300"
Source="{Binding AnimationFile}"
IsAnimationEnabled="True"
RepeatCount="-1"
RepeatMode="Restart" />
<Label Text="{Binding Title}" FontSize="24" />
<Label Text="{Binding Description}" FontSize="16" />
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
public partial class MainPageViewModel : ViewModelBase
{
private int currentIndex = 0;
[ObservableProperty]
private ObservableCollection<WalkthroughItem> walkthroughItems = [];
public MainPageViewModel()
{
WalkthroughItems = [
new WalkthroughItem
{
AnimationFile = SKLottieImageSource.FromFile("woman_feelings_flowing.json"),
Title = "Talk it Out",
Description = "Reflect on your feelings through safe conversations."
},
new WalkthroughItem
{
AnimationFile = SKLottieImageSource.FromFile("tallman.json"),
Title = "Name the Feeling",
Description = "Track emotional reactions with a single tap."
},
new WalkthroughItem
{
AnimationFile = SKLottieImageSource.FromFile("thinkinglamp.json"),
Title = "Understand Yourself",
Description = "Gain insights and make peace with your emotions."
}
];
}
}
public class WalkthroughItem
{
public object AnimationFile { get; set; }
public string Title { get; set; } = string.Empty;
public string Description { get; set; } = string.Empty;
}
Steps to Reproduce
No response
Link to public reproduction project repository
No response
Version with bug
9.0.0 GA
Is this a regression from previous behavior?
Not sure, did not test other versions
Last version that worked well
No response
Affected platforms
Android, I was not able test on other platforms
Affected platform versions
Android 14 API 34
Did you find any workaround?
Not yet I even tried to change positions and played around like added a dummy item and then removed it and still didn't work.