CODEWITHSUNDEEP
androidlottie
Fustigador
Fustigador

Reputation: 6459

Lottie animation not showing at all

My import:

implementation "com.airbnb.android:lottie:3.2.2"

In my splash_layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/splash"/>

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:lottie_fileName="logo_android.json"
    app:lottie_loop="true"
    app:lottie_autoPlay="true"
    app:lottie_imageAssetsFolder="demo"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"/>

In SplashActivity:

private LottieAnimationView animationView;
(...)
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.splash_layout);
    animationView=findViewById(R.id.animation_view);
    animationView.playAnimation();
(...)
}

My image folder is in src/main/res/assets/demo. The logo_android.json file is in src/main/assets

This way, the animation does not show at all. Not a single image is displayed. How can I get the animation working?

In case it matters, the JSON file looks something like this:

{"v":"5.5.8","fr":25,"ip":0,"op":400,"w":800,"h":400,"nm":"logo_android","ddd":0,"assets":[{"id":"image_0","w":396,"h":51,"u":"images/","p":"img_0.png","e":0},{"id":"image_1","w":122,"h":215,"u":"images/","p":"img_1.png","e":0},(...)

Upvotes: 2

Views: 11257

Answers (3)

Jarrett GXZ
Jarrett GXZ

Reputation: 608

For anyone using Expo SDK V44 (React Native V0.64.3), lottie-react-native V5.0.1 and lottie-ios V3.2.3. What I have found that works is to call the .play() method on the ref from the LottieView, on mount of the component. I referenced this from the official Expo Lottie documentation: https://docs.expo.dev/versions/latest/sdk/lottie/.

const animationRef = useRef<LottieView | null>(); // The <> is for TypeScript, but can be removed for JavaScript

  useEffect(() => {
    animationRef.current?.play();
  }, []);

  return (
    <LottieView
      ref={(animation) => {
        animationRef.current = animation;
      }}
      source={require("../path_to_animation_folder)}
      autoPlay
      loop
      style={{ width, height }}
    />
  );

Hope I managed to help someone!

Upvotes: 1

صلي علي محمد - Atef Farouk
صلي علي محمد - Atef Farouk

Reputation: 4237

managed to get it working by this:

if(lottieTest.getFrame() == lottieTest.getMaxFrame()) {
   lottieTest.setFrame(1);
}

please refer to this.

Upvotes: 0

Fustigador
Fustigador

Reputation: 6459

Solved it.

In case it can help someone, you have to put the images in src/main/assets/images

Upvotes: 2

Related Questions