Lottie Animation as a native splash screen for my react-native App

Question

I'm using a lottie Animation as a splash screen for my react native app. the current implementation is that I've just put the lottie animation as the initial page in my navigation stack but, there is a latency until the JavaScript takes control. this isn't an issue on IOS but very noticeable on Android. I want to figure out if there's any way to cut out that latency. Basically, How to make Android draw something from the very beginning (not just white screen)?

I have tried keeping the first frame of the animation as a native splash screen until the animation kicks in but the transition still looks very abrupt.

Answer 1

There is another similar question about this here.

Lottie Splash Screen with Expo - animated splash screen with Expo

They recommended using react-native-animated-screen and they have an example in expo as well. Expo example

Answer 2

for android you have to use react-native-splash-screen and there you can show Lottie Animations . Here is a simple example

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/splash_back">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/icon"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.43"
        tools:ignore="MissingConstraints" />


    <TextView
        android:id="@+id/text_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/phone_number_tracker"
        android:textColor="#fff"
        android:textSize="20sp"
        android:textStyle="bold"
        app:fontFamily="Poppins-Medium"
        app:layout_constraintBottom_toTopOf="@+id/animationView"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintHorizontal_bias="0.516"
        app:layout_constraintStart_toStartOf="@+id/imageView"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintVertical_bias="0.133" />

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.18"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_bias="0.63"
        app:layout_constraintWidth_percent="0.6"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/loading" />

</androidx.constraintlayout.widget.ConstraintLayout>

for more information please visit react-native-splash-screen