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

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.

CodePudding user response：

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

CodePudding user response：

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