An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
How to add Splash Screen in a React Native Android App?
Hi there!
The reason why you're here for this is probably because you couldn't find the correct, updated and easiest solution to this till now!
But now, worry no more! You 've arrived at the right place. I will lay out all the steps over here, which I did to implement it within minutes! Let's get this thing started!
Step #1
Go to app/src/main/java/[packageName] and create a new file SplashActivity.java
and copy-paste the following code inside it.
package com.packagename; // Replace this with your package nameimport 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(); }}
Step #2
Go to app/src/main/AndroidManifest.xml and modify it as follows to use SplashActivity:
Add the following activity inside the tag.
<activity android:name=".SplashActivity" android:theme="@style/SplashTheme" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter></activity>
Remove the following intent from the MainActivity
tag.
<intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /></intent-filter>
And add android:exported="true"
inside that activity.
Now, your AndroidManifest.xml should be looking like this:
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.packagename"> <uses-permission android:name="android.permission.INTERNET" /> <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher" android:allowBackup="false" android:theme="@style/AppTheme"> <activity android:name=".SplashActivity" android:theme="@style/SplashTheme" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <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" > </activity> <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> </application></manifest>
Step #3
Now, we will declare a SplashTheme
for SplashActivity
. Go to app/src/main/res/values/styles.xml and add the following style inside <resources>
.
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:background">@drawable/background_splash</item> <item name="android:statusBarColor">@color/background</item></style>
Step #4
Go to android\app\src\main\res\values and create a file colors.xml
if not present already.
We used a background color constant above, so we must add it to our colors.xml file.
<?xml version="1.0" encoding="utf-8"?><resources> <color name="background">#fff</color> // Insert your background color for the splash screen</resources>
Step #5
Go to app/src/main/res/drawable and place your splash screen (.png) here and also create a file background_splash.xml
with the following code:
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/background" /> <item android:drawable="@drawable/splash_screen" android:height="300dp" android:width="300dp" android:gravity="center" /></layer-list>
If the size of your splash screen is equal to the size of device screen, then remove android:height
and android:width
from the above mentioned <item>
tag.
Step #6
Install react-native-splash-screen
module in your project and then import SplashScreen
from it in your App.js
file.
import SplashScreen from 'react-native-splash-screen';
We need to display the splash screen only till the first component is mounted, and to do that make a useEffect
hook inside your App component body as follows:
Don't forget to import
useEffect
from'react'
.
useEffect(() => { SplashScreen.hide(); }, []);
Step #7
Go to app/src/main/java/[packageName]/MainActivity.java and import the the following.
import org.devio.rn.splashscreen.SplashScreen;import android.os.Bundle;
Add this method to the top of MainActivity
class.
@Override protected void onCreate(Bundle savedInstanceState) { SplashScreen.show(this, R.style.SplashStatusBarTheme); super.onCreate(savedInstanceState); }
Step #8
Go to android/app/src/main/res/values/styles.xml to add SplashStatusBarTheme
just like we did in Step #3.
<style name="SplashStatusBarTheme" parent="SplashScreen_SplashTheme"> <item name="android:statusBarColor">@color/background</item></style>
If you don't do this, then StatusBar will change color to black when the JS code of app will load.
Step #9
Go to android/app/src/main/res/ and create a new folder layout
if it doesn't already exist. Inside that folder, create a file launch_screen.xml
(this file is needed by react-native-splash-screen library). Inside that file, create a layout using the previously created background as follows:
<?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="@drawable/background_splash" />
Step #10
Go to android/app/src/main/res/values/colors.xml and add the following tag just like we did in step #4, otherwise the app will crash. Don't change the color value.
<color name="primary_dark">#000</color>
And that's it! We did it! Your splash screen has been added to your app! Go and check it now! Thank me later!
Hope you learned something new from this!
PS: If you have any confusion or encounter any error while following the above mentioned steps, then feel free to comment below, I will be happy to help you resolve it.
Have a nice day!
Original Link: https://dev.to/cmcodes/how-to-add-splash-screen-in-a-react-native-android-app-287l
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To