React Native Splash Screen in 10 Steps (Android)

Photo by Amadej Tauses on Unsplash
Watch video tutorial

Follow the given steps

npm i react-native-splash-screenreact-native link react-native-splash-screen
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@mipmap/splash"
android:gravity="fill" />
</layer-list>
<?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"
/>
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@drawable/background_splash</item>
</style>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.splashexample">
<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_round"
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">
- <intent-filter>
- <action android:name="android.intent.action.MAIN" />
- <category android:name="android.intent.category.LAUNCHER" />
- </intent-filter>
</activity>
</application>
</manifest>
package com.splashexample; //change 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();
}
}
package com.splashexample; // change package nameimport com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // add this
import android.os.Bundle; // add this
public class MainActivity extends ReactActivity { /**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override // add this
protected void onCreate(Bundle savedInstanceState) { // add this
SplashScreen.show(this); // add this
super.onCreate(savedInstanceState); // add this
} // add this
@Override
protected String getMainComponentName() {
return "splashexample";
}
}
useEffect(() => {
SplashScreen.hide();
}, [])

Believes in giving back to the community. Helping Startups to fulfill their technical needs. | Portfolio: www.thebrandwick.com