React Native Splash Screen: Unfortunately <APP> has stopped after SplashScreen.show()

Question

I'm building a React Native App and I'm using React Native Splash Screen for my splash screen.

Let me give you my code first, then I'll explain the issue.

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/blue" />
    <item
        android:width="200dp"
        android:height="200dp"
        android:drawable="@mipmap/icon_splash"
        android:gravity="center" />
</layer-list>

SplashActivity.java:

package com.painbutton;

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

MainActivity.java:

package com.painbutton;

import com.facebook.react.ReactActivity;
import android.content.Intent;
import android.content.res.Configuration;
import android.os.Bundle;

import org.devio.rn.splashscreen.SplashScreen;

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
    protected String getMainComponentName() {
        return "painbutton";
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        Intent intent = new Intent("onConfigurationChanged");
        intent.putExtra("newConfig", newConfig);
        this.sendBroadcast(intent);
    }

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

AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.painbutton">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      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"
        android:windowSoftInputMode="adjustResize"
          android:exported="true">
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

My image is inside res/ and then I have one icon.png for each pixel density.

When I know run the app, it crashes saying 'unfortunately, painbutton has stopped'.

Here is the error log:

10-11 12:51:10.441 537-537/com.painbutton E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.painbutton, PID: 537
    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.painbutton/com.painbutton.MainActivity}: android.content.res.Resources$NotFoundException: Resource ID #0x7f09001d type #0x1 is not valid
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2416)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476)
        at android.app.ActivityThread.-wrap11(ActivityThread.java)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344)
        at android.os.Handler.dispatchMessage(Handler.java:102)
        at android.os.Looper.loop(Looper.java:148)
        at android.app.ActivityThread.main(ActivityThread.java:5417)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
     Caused by: android.content.res.Resources$NotFoundException: Resource ID #0x7f09001d type #0x1 is not valid
        at android.content.res.Resources.loadXmlResourceParser(Resources.java:2779)
        at android.content.res.Resources.getLayout(Resources.java:1165)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:421)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:374)
        at com.android.internal.policy.PhoneWindow.setContentView(PhoneWindow.java:393)
        at android.app.Dialog.setContentView(Dialog.java:512)
        at org.devio.rn.splashscreen.SplashScreen$1.run(SplashScreen.java:32)
        at android.app.Activity.runOnUiThread(Activity.java:5511)
        at org.devio.rn.splashscreen.SplashScreen.show(SplashScreen.java:27)
        at org.devio.rn.splashscreen.SplashScreen.show(SplashScreen.java:49)
        at org.devio.rn.splashscreen.SplashScreen.show(SplashScreen.java:56)
        at com.painbutton.MainActivity.onCreate(MainActivity.java:30)
        at android.app.Activity.performCreate(Activity.java:6237)
        at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1107)
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2369)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476) 
        at android.app.ActivityThread.-wrap11(ActivityThread.java) 
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344) 
        at android.os.Handler.dispatchMessage(Handler.java:102) 
        at android.os.Looper.loop(Looper.java:148) 
        at android.app.ActivityThread.main(ActivityThread.java:5417) 
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) 
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616) 

What is going on? Why is my app crashing?

Answer 1

I was able to finally resolve this. Make sure you do the following things.

1. Create a file called res/layouts/launch_screen.xml. This is something you will also be able to see and edit via a UI. Click here to see how that UI looks.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical"
>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="center"
        android:src="@drawable/splash" />
</LinearLayout>

2. Add the following snippet to values/styles.xml. This will allow you to call this Splash theme at startup from your Manifest file.

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowBackground">@layout/launch_screen</item>
</style>

3. Make sure your AndroidManifest.xml has something like this:

.
.
<activity
    android:name=".MainActivity"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:label="@string/app_name"
    android:screenOrientation="portrait"
    android:theme="@style/SplashTheme" <------ NOTE THIS
.
.

4. Finally, remember to add SplashScreen.show(this); in your MainActivity.java as mentioned in the docs of the package.

This whole exercise will make sure that the Splash Screen is visible during both the app startup and during when React Native bundle loads. Good luck! 🙂

Answer 2

My first answer got deleted. I appended information so that this hopefully does not get deleted, because I fixed it. I followed this tutorial. Make sure to watch till the end. If you skip the last 2 minutes you will still get the same problem I described in this question.

For me the fix was to create a file in res/layouts/launch_screen.xml:

<?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="@color/blue"
    android:gravity="center">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24dp"
        android:src="@drawable/launch_screen"/>

</LinearLayout>

And add <color name="primary_dark">#329baf</color> to my res/values/colors.xml file.