Setup your React Native splash screen in 15 minutes

React Native

React native generator

splashscreen

splash

📱 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
  • 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 :

For contain For cover
Donut Contain Donut 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
ios-contain ios-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...


⭐️ 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 !