React Native app crashes after splash screen

user_15136177 0
Viewed 331

I am working on react native app and installed react-native-bootsplash package for splash screen. I am getting the following error. I follow the instructions posted here to setup for android but not working.

https://github.com/zoontek/react-native-bootsplash

error

at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2066)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loop(Looper.java:223)
        at android.app.ActivityThread.main(ActivityThread.java:7656)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)
     Caused by: android.view.InflateException: Binary XML file line #28 in com.myreactapp:layout/splash_screen_view: Failed to resolve attribute at index 0: TypedValue{t=0x2/d=0x7f030208 a=-1}
     Caused by: java.lang.UnsupportedOperationException: Failed to resolve attribute at index 0: TypedValue{t=0x2/d=0x7f030208 a=-1}
        at android.content.res.TypedArray.getLayoutDimension(TypedArray.java:826)
        at android.view.ViewGroup$LayoutParams.setBaseAttributes(ViewGroup.java:8231)
        at android.view.ViewGroup$MarginLayoutParams.<init>(ViewGroup.java:8429)
        at android.widget.FrameLayout$LayoutParams.<init>(FrameLayout.java:452)

This is styles.xml file

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:editTextStyle">@style/ResetEditText</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
  </style>
  <style name="ResetEditText" parent="@android:style/Widget.EditText">
    <item name="android:padding">0dp</item>
    <item name="android:textColorHint">#c8c8c8</item>
    <item name="android:textColor">@android:color/black</item>
  </style>
  <style name="Theme.App.SplashScreen" parent="AppTheme">
    <item name="android:windowBackground">@drawable/splashscreen</item>
  </style>
  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>
</resources>

This is MainActivity.Java file

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.zoontek.rnbootsplash.RNBootSplash; // for splash screen

import expo.modules.ReactActivityDelegateWrapper;

public class MainActivity extends ReactActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    // Set the theme to AppTheme BEFORE onCreate to support 
    // coloring the background, status bar, and navigation bar.
    // This is required for expo-splash-screen.
    setTheme(R.style.AppTheme);
    RNBootSplash.init(this);
    super.onCreate(null);
  }

colors.xml file

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<resources>
  <color name="splashscreen_background">#FFFFFF</color>
  <color name="bootsplash_background">#FFFFFF</color>
</resources>

Updated:

The issue with expo-splash-screen module which conflict with react native bootsplash. I have removed it's references from code and work well with android.

Styles.xml remove

<style name="Theme.App.SplashScreen" parent="AppTheme">
        <item name="android:windowBackground">@drawable/splashscreen</item>
      </style>

MainActivity.Java remove

setTheme(R.style.AppTheme);

AndroidManifest.xml remove

android:theme="@style/Theme.App.SplashScreen"
react-native reactjs
1 Answers

I have faced similar issues with this package , it works well with ios but not with android.

So i decided to use another package called react-native-splash-screen for it.and managed them both on my app.js.

react-native-splash-screen (Android)

App.js

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

useEffect(() => {
   setTimeout(() => {
      if (Platform.OS == 'ios') {
        RNBootSplash.hide();
      } else {
        SplashScreen.hide();
      }
    }, 1000);

 }, []);

MainActivity.java

 import org.devio.rn.splashscreen.SplashScreen;

 @Override
   protected String getMainComponentName() {
     return "name";
   }
 
 // Screen
 @Override
  protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this);
    super.onCreate(null);
  }

react-native-bootsplash (Ios)

App.js

import RNBootSplash from 'react-native-bootsplash';

useEffect(() => {
   setTimeout(() => {
      if (Platform.OS == 'ios') {
        RNBootSplash.hide();
      } else {
        SplashScreen.hide();
      }
    }, 1000);

 }, []);

AppDelegate.m

#import "RNBootSplash.h"

self.window = [[UIWindow alloc] initWithFrame:[UIScreen 
    mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];

[RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];

I hope this will help you too.

user_84572550
Related