expo-splash-screen vs react-native-bootsplash

[aymane-missouri-nw]

Both expo-splash-screen and react-native-bootsplash are packages that allow you to add splash screens to your React Native app. So why add them both ?

[frankcalise]

Hi @aymane-missouri-nw, thanks for the question - I moved this over to Q&A as part of a discussion.

@yulolimum Can you help out with an explanation here?

[yulolimum]

Hey @aymane-missouri-nw! Good question!

Since we support both expo (managed) and bare (vanilla) workflows, we added both packages to the boilerplate. When using the managed workflow, expo-splash-screen is used. When using the bare workflow, react-native-bootsplash is used.

Why don't we just pick one and use it for both:

• react-native-bootsplash isn't supported on the managed workflow out of the box. You might be able to create an expo config-plugin along with prebuild to use it, but we haven't tried that so can't recommend.
• expo-splash-screen can be used both on managed and bare workflows; however, as far as i know, it does not support the new Android 12 splashscreen API. You will essentially get 2 splash-screens on Android 12 - the default one, then the expo one. There are some workarounds to make the default Android 12 splash-screen invisible, but that's not very good user experience. (See Duplicate splash screens on Android 12 with expo-splash-screen; upgrade to new Splashscreen API required? expo/expo#16084 (comment))

Other considerations:

• react-native-bootsplash uses platform tools to build the splash-screen. On Android, this involves using the new androidx.core:core-splashscreen APIs to control the color, size, and theme of the splash screen. On iOS, it uses a Storyboard with a colored view and a centered image.
• expo-splash-screen recommends to use an image overlay that fills entire viewport. I think there are ways to override this via the config however.

In conclusion, on managed workflow (expo), you pretty much have to use expo-splash-screen. On the bare workflow, you have 2 choices - my recommendation would be to use react-native-bootsplash since it's already preconfigured and since it has support for Android 12 apis.

Hope this helps!