I want to play lottie animation in splash screen+ React native

Question

In React native, before app launch, We can see white screen. I want to load splash screen immediate on app icon click. I want to avoid white background.

Using react-native-splash-screen we can do it but it only support png not support lottie animation. any solution for this?

Answer 1

I don't know found a solution. I will write mine.

1. In your project go android/app/build.gradle

final lottieVersion = "2.8.0"

Declare final lottie version after

import com.android.build.OutputFile

2. In same place you have to add this line to

dependencies {

here will be some

implementation [ ... ] 

we will add implementation 'com.airbnb.android:lottie:$lottieVersion'

3. After this steps we will add these lines to our launch_screen.xml

we need a raw directory for our lottie json's. Create a directory under the res directory named raw and put your lottie animation into the raw folder.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_splash">

 <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_rawRes='@raw/loading_chat'
        app:lottie_loop="true"
        app:lottie_autoPlay="true"
    />

</LinearLayout>

This guide for react native >= 60 , Thanks

Answer 2

If you looking for animation launch screen in react native, i would suggest looking into this package. (search keyword in npm is "react-native-lottie-splash-screen")

react-native-lottie-splash-screen

This package forks "react-native-lottie-screen" repo and add feature of lottie splash screen.

It implements animation splash screen using airbnb lottie files. Also, I apply this for multiple react native projects and it worked well. Have a nice day!