Blank white screen on Android, IOS working fine!

[mohdabbas]

Issue Description

I get a blank white screen on react-native run-android, can't even access CMD+M for dev menu. IOS working perfectly fine. If I run http://localhost:8081/index.android.bundle?platform=android&dev=false&hot=false&minify=false in browser, it says: "message": "Cannot find entry file index.android.js in any of the roots: [\"/Projects/Mobile Applications/Project\"]", even I have added @Override public String getJSMainModuleName() { return "index"; } in MainApplication.java,

(https://github.com/wix/react-native-navigation/issues/197)]

Steps to Reproduce / Code Snippets / Screenshots

App.js

import { Navigation } from 'react-native-navigation';

import { registerScreens } from './src/screens';

registerScreens(); // this is where you register all of your app's screens

// start the app
Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'One',
      screen: 'Project.SplashScreen', // this is a registered name for a screen
      title: 'Screen One'
    }
  ]
});

screens/index.js

import { Navigation } from 'react-native-navigation';

import SplashScreen from './splash/splash.screen';

// register all screens of the app (including internal ones)
export function registerScreens() {
  Navigation.registerComponent('Project.SplashScreen', () => SplashScreen);
}

MainActivity.java

package com.bricofer;

import com.reactnativenavigation.controllers.SplashActivity;

public class MainActivity extends SplashActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    protected String getMainComponentName() {
        return "Project";
    }
}

MainApplication.java

package com.project;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;
import com.reactnativenavigation.NavigationApplication;

public class MainApplication extends NavigationApplication {

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

     protected List<ReactPackage> getPackages() {
         // Add additional packages you require here
         // No need to add RnnPackage and MainReactPackage
         return Arrays.<ReactPackage>asList(
             // eg. new VectorIconsPackage()
         );
     }

     @Override
     public String getJSMainModuleName() {
     return "index";
    }

     @Override
     public List<ReactPackage> createAdditionalReactPackages() {
         return getPackages();
     }
 }

Kindly help!!!

Thanks

---

Environment

• React Native Navigation version: 1.1.375
• React Native version: 0.52.0
• Platform(s) (iOS, Android, or both?): Android

[ericketts]

Its unfortunate because Android does actually have a real bug where a white screen will erroneously be shown when restoring an app, but this issue is getting cluttered with people seeing a white screen because they were either too bone headed or too impatient to read the documentation.

[asleepace]

For me it was a glitch on my apps startup, that apparently didn't cause previous versions of react-native below 0.55.4 to crash, in this particular case it was an issue with one-signal.

[ailton-moreira]

I have the same issue, anyone find what is the problem? I couldn't...

[Kriskev]

After several hours of research, I was so desperate, I used the example of the doc and miraculously it work.

After that I made a ctrl z to find my original code, since he was able to launch the application for once. And there Booom, I had a lot of error but which was not displayed before.

So my conclusion, we have white screen because our code probably contains errors and react-native-navigation does not start the application with errors and for a reason that I do not know do not post them. So try to display something first with the example of the doc to launch the application and without closing, replace with your code. sorry for my poor English

[Kriskev]

Doc usecase. 👍

[0paIescent]

Hey all, I've been following this thread for a few days now, and I had been having the same issue as @peakyDicers, even down to being able to get the sound of the dev menu, but no ui. I'll preface with the fact that everything I've been testing is stock code directly from the guides and I was using:

react: 16.3.1
react-native: 0.55.4
react-native-navigation: 1.1.468

I ran the project in Android Studio as opposed to react-native run-android and was told through Logcat that I needed an icon for my screen. I created an assets folder and put a picture in there, added it to package.json in "rnpm": { "assets": [ "./assets" ] } }, and added icon: require('./assets/icon.png'). It still told me that I needed and icon. I tried all of the following (suggested by @ericketts):

rm /tmp/metro-cache-*
rm /tmp/haste-map-*
rm node_modules/
cd android; ./gradlew clean
watchman  watch-del /path/to/project/

and then npm install after that was done.

No dice.

I decided to try a last ditch of delete everything, reboot my computer, and start fresh. Now it works. I think that the missing icon was the main culprit here seeing as RN v0.55.4 works for me.

The steps I took were:

add to tab: icon: require("/asset_folder/icon.format")

Make sure you then add the following to your package.json:

"rnpm" : {
    "assets": [
        "/asset_folder/"
    ]
}

and run react-native link to link the assets. After doing those three things, everything was working fine for me. Hopefully this helps someone out there.

[silverfh]

double check for missing function..

@Override public String getJSMainModuleName() { return "index"; }

[KiranJasvanee]

RN 0.55 getting blank white screen in iOS and Android both!

[joseramongravity]

Okay, so as some people have said, check in your logcat in android studio, the logcat is next to the build or terminal bar in the buttom left corner, error messages appear there, follow them, good luck

[tjkang]

if anyone use react-native-vector-icons, make sure you update those fonts(Octicons.ttf and etc) in assets/fonts. i don't use react-native-navigation but i had similar problem. it works fine on iOS but on android, whenever the app is installed then sometimes it gets blank white screen after splash, but it works fine sometimes as well. it is just randomly happened once i updated them, it works fine

[Jakerevans]

If you're getting a blank white screen, (on a physical device at least, probably works for emulator too) and don't have the full Android Studio GUI installed like me (apparently music takes priority on my hard drive space), just type this in terminal to see the error message that you'd be able to more easily see in Studio:

adb logcat | grep ReactNativeJS

In my case, my error turned out to be an issue with react-native-camera (E ReactNativeJS: undefined is not an object (evaluating 'CameraManager.Aspect'))

[Geli25]

I am encountering the same problem. No errors on logcat, build or node.js. Currently testing on physical device on the new versions. If I exit the app and return to it it will crash and keep crashing unless I kill the app completely. When I downgraded to 0.52 it at least shows me a "version mismatch" red screen, but will still crash if I exit and go back to it again. It shows nothing if I match the version by upgrading react native back, no red screen even if the server is disconnected. This is driving me insane. I have built a new project as well with all my original code and without react-native-navigation, it runs fine. But once I change the code on the MainActivity and MainApplication. It is blank again.

[staklau]

Changing getJSMainModuleName in MainApplication.java from

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }

to

    @Override
    protected String getJSMainModuleName() {
      return "index.android.js";
    }

was the problem for me. No error message was shown for me either.

[kientux]

I think I'm facing the same problem with v2. But in v2 you cannot override getJSMainModuleName() directly from MainApplication.java, it's placed deeply in NavigationReactNativeHost class.

So this is the solution (edit MainApplication.java):

    @Override
    protected ReactNativeHost createReactNativeHost() {
        return new MyReactNativeHost(this);
    }

    class MyReactNativeHost extends NavigationReactNativeHost {

        public MyReactNativeHost(NavigationApplication application) {
            super(application);
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    }

[sandhyaviss]

I am using "react-native": "~0.55.2", "react-native-navigation": "^1.1.474" I had issue with blank screen.I resolved mine with adb "logcat". Use this command at the terminal at your project level

adb logcat *:S ReactNative:V ReactNativeJS:V

once you find the error then you can try to solve the problem.In my case its in the Navigation.

[Nisharunnisaa]

I am Facing the same issue, i am getting a white page instead of the page i routed. the following is my package.json:

{ "name": "jul20-BHI", "version": "0.1.0", "private": true, "devDependencies": { "react-native-scripts": "1.14.0", "jest-expo": "~27.0.0", "react-test-renderer": "16.3.1" }, "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", "scripts": { "start": "react-native-scripts start", "eject": "react-native-scripts eject", "android": "react-native-scripts android", "ios": "react-native-scripts ios", "test": "jest" }, "jest": { "preset": "jest-expo" }, "dependencies": { "expo": "^27.0.1", "react": "16.3.1", "react-native": "~0.55.2", "react-native-card-view": "0.0.3", "react-native-elements": "^0.19.1", "react-native-material-dropdown": "^0.11.1", "react-native-material-textfield": "^0.12.0", "react-native-simple-radio-button": "^2.7.2", "react-native-table-component": "^1.1.8", "react-navigation": "^2.8.0" } } can someone help me with the solution ? Thanks

[erick94isc]

@kientux Could you show me all your MainApplication.java please? Because i have the same problem with v2.

[aspisila]

I had the problem with white screen.

I was able to resolve by opening the project (./android folder) with Android Studio, and using the 'Debug App (Shift + F9)' function... and then looking at the debugging tab

In fact I had nothing wrong with my code, but what was running was still in cache.

I've also been able to see error details at http://localhost:8081/index.delta?Platform=android&dev=true&minify=false

[msureshmewara]

android/app/src/main/res/values/styles.xml add the below code:

[TurboCoder]

Possible solution

According to the documentation, the Icons used by the tabs are not required, but they're actually required for Android.

The example code provided by the documentation is:

import { Navigation } from 'react-native-navigation';

import { registerScreens } from './screens';

registerScreens(); // this is where you register all of your app's screens

// start the app
Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'One',
      screen: 'example.FirstTabScreen', // this is a registered name for a screen
      icon: require('../img/one.png'),
      selectedIcon: require('../img/one_selected.png'), // iOS only
      title: 'Screen One'
    },
    {
      label: 'Two',
      screen: 'example.SecondTabScreen',
      icon: require('../img/two.png'),
      selectedIcon: require('../img/two_selected.png'), // iOS only
      title: 'Screen Two'
    }
  ]
});

But they need to specify that these lines in particular are super important, at least for Android:

icon: require('../img/two.png'), // IMPORTANT
selectedIcon: require('../img/two_selected.png'), // IMPORTANT

Keep in mind that you must change the path used for the images, so it uses yours.

[ivan3123708]

Thank you @Jakerevans so much. After trying all these fancy solutions I executed the command and found out my app crashed because i typed "justifuContent" in one of my StyleSheets. RN would have saved me a lot of time if it rendered the error instead of that blank screen

[codeeeee01]

I already fix this problem using this:

npm remove --save react-native && npm i --save react-native@0.55.4

[goldstar0415]

When I try to do it in Remote JS Debugging Android app works well. But If I Stop Remote JS Debugging, I am getting same issue. My react-native version is 0.55.4

[icecreamsandwich]

I also run in to this issue (Blank screen after bundling the app) When running the latest react-native and react version (react= 0.57.3 && react-native=16.6.8) . I downgraded react to (0.55.4) which intact reverted react-native to 16.4 resolved the issue , I don't know why this happens , i have older app with react (0.57.2) and react-native version (16.5) working without any problem ...

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[Abdisalan]

@FlaviooLima Where did I say that it happens on both?

My issue solved after deleting the virtual device and creating a new one! I faced the issue a couple of times, each time I delete the device and recreate, it solves. Strange :-).

This was the solution for me I found. Upgrading a legacy react-native project from 0.45 to 0.51

[nugoo1]

U get a blank screen because pages havent loaded. You need to fix your app.js file and your android.app.js file should import your app.js file..

This is how I fixed it. There's nothing wro wrong with the packages, you haven't loaded the screen properly. On ios u see a splash screen thats why it seems like it only works for ios. Just keep going, add some pages and it will work.

[daxaxelrod]

What worked for me was having this be the index.js file and the core exported from a sibling file. Note that the project name must match the one in your app.json

import { AppRegistry } from 'react-native'; import App from './App'; AppRegistry.registerComponent('INSERT_PROJECT_NAME_HERE', () => App);

[losheredos]

Facing the same issue.. Its unbelieveably meaningless.. I thought its cuz of wix but then changed it to router-flux still same, then tried to downgrade the RN version.. STILL SAME

[glintpursuit]

@losheredos you can use style background property