React Native Android Splash Screen Always On

Question

first time setting up a React Native Splash Screen and I am having a small bug that I cannot solve.

I followed this article and I have followed it exactly (except IOS part for now) https://medium.com/@appstud/add-a-splash-screen-to-a-react-native-app-810492e773f9

I have searched for similar issue on google etc and I have not found anyone that has anything that resembles my issue.

Here comes my addad/modified files from the article:

Installed npm package npm install react-native-splash-screen --save.

android/app/src/main/res/drawable/background_splash.xml:

 <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:drawable="@color/splashscreen_bg"/>
        <item
            android:width="300dp"
            android:height="300dp"
            android:drawable="@mipmap/splash_icon"
            android:gravity="center" />
    </layer-list>

AndroidManifest.xml:

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

    <!-- Add this SplashActivity -->
    <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 intent-filter of the MainActivity and add a param android:exported="true" -->
    <activity
      android:name=".MainActivity"
      android:label="@string/app_name"
      android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
      android:windowSoftInputMode="adjustResize"
      android:exported="true"/>

  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

android/app/src/main/java/[your_package_name]/SplashActivity.java:

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();
    }
}

android/app/src/main/java/[your_package_name]/MainActivity.java:

import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;
import android.os.Bundle;

public class MainActivity extends ReactActivity {

   @Override
       protected void onCreate(Bundle savedInstanceState) {
           SplashScreen.show(this);
           super.onCreate(savedInstanceState);
       }

  @Override
  protected String getMainComponentName() {
    return "nameOfPackage";
  }
}

I have left out all the android styles files (don't think they are relevant etc). I am also not experienced at all in Android development or Java (I can read it though), which is why I'm asking this question.

If I remove

@Override
       protected void onCreate(Bundle savedInstanceState) {
           SplashScreen.show(this);
           super.onCreate(savedInstanceState);
       }

in MainActivity, then the splash screens goes away when content is ready to be shown, however, then the background of the splash screen lingers for a second or two. I was told then to add this code above so that i seamlessly moves on to the content, but this is where the splash screen stays stuck, with the code above being added. I tried doing SplashScreen.hide(this) after onCreate, but nothing helped (again, don't know android development or java).

I appreciate your time!

Answer 1

You are going to use the SplashScreen.hide() in javascript side. When you are ready to hide the splash screen, you need to run SplashScreen.hide() in your component. You also need to import SplashScreen

import SplashScreen from 'react-native-splash-screen';