How to play an intro animation on splash screen with react native expo?

Question

Currently, if I add a .gif to app.json, it does not work

"splash": {
   "image": "./assets/splash.gif"
}

Edit: It looks like, they are currently working on it, here: (https://expo.canny.io/feature-requests/p/improved-splash-screen-api).

Answer 1

I see you are trying to use gif for the splash screen. Well I have a bad news. Splash screen API of native platform (iOS & Android) doesn't support gif, infact they only support 'png' images.

But, the good news is there is a work around.

We had a similar requirement in our project so we created our custom AppLoading (Provided by Expo) component which has a face of our gif image and in the background it works similar to AppLoading i.e. fetch data and caching. We used a static png image for default splash screen and the transition between static image to gif worked for us.

This is the simplest way but has a drawback that between the static splash screen and animated there is white screen visible for a short duration of time. It happens due to the fact that your javascript bundle is being downloaded in the background and until and unless your entire JS doesn't load you will see a white screen.

• To overcome this you need to detach your expo app as we will be doing some native changes.
• Install and follow the instruction in this module. Benefit of this module is that it exposes the 'hide' function in the javascript.

Basic flow of App.

• App loading start => Static splash screen visible
• Screen is visible till our javascript bundle is not loaded
• Bundle loads => call hide function exposed by modules on ComponentDidMount of SplashScreen component
• Static Splash screen hides => Animated splash screen is visible with background task working (caching and API call)
• Further App Flow

Answer 2

If you're talking about the launch screen and you're not using create-react-native-app you'll have to edit the native launch screen per platform to use your animation.

If you're using create-react-native-app with Expo then you could look at the Splash Screen API.