Xamarin Forms Lottie image not displaying - xamarin

Question

I have Xamarin Forms application. I need to put image as json in project.
Here is XAML:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
x:Class="xxx.Views.ScanReadyPage">
<StackLayout>
<forms:AnimationView
x:Name="lottie"
Animation="12240-cash-car.json"
Loop="False"
AutoPlay="True"
WidthRequest="200"
HeightRequest="200"
Margin="10,0,10,0"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
I have installed Com.Airbnb.Xamarin.Forms.Lottie version 3.0.3 and Xamarin.Forms version 4.3.0.991221
I have added downloaded file from lottiefiles.com: 12240-cash-car.json to Assets folder in XamarinForms.Android project and set build action to Android Asset.
Nothing is displayed on Android. No informations at output, no error occured. I have changed Xamarin Forms to 3.6.0 - no changes. I have installed all versions of Lottie: from 2.6.3 to 3.0.3. - no image is being displayed. (Version 2.6.3. and earlier have error about missing keystore).
I have checked code behind version but it is also not working:
public MainPage()
{
element = new AnimationView()
{
Loop = true,
AutoPlay = true,
Animation = "12230-bounce-down-steps.json",
WidthRequest = 400,
HeightRequest = 400,
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
IsVisible = true,
Speed = 1
};
}
AnimationView element = new AnimationView();
protected override void OnAppearing()
{
element.Animation = "12230-bounce-down-steps.json";
element.Play();
}
How to make it works?

Answer 1

I have found solution here: https://iinteractive.com/notebook/2017/05/31/lottie-xamarin.html . At start install "Com.Airbnb.Xamarin.Forms.Lottie" in all 3 projects. Then install another library: "Com.Airbnb.Android.Lottie" separately in Android project. Now you can go to MainActivity.cs, enter "using Lottie.Forms.Droid" and "AnimationViewRenderer.Init(); and json images are displaying correctly. Thanks Guilherme Nimer for good tip.

Answer 2

did u init the AnimationViewRenderer from MainActivity?
MainActivity.cs
protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(savedInstanceState);
PullToRefreshLayoutRenderer.Init();
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
AnimationViewRenderer.Init();
LoadApplication(new App());
}
on AppDelegate.cs
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
LoadApplication(new App());
AnimationViewRenderer.Init();
return base.FinishedLaunching(app, options);
}
Working animation that i use in my proj
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class="SincorSPM.ErrorPopup.PopupError">
<pages:PopupPage.Animation>
<animations:ScaleAnimation
PositionIn="Bottom"
PositionOut="Center"
ScaleIn="1"
ScaleOut="0.7"
DurationIn="700"
EasingIn="BounceOut"/>
</pages:PopupPage.Animation>
<Frame IsClippedToBounds="True" CornerRadius="15" Margin="15,15">
<StackLayout BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="15,15">
<Label Text="Ocorreu um erro!" TextColor="Orange" FontSize="Title" Margin="10,10,10,3" HorizontalOptions="CenterAndExpand"/>
<Label Text="Verifique sua conexão e tente novamente" TextColor="Black" FontSize="Medium" Margin="10,0,10,0" HorizontalOptions="CenterAndExpand"/>
<Label x:Name="txCode" IsVisible="False" TextColor="Black" FontSize="Medium" Margin="10,0,10,0" HorizontalOptions="CenterAndExpand"/>
<lottie:AnimationView
Animation="dc.json"
AutoPlay="True" Loop="true"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
<Button Margin="10,10" HorizontalOptions="FillAndExpand" Text="Fechar" BackgroundColor="#032e5c" CornerRadius="15" TextColor="White" Clicked="Fechar"/>
</StackLayout>
</Frame>
</pages:PopupPage>
my lottie is 3.0.3

Answer 3

I solved the issue by updating my xamarin.forms to the latest and changing Target Android Version to 10.0