⏱ 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|
🚀 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
- Additionally, you can specify
--platform androidto choose which environment want to configure your splash screen for.
- 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 !