Creating a Splash screen in react native

Question

I'm working on a React-Native project in which I've to create a Splash Screen, but when I researched it on the internet and I found a bit complex configuration with a project created with react-native-cli than the expo-cli. Can I make a Splash Screen first with the expo and then use it in the react-native-cli project? If yes then show me some examples of how to do it.

Answer 1

If you have a project created with expo you can add splashcreen with expo and eject it to use react-native-cli and it will still work fine so long you dont touch any of the configuration of expo after ejecting, since you said some guides were complex to add splashcreen i will give you a guide on how to add splashcreen on your react-native-cli project in a very easy way.

Adding Splashcreen to react-native app (Android) Guide

1. Install this library react-native-splashcreen yarn add react-native-splash-screen dont link if your project uses auto linking except you are using a version lower than 0.60 then run react-native link react-native-splash-screen or rnpm link react-native-splash-screen

   I will assume you are using version of react-native >= 0.60

2. Add the below code to MainActivity.java in your android folder

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // here
    public class MainActivity extends ReactActivity {
       @Override
        protected void onCreate(Bundle savedInstanceState) {
            SplashScreen.show(this);  // here
            super.onCreate(savedInstanceState);
        }
        // ...other code
     }

3. Create a file called launch_screen.xml in app/src/main/res/layout (create the layout-folder if it doesn't exist). The contents of the file should be the following:

<?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>

4. Generate your splashcreen from This site and copy drawables folders on android and paste them on android/app/src/main/res/ folder

5. if you use the site in step 4 replace code in step 3 with this one

6. if might not have use step 4 and 5. To make things easier you can use react-native-make to generate your assets and set them automatically after configuring react-native-splashcreen check out react-native-make you will see commands to set splashcreen and icons for IOS and Android easily