How to create Splash Screen on React-Native Android Application
Hello everyone,
We will talk about “How to create Splash Screen on React-Native Android Application” in this post.
Firstly, what’s splash screen?
This screen is using for during start to application. When your application open, you are seeing firstly this screen. It’s generally application logo, application name, etc…
Example Project Dependencies:
- React: 16.9.0
- React-Native: 0.61.3
Before start development, we need an images for this screen. I’m using this website for re-size. You can use this or alternative websites. We are doing re-size because of devices resolutions.
Images should be in root/android/app/src/main/res folder and folders name should be like a Screenshot 1. (Drawable-xxx). If you use this site for re-size, it will create this folders for you. Now, items are ready for development. We will use Android studio on this step. When I check splash screen images with Android Studio, They looks as follows.
Now, we are create a new drawable resources file in drawable folder. Right click to drawable folder and New > Drawable File Resource Example file name is splash.xml. You can check screenshot 3 for example file.
Let’s start to write splash.xml. We are creating a new item in drawable resources. The screenshot is as follows.
We created bitmap in item tag and defined path and gravity for this bitmap. It’s meaning; images in drawable/screen folder and fill the page with this image.
After created splash.xml, we need to update styles.xml. This file in root/app/res/values folder. The screenshot as follows.
Now, we add new style tag in styles.xml file and we define name and parent property. After this, we add item tag in style tag. The screenshot is as follows.
We continue to develope on AndroidManifest.xml. Firstly, we will do some update in Activity tag. We are changing .MainActivity via .SplashActivity and adding android:theme=”@style/SplashTheme” property in this activity tag.
Let’s do last change for AndroidManifest.xml document. Now, we add new activity tag after current activity tag. The screenshot for all of this updates are as follows.
We came to final step. We will create SplashActivity.java file. Right Click to com.splashexample (This may be different due to your project name) and New -> Java Class
We created new intent for pass to MainActivity and started this intent with startActivity() When we open application, firstly SplashActivity will open and we will see splash image on screen. After this, application will continue with MainActivity.
Now, we finished splash screen. Let’s try it.
I shared example project on Github. You can download as follows link.
Example Project:
https://github.com/cinarrtolga/react-native-splash-screen-example
Best regards.
