📱 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

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

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

# Within your react-native project folder yarn add react-native-splash-screen cd ios && pod install

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

react-native link react-native-splash-screen cd ios && pod install

💡 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

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

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

or format Its size should be at least 3000px in height

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

, if you display text preserve 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 :

For contain For cover

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:

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

⚠️ 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 App.js or wherever your main component is, and just add these two lines :

import SplashScreen from 'react-native-splash-screen'; // Do stuff and hide the splash when you want SplashScreen.hide();

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

For contain For cover

A few tips before you go...

The color option should be written using quotation marks, e.g '#ffffff' .

. Additionally, you can specify --platform ios or --platform android 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 !