How to set the splash screen for react-native android

Question

How does one set a splash screen for react-native android, I can\'t find anything on the topic and I thought it was odd.

Thanks

Answer 1

This tutorial here works great - I quoted it and modified a bit, I added the react-native-background-color touch.

https://medium.com/react-native-development/change-splash-screen-in-react-native-android-app-74e6622d699 (which is based on this https://www.bignerdranch.com/blog/splash-screens-the-right-way/ - so this is native Android technique)

1. You need to create splash screen in res/drawable. Let’s call it splash_screen.xml

2. Now you need to update res/values/styles.xml

3. Now open AndroidManifest.xml and replace AppTheme with SplashTheme in MainActivity

   We use SplashTheme instead of updating AppTheme, to add this background only to start activity and leave other stuff without changes.

4. After you try the above out, you will notice the splash screen will always stay under your js views. You have two options to hide the splash screen:

   • Either use react-native-background-color module from https://github.com/ramilushev/react-native-background-color to set a color on the background which will remove the image. (This is the recommended way because when keyboard shows in some cases, it makes the root view visible for a split second.)
   • Or set a solid (non-transparent) background color on your root view.

Note on what "root view" means. This is the very first you render in your app that you control (meaning that you can style it).

Custom Color

If you want to use a custom color, other then @android:color/*** then what you have to do is create colors.xml at android\app\src\main\res\values\colors.xml and define a colors like this:

    #ca949b

You can use whatever name and whatever color code.

Then back in splash_screen.xml we update to be

Extra info on removing the background splash image from behind

After you create a splash like this. You will notice that the image stays in the background forever. To remove this image use this module - https://github.com/ramilushev/react-native-background-color - and call BackgroundColor.setColor('#XXXXXX') with whatever color. It will remove the image.

Instead of using an opaque color on your root view to cover the splash, it is still recommended to use the above module, because when the keyboard shows, the background view shows for a split second.