React native iOS - splash screen using lottie file

Question

In a React native application, We are trying to load Lottie animation as a splash screen.

In android, I'm able to achieve it by creating a native view for the android Lottie library. I want to play lottie animation in splash screen+ React native

I need the same in iOS, currently, we have an image splash screen, which we have implemented images.xcassets and LaunchScreen.storyboard (refer to screenshots)

Is there any possibility to use Lottie animations instead of these images here?

There is a workaround where I can add the Lottie animation in the app.js before starting with app content. In this case, first, the above-mentioned splash screen comes and the animation. If I remove this splash screen here, then a white screen and the animation will come.

How to use the Lottie animation instead of splash screen image on iOS?

Answer 1

In iOS, the splash screen is a view without any associated logic.

What you could do to give the impression of the animation is to have it look like the first frame of your Lottie file.

Then, in the didFinishLaunchingWithOptions, you can start your Lottie animation.

In a RN application, the splash screen should be a quick flash and most of the startup time would be taken up by the RN setup. So, the animation should show up relatively smoothly even with this approch.

You can take a look at this repo to see how they've implemented it.

Answer 2

At first, I have searched many articles about changing ios's LaunchScreen.storyboard with lottie animation. However, Xcode enforces that LaunchScreen.storyboard should be static screen. So, I inserted animation code after static launch screen loading. Maybe, launch screen is essential, because it is loading screen for initial loading resource in ios. If you remove the launch screen, then ios app shows black or white screen at first loading. Remove launch screen, Xcode 7

If you looking for animation launch screen using lottie in react native, i would suggest looking into this package.

https://www.npmjs.com/package/react-native-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!