React-native: Android white screen on launch

[danieljvdm]

When I lead my Android (7.0) RN app (0.38.0) I get a white screen (on various simulators + real devices). The logcat error is posted here: http://pastebin.com/96ww1f8S.

I've tried cleaning my gradle and deleting and reinstalling my node modules.

One thing to note is that I am using React Native Navigation which means I had to modify MainApplication and MainActivity to the following:

MainActivity:

package com.prayerrequest;

import com.facebook.react.ReactActivity;
import com.reactnativenavigation.NavigationApplication;
import com.airbnb.android.react.maps.MapsPackage;
import com.cmcewen.blurview.BlurViewPackage;
import io.realm.react.RealmReactPackage;
import com.reactnativenavigation.controllers.SplashActivity;


public class MainActivity extends SplashActivity {

}

MainApplication:

package com.prayerrequest;

import com.facebook.react.ReactPackage;

import com.cmcewen.blurview.BlurViewPackage;
import io.realm.react.RealmReactPackage;
import com.airbnb.android.react.maps.MapsPackage;

import com.reactnativenavigation.NavigationApplication;

import java.util.Arrays;
import java.util.List;

  public class MainApplication extends NavigationApplication {
    @Override
     public boolean isDebug() {
         // Make sure you are using BuildConfig from your own application
         return BuildConfig.DEBUG;
     }

     @Override
     public List<ReactPackage> createAdditionalReactPackages() {
        return Arrays.<ReactPackage>asList(
          new RealmReactPackage(),
          new BlurViewPackage(),
          new MapsPackage()
        );
     }
  }

I've crossposted on SO here

[ggordan]

Is there an error in your Javascript code? To me that seems like the more likely problem. If there was an issue in the native layer I'd assume the app would just crash. Is it also a white screen on iOS devices?

[danieljvdm]

iOS functions perfectly. Nothing gets logged in the development server for Android.

[rmevans9]

It looks like it is having difficulty finding your package:

02-15 09:53:11.092  2248  2248 E PermissionPresenter: Error getting package:com.prayerrequest
02-15 09:53:11.092  2248  2248 E PermissionPresenter: android.content.pm.PackageManager$NameNotFoundException: com.prayerrequest

What does you AndroidManifest.xml look like? It looks you are not using the standard React-Native base classes - have you ruled out it being an issue because of the different base classes you are using there?

[danieljvdm]

Here's my manifest. I don't think I've changed it. The problem very well could be with the changed base classes, but everything seems to be in accordance with the package's example here.

One weird thing to note is that for a day the app was actually building and working (and showing the main screen), and then without me changing anything it started doing this. I've also tried replacing my index.android.js with the stock React template (pasted below).

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.prayerrequest"
    android:versionCode="1"
    android:versionName="1.0">

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

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

---

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native'

export default class RandomProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})

AppRegistry.registerComponent('RandomProject', () => RandomProject)

[hramos]

Do you see this in the most recent RN release?

[su8hash]

Are you using physical device here ,You Need to be in same network and device should be able to connect to server (Android Steps Below)
1). If Using USB Debugging then run 'adb reverse tcp:8081 tcp:8081' from your "C:\Users\AppData\Local\Android\sdk\platform-tools"
this will forward mobile's call for localhost:8081 to PC's localhost:8081, here 8081 is port your server is running

2). If over Wifi on same network shake phone to open developer menu and go to 'Dev Setting' and enter Debug Server Host and Port as :8081 here

I think this should help it does takes a few seconds sometime for app to load

[SudoPlz]

I get the same behaviour in 0.46.3.

I know the app is connecting to packager (I've already done the adb reverse part and have set the server IP and port via the Dev Settings).

I could see my content just find on 0.44.* Any ideas?

[shubham-aneja]

I have just ran react-native init, react-native run-android and react-native start and getting the same issue.

[SudoPlz]

On which version of rn @shubham-aneja? @hramos any ideas?

[shubham-aneja]

@SudoPlz The latest one, i.e. 0.46.4

[shubham-aneja]

When running

http://localhost:8088/index.android.bundle?platform=android%22%20-o%20%22android/app/src/main/assets/index.android.bundle
this in browser, getting
{"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for more details"}

[pull-bot]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[ofirdagan]

The same happened for me. The problem was an error was thrown inside the Navigation.startTabBasedApp or Navigation.startSingleScrrenApp and it was swollen so I didn't know it ever happened.
I fixed it in this PR:

https://github.com/wix/react-native-navigation/pull/2556

[rintran720]

I have same issue with
"react": "16.2",
"react-native": "0.52.0",
"react-native-fbsdk": "^0.7.0",
"react-native-navigation": "1.1.431",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"seamless-immutable": "^7.1.2"
Please show me solution to fix that.
when a run app a feel maybe have a process is running make app can not render view
MainActivity.java
`package com.tudigongpartner;

import com.reactnativenavigation.controllers.SplashActivity;

public class MainActivity extends SplashActivity {
}
`

and MainApplication.java
`package com.tudigongpartner;

import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.reactnativenavigation.NavigationApplication;
import com.reactnativenavigation.bridge.NavigationReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends NavigationApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
        new NavigationReactPackage()
  );
}

};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}

@Override
public boolean isDebug(){
return BuildConfig.DEBUG;
}

@Override
public List createAdditionalReactPackages(){
return null;
}
}
`