Show splash screen before show main screen in react native without using 3rd party library

Question

I am beginner in react native so may be my question seems silly to all experts.

but I am struggling with a basic feature that i want to implement that i want to start my

Answer 1

You can always do it the native way:

Fisrt you need images for displaying your splashscreen on different devices:

• LDPI:
  • Portrait: 200x320px
  • Landscape: 320x200px
• MDPI:
  • Portrait: 320x480px
  • Landscape: 480x320px
• HDPI:
  • Portrait: 480x800px
  • Landscape: 800x480px
• XHDPI:
  • Portrait: 720px1280px
  • Landscape: 1280x720px
• XXHDPI:
  • Portrait: 960px1600px
  • Landscape: 1600x960px
• XXXHDPI:
  • Portrait: 1280px1920px
  • Landscape: 1920x1280px

They need to be png format, then put them on android/app/src/main/res/drawable and create a folder named with the resolution of each image. Ex: drawable/drawable-hdpi.

Then in the drawable folder you have to create a file named background_splash.xml and put something like this:

After that you have to add a new style in android/app/res/values/styles.xml

Update your AndroidManifest.xml file adding a new activity called SplashActivity and add android:theme="@style/SplashTheme". Now create a empty activity with the name MainActibity. Your AndroidManifest.xml should look something like this:

Now we need to tell SplashActivity to go to the MainActivity, which represents our actual application. To do that you need to create a new Java class named SplashActivity.

package com.exampleapp; // change to the name of your app.

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.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();
    }
}

And now you should see a splashscreen.

https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae