Disclaimer: our plugin React Native Make has been archived on Oct 7, 2021. It is now read-only, but you can read our Tech Radar New Edition to discover the RN technologies we recommand.

‍

Configuring a splash screen for your apps can take time. A quick look on Medium or Stack Overflow will show you the many steps required for both iOS and Android to show a simple image.

Or you can configure your splash screen in 15 minutes using React Native Make.

Installing react-native-make and react-native-splash-screen

To quickly set up your splash screen, we will need two libraries, the first being @bam.tech/react-native-make, a React native CLI plugin with everyday tools to help you with app development

++pre>++code># Within your react-native project folder
yarn add -D @bam.tech/react-native-make
++/code>++/pre>

Additionally, you have to install react-native-splash-screen :

++pre>++code># Within your react-native project folder
yarn add react-native-splash-screen
cd ios && pod install
++/code>++/pre>

You should link it only if your project uses React Native <0.60 :

++pre>++code>react-native link react-native-splash-screen
cd ios && pod install
++/code>++/pre>

Understanding resize modes

@bam.tech/react-native-make provides 3 resize modes:

• contain: the image will always fit the smallest between width and height, preserving ratio and leaving empty spaces
• cover: the image will always fit the largest between width and height, preserving ratio and filling the entire screen
• center: the image is centered on the screen

We will provide examples for both cover and contain

Preparing your image

First of all, you have to provide an image for your splash screen, which will be displayed over a solid color background. This file should match a few criteria :

• It should be an image in .png or .jpg format
• Its size should be at least 3000px in height
• For cover mode, if you display text preserve 1/3rd of the size in margin on each side. It might get cropped on some devices otherwise
• For contain mode it is recommended to use an image with a transparent background as you will be able to add a solid background color later

If you don't have a suitable image on hand, we can lend you these cute splash screens :

++table style="border-collapse: collapse; width: 100%;" border="0">++tbody>++tr>++td style="width: 50%;">For contain++/td>++td style="width: 50%;">For cover++/td>++/tr>++tr>++td style="width: 50%;">

++/td>++td style="width: 50%;">

++/td>++/tr>++/tbody>++/table>

Donut Icon made by Freepik, from www.flaticon.com

Final steps

Once everything is set up, add the splash image in your project's folder and run this command:

++pre>++code>react-native set-splash --path <path-to-image> --background "#<hexaColor>" --resize <contain|cover|center>

# If you are using our contain splash
react-native set-splash --path "Donut Contain.png" --background "#67f1fc" --resize contain

# If you are using our cover splash
react-native set-splash --path "Donut Cover.png" --resize cover
++/code>++/pre>

?? The path option is mandatory !

Right now, your splash screen will stick on your screen and never let go. There is one last step before we can see our app appear right after the splash screen. Open your ++code>App.js++/code> or wherever your main component is, and just add these two lines :

++pre>++code>import SplashScreen from 'react-native-splash-screen';

// Do stuff and hide the splash when you want

SplashScreen.hide();
++/code>++/pre>

? We're done ! Please note that, in order to see your new splash screen on iOS, you need to uninstall the app and restart the device first.

The result should look like this:

++table style="border-collapse: collapse; width: 100%; height: 54px;" border="0">++tbody>++tr style="height: 27px;">++td style="width: 1.27389%; height: 27px;">For contain++/td>++td style="width: 98.7261%; height: 27px;">For cover++/td>++/tr>++tr style="height: 27px;">++td style="width: 1.27389%; height: 27px;">

++/td>++td style="width: 98.7261%; height: 27px;">

++/td>++/tr>++/tbody>++/table>

A few tips before you go...

• The color option should be written using quotation marks, e.g ++code>'#ffffff'++/code>.
• Additionally, you can specify ++code>--platform ios++/code> or ++code>--platform android++/code> to choose which environment want to configure your splash screen for.

Finally...

• We have a lot more coming with React native make, so if you appreciate this tool and what we are doing, please help us reach the moon by ? our project on Github.

🎯 Now that you have installed react-native-make, you can do way more. For instance, learn how you can configure your launch icons in a single command line !