How to add a splash screen to react native(Android)
In my previous article, I wrote about how to add a splash screen to react native (IOS).
Now, In this article, I will tell you how we can add a splash to react-native (Android). I am gonna tell you very simple steps. And this is a very initial thing we can create for every mobile application. So, that’s very much important thing for every developer for knowing how to add it in the right way.
You can view the whole source code here :
I am using simple react native project for adding the splash screen to it. So, let get started by initialising the react native project in your system.
react-native init SplashScreenReactNative
cd SplashScreenReactNativeAfter running these two lines into the terminal, you will have to react native project on your system.
If you noticed that react native application have a white background splash screen. On that screen, we are adding our custom splash screen. How to notice that first white splash screen, we need to set first a dark background colour in our app.
Replace your App.js component with below code
All you just need to replace the background color with dark red and text color to white.
Add the splash screen to the Android app
Open your project in Android studio first.
After opening the project on Android studio then you will go to mipmap folder which is located in the android/app/src/main/res folder and each pixel density has a different density appended to the folder name that you can find in the below screenshot.
And this is the place where all of the images should go according to its pixel density mipmap folder
- mipmap-mdpi = icon.png
- mipmap-hdpi = icon@2x.png
- mipmap-xhdpi = icon@3x.png
- mipmap-xxhdpi = icon@3x.png
You can create your icon here Android Asset Studio and it will provide you with all mipmap folder images.
And copy that all images according to its mipmap folder.
In the next step, we will go and create the splash screen that is displayed when the application first launches.
- Create a background_splash.xml file in android/app/src/main/res/drawable you might be created a drawable folder first in res folder.
And the following code :
2. In the next, we will create a colors.xml file in the android/app/src/main/res/values which we will define our red color which is the same as the red in our application.
And the following code :
Then open a styles.xml file in android/app/src/main/res/values/styles.xml and add the following code :
3. In the next steps, we are going to tell that our application initially starts SplashTheme. And we will do that in the AndroidManifest.xml file and inside of <application></application>
Add the following code :
And modify the MainActivity to be the following. Add android:exported="true" and comment the <category android:name=”android.intent.category.LAUNCHER” />
And our final AndroidManifest.xml file looks like the following:
4. In the next step, we are creating a SplashActivity.java file in android/app/src/main/java/com/SplashActivity.java
Now run your application and see everything is working fine or not.
And it works good but there is a problem after the splash screen there is a loading occurs, it can be fixed by adding a react-native-splash-screen module to react native application.
yarn add react-native-splash-screen@3.0.6
react-native linkThen configure App.js in your application.
I hope you enjoyed this article on How to add a splash screen to react native(ANDROID).
Clap 👏 for this article if you find it useful 😃
Feel free to comment and like this article so that others can find it easily on Medium!
Hi, My name is Ajay Singh Rajput. I am a Frontend Developer at ZestGeek. I write about JavaScript and reactjs. And sharing my worldview with everyone join my quest by following me at Twitter or Medium.
Want to learn more about JavaScript, Reactjs and Life? Check out my other articles:
And thank you for reading this article if you like it then share it, with your friends and enemies. And I will be writing more about JavaScript, react.js, stay connected with me.
