In this post I will be discussing on how you can integrate Splash Screen to your react native app.
Off late I have been working on my first react native app about budgeting which uses firebase as its backend. I decided to integrate Splash Screen to my app but I got ton of errors but after lot of googling and scavenging through stack overflow I finally got it.
My app is the mobile version of this website Neo Budget and I have made it production ready which you can view below.
Now lets learn the steps to integrate splash screen to our app.
(This post covers splash screen for android only as I do not have mac or an iPhone to do iOS development)
Step 1:
Hop on to your code editor and go to the android folder as we will be doing all of the things there.
Now go to the java folder as below and create a new file named SplashActivity.java. (Remember all the file names discussed in this post must be used as the same in your project or errors will pop up.)
Paste the code below in SplashActivity.java
package com.notifier; // make sure this is your package name
import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
finish();
}
}
Now our work here is done. On to the Next Step.
Step 2:
Now go to AndroidManifest.xml and modify your code such that it includes the code specific to splash screen.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.notifier">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
<action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
</intent-filter>
</activity>
<!-- Code for Splash screen starts here -->
<activity
android:name=".SplashActivity"
android:theme="@style/SplashTheme"
android:label="@string/app_name">
</activity>
<!-- Code for Splash screen endshere -->
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
You have to note down the android:exported="true"
in the second activity field and include it in your code as it will not be present at first.
After doing this lets create some files in res folder.
Step 3:
Now hop on to res folder which is in Main-->res
Here we are going to create two new folders and add some files in it.
Ok lets create two folders called layout and drawable(Names must be same).
In drawable folder create a file called background_splash.xml and add the below code.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@color/blue"/>
<item
android:width="200dp"
android:height="200dp"
android:drawable="@mipmap/ic_launcher"
android:gravity="center" />
</layer-list>
Now in layout folder create a file called and paste the code below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue"
android:gravity="center">
</LinearLayout>
Ok after doing all these steps, Lets hop on to the next one.
Step 4:
In the same res folder create a folder called values and make three files.
1.colors.xml
2.strings.xml
3.styles.xml
Now we are going to give the color of our splash screen's background in colors.xml.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="blue">#ffffff</color>
</resources>
Now in strings.xml we are going to give the name of our app.
<resources>
<string name="app_name">notifier</string>
</resources>
And in styles.xml we will be using both of the above concepts we had discussed.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000000</item>
</style>
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@drawable/background_splash</item>
<item name="android:statusBarColor">@color/blue</item>
</style>
</resources>
Step:5
Now the last step is to actually include the splash screen in our react-native app.
We need to install react-native-splash-screen with npm in our root folder and then include some code in our App.js.
npm install react-native-splash-screen
Now in App.js, we will be using this package to help us close our Splash Screen when the app loads for the first time. If we do not include this line in our code, our app will be stuck in the splash screen.
So in App.js we will be using useEffect to achieve this one.
import React,{useEffect} from 'react';
import {View,Text} from 'react-native'
import SplashScreen from 'react-native-splash-screen';
const App = () =>{
useEffect(() => {
SplashScreen.hide();
}, []);
return(
<View>
<Text>Neo Budget
</Text>
</View>
)
}
export default App;
Congratulations you have now included splash screen into your app with your logo as well!!
This post was done at ease using this medium article about Splash Screens. It discusses about iOS development as well.
I made this post now because, I encountered some bugs and errors from that article as it was published 2 years ago.
The content from this post works absolutely fine like below.
I made my full stack mobile app about budget using the above mentioned and will be releasing it on or before new year of 2021 and I was working on it for the past 2 weeks.
I will be grateful if you guys use it and share your feedback here in dev or in google playstore reviews as well.
Next Post I will discuss about having stack navigator with Bottom Tab Navigator like my app.
Thank you for reading!!
Check out my portfolio: Gautham's portfolio
Check out my blog: coding-magnified.tech
Check React Project about budgeting: neo-budget
Top comments (0)