How to set the splash screen for react-native android

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

Solution 1:

I had tried 3 of the following ways. The first one is what I am currently using for android splash screen for react-native projects.

1. Using a npm package written by other.

   reference: https://github.com/remobile/react-native-splashscreen

2. Create a SplashScreen component and redirect afterward.

   reference: How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)

3. Natively in java code.

   reference: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

I have a fetch request in the componentDidMount() of initialRoute.

Using the first way from the list above performs the request while showing the splash screen.

Whereas the second way, needs to wait until the SplashScreen component get unmounted.

Third way is slightly more codes to write and maintain.

Solution 2:

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

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   
       <item
           android:drawable="@android:color/white"/>
   
       <item>
           <bitmap
               android:gravity="center"
               android:src="@mipmap/ic_launcher"/>
       </item>
   
   </layer-list>
   

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

   <resources>
   
       <!-- Base application theme. -->
       <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
           <!-- Customize your theme here. -->
       </style>
   
   <style name="SplashTheme" parent="AppTheme">
           <item name="android:windowBackground">@drawable/splash_screen</item>
       </style>
   
   </resources>
   

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

   <activity
           android:name=".MainActivity"
           android:label="@string/app_name"
           android:theme="@style/SplashTheme"
       android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
   </activity>
   

   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 <View> 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:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="foobar">#ca949b</color>
</resources>

You can use whatever name and whatever color code.

Then back in splash_screen.xml we update <item android:drawable="@android:color/white" /> to be <item android:drawable="@color/foobar" />

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.

Solution 3:

Did you try to use this? I came across this a few days ago. Works fine on iOS but I haven't tested it yet on Android (it should be fine). You should have node >= 6 and imageMagic installed. (for mac: brew install imagemagic)

npm install -g yo generator-rn-toolbox
yo rn-toolbox:assets --splash IMGAE --android