How to design splash screen in react native for android and ios

How to design splash or app loading screen

Not that easy man!!!

Install dependency react-native-splash-screen

1. Create file - launch_screen.xml in app/main/res/layout (create layout folder)

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />

</RelativeLayout>

1. Paste your splash image at - app/src/main/res/drawable as launch_screen.png

1. Create file - colors.xml in app/src/main/res/values

<?xml version="1.0" encoding="utf-8"?>

<resources>

<color name="primary_dark">#000000</color>

</resources>

Now after these you just have to restart the server by npc react-native start ‘or’ npx react-native run-android

The linking and all will be done automatically you don’t have to worry about that

Just need to make a change that the SplashScreen shows and hides and for that you have to

1. In app/src/main/java/MainActivity file
   import android.os.Bundle;
   import org.devio.rn.splashscreen.SplashScreen;
   
   and then in the code after line
   //
   class MainActivity : ReactActivity() {
   //…..
   add this ->. override fun onCreate(savedInstanceState: Bundle?) {
   SplashScreen.show(this)// here
   super.onCreate(savedInstanceState)
   }
   
   NOTE: this is a kotlin file code you have to change it to java if your file is in java
   
   

1. And then you have to make SplashScreen.hide call in useEffect of App.js File

For IOS

In iOS create your splash screen using Xcode draw , to add image first add the logo or image you want to add on splash screen to the folder Image.xcassets > createfolder.imageasset (in this folder in contents.json describe your asset name , idiom as universal , and scale

Now when you select the image in the Xcode draw you can select the image from the shown assets and your desired logo or image will be visible after previous process If not then once open the projects .xcworkspace file in Xcode and then open draw file in that and try to find solution

After the creating launch screen on Xcode draw restart the application using npx react-native start or npx react-native run-ios