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

[mohdabbas]

Even, If I change the files to index.ios.js and index.android.js, same problem in Android. I am getting blank screen. But the URL http://localhost:8081/index.android.bundle?platform=android&dev=false&hot=false&minify=false show the data

var __DEV__=false,__BUNDLE_START_TIME__=this.nativePerformanceNow?nativePerformanceNow():Date.now(),process=this.process||{};process.env=process.env||{};process.env.NODE_ENV='production';
(function (global) {
  'use strict';

  function _toConsumableArray(arr) {
    if (Array.isArray(arr)) {
      for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
        arr2[i] = arr[i];
      }

      return arr2;
    } else {
      return Array.from(arr);
    }
  }
...... and so on

[andfs]

I`m facing this issue too

[andfs]

In my project the problem was with react-native-vector-icons. The RN releases greater then 0.51 is hiding the real problem. I`ve downgraded the RN version and used this guides:

https://github.com/facebook/react-native/pull/17672/files https://github.com/oblador/react-native-vector-icons/issues/626#issuecomment-357493287

Then I`ve upgraded the RN version to 0.53 and almost everything is working fine. Now the problem is with the drawer

[FlaviooLima]

I'm having the same problem. @mohdabbas, in the beginning, you are saying that this happens on Android only, and in the end, you are saying that it happens on both. Could you edit? it can create some confusion. :)

I get a blank white screen on react-native run-android, can't even access CMD+M for dev menu. IOS working perfectly fine.

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

[ibmouhssine]

In my project the problem was with the icons when i comment this line

icon: require('./img/one.png'),

the project works fine on IOS but I get a blank white screen on android

You have to add icon so the tabulation can works on android

[arapocket]

@ibmouhssine I have this same issue, where exactly do I add icon: require('./img/one.png'), ?

[mohdabbas]

@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 :-).

[FlaviooLima]

@mohdabbas If I delete the app it solves my issue too. Can you try to uninstall and see if it solves for you to? And if I have debugjs mode off it happen's a lot more this white screen. In the bottom of your comment Where you say the environment :)

Platform(s) (iOS, Android, or both?): both

It should be

Platform(s) (iOS, Android, or both?): Android

@arapocket I believe that @ibmouhssine was trying to say the icon in here:

this.props.navigator.setTabButton({
  tabIndex: 0, // (optional) if missing, the icon will be added to this screen's tab
  icon: require('../img/one.png'), // local image asset for the tab icon unselected state (optional)
  selectedIcon: require('../img/one_selected.png'), // local image asset for the tab icon selected state (optional, iOS only)
  label: 'New Label' // tab label that appears under the icon (optional)
});

But in my case my app doens't have tabs, maybe i'm missing something? i am new to this library.

[varqasim]

Getting same exact issue. iOS works fine, it's just Android. For me the app builds fine showing 100%, can't access the dev tools and the console is just empty.

"react-native": "0.53.0",
"react-native-navigation": "^1.1.408",

I had some icons on my tab bar, but even removing them doesn't fix the issue.

Edit: Actually the debugger can't connect to the emulator WebSocket connection to 'ws://localhost:8081/debugger-proxy?role=debugger&name=Chrome' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

[andfs]

You must have the icons in android tab bar. I followed the links that I mentioned above and loaded the icons as follow:

Icon.getImageSource('ios-pricetag-outline', 30).then((promocoes) => { 
                    promocoesIcon = promocoes;
Navigation.startTabBasedApp({
                        tabs: [{
                                label: 'Agora',
                                screen: 'agora',
                                title: 'Agora',
                                icon: promocoesIcon,
                                navigatorButtons
                            }

[Noitidart]

@andfs are you sure your problem was not related to - https://github.com/wix/react-native-navigation/issues/2180

[andfs]

@Noitidart I think not because now everything works fine

[Pastromhaug]

Same issue on Android with RN 0.54.0. The first time I open my app in the emulator it works fine, but upon subsequent restarts I get a white screen. If I uninstall the app in the emulator, then it works the first time I start the app but I just get white screens the next time.

[hugheba]

I am still unable to resolve this on Android, works fine in iOS

"native-base": "^2.3.9", "react": "^16.3.0-alpha.1", "react-native": "0.54.2", "react-native-vector-icons": "^4.5.0",

I have a tabConfig.js

import { default as MaterialIcons } from 'react-native-vector-icons/MaterialIcons';
async function prepareIcons() {
    const icons = await Promise.all([
        MaterialIcons.getImageSource('some-icon', 30),
        MaterialIcons.getImageSource('another-icon', 30)
    ]);
    const [someIcon, anotherIcon] = icons;
    return { someIcon, anotherIcon };
}

export async function getTabApp() {
    const icons = await prepareIcons();
    return {
        drawer: {
            left: {
                screen: 'drawer.Main'
            }
        },
        tabs: [
            {
                label: 'Tab1',
                screen: 'tab.SomeTab', // this is a registered name for a screen
                icon: icons.someIcon,
                // selectedIcon: icons.someIcon, // iOS only
                title: 'Tab 1'
            },
            ...
        ]
    }
}

And in index.js

import { getTabApp } from 'tabConfig';
async function startApp() {
    Navigation.startTabBasedApp(await getTabApp());
}
startApp();

[fivechjr]

I am facing this issue too. It works fine on iOS, but I get blank screen on Android. "react-native": "0.54.2" "react-native-navigation": "^1.1.415" "native-base": "^2.3.10"

[V3RT1AG0]

In my case the issue was that I was using a variable that I didn't import in my Screens.js file but it didn't throw that error. It simply showed me white screen. Make sure there are no such error in your file else it will show white screen instead of throwing it.

[fivechjr]

I just downgraded React Native to 0.49 and it works normally on both iOS and Android. It seems that there might be something broken in React Native 0.5+ ?

[chrmod]

Was facing the same issue while using Navigation.startTabBasedApp so decided to try Navigation.startSingleScreenApp. It worked without a problem.

My current hypothesis is missing tab icons are to blame. I have not specified any, so maybe they fallback to some defaults. (Project I work with does not use new VectorIconsPackage()).

If this would help someone I can share the code of the project that reproduce the issue.

[FlaviooLima]

From what I understand, this issue happens when an error is thrown, and because react-native activity is not initialized it breaks and don't show the error. I believe that most of this issues can be resolved if you find the code that is causing the error in your project and not in wix itself. But there are people here that may have found a true bug in this library. So just before starting to write here. Try to guarantee that the bug is not in your code. :)

[hugheba]

@FlaviooLima Even this one file app white-screens on Android, runs fine on iOS. I can't get much simpler than this.

index.js

import React from "react";
import { Text } from "react-native";
import { Navigation } from 'react-native-navigation';

class Simple extends React.Component {
    render() {
        return (<Text>Hello, I'm Simple.</Text>);
    }
}

Navigation.registerComponent('simple', () => Simple);
Navigation.startSingleScreenApp({
    screen: {
        screen: 'simple'
    }
});

No other code included, and I'm pretty sure all this is correct.

[FlaviooLima]

@hugheba Like a said, there are real bugs :) I was just trying to warn that some are from bugs in the project code and not the library.

But there are people here that may have found a true bug in this library. So just before starting to write here. Try to guarantee that the bug is not in your code. :)

[philvasseur]

Reinstalling and deleting devices doesn't ever get me anything other than a blank screen. It was working a month or two ago when I set it up, and have just been developing on iOS since then. Any ideas?

Can't open dev menu or anything. Just a blank screen. http://localhost:8081/index.bundle?platform=android&dev=true&hot=false&minify=false does load seemingly fine when I open it in a browser.

[KD-Dhiren]

I also face this issue I used Navigation.startSingleScreenApp I followed everything for android from http://wix.github.io/react-native-navigation/#/installation-android and while run an android app, it run successfully but it shows white blank screen. I don't understand what actually happens ?

[peakyDicers]

I am having a similar issue. Build is successful, but shows a blank screen on the emulator. When I press Ctrl-M, I hear the feedback sound that the emulator makes when the developer menu appears, even though it does not appear.

react-native: 0.53.3

MainActivity.java & MainApplication.java https://gist.github.com/peakyDicers/2f78f70f1762fd5afbeb7e9c7383c806

[philvasseur]

It turns out my error seemingly wasn't with react-native navigation at all.

However, It seems past 0.51.0 (or maybe past 0.52.0) android does not show errors if they happen upon opening and instead just shows a blank screen (unclear if this is a react-native issue, or is because of something with react-native navigation). If you have android studio open, you should be able to find the error listed there. Once I fixed that error, the app then loaded.

If you are getting a white screen, I'd recommend either downgrading your RN version to be able to see what the error actually is on the screen, or trying to find the error message in android studio.

[arapocket]

To anyone who is having this issue, it is most likely caused by play-services version incompatibles.

Look through your logcat in Android Studio for an exception.

[paulrostorp]

@arapocket What would this look like? I am a bit lost when it come to android logs...

[chinmaygit]

Try this, stop the packager. adb reverse tcp:8081 tcp:8081 start the packager.

[paulrostorp]

@chinmaygit This does not work for RN 0.54, RNN 1.1.434

[mirsujat]

I have save issue

with "dependencies": { "react": "16.2.0", "react-native": "0.52.0", "react-native-navigation": "^1.1.436", "react-native-vector-icons": "^4.6.0", "react-redux": "^5.0.7", "redux": "^3.7.2" }

anybody help Me

[peakyDicers]

like @philvasseur said, this is not an issue with react-native navigation, but instead with the newer versions of react-native. I downgraded my version of react-native to 0.51.0 (the minimum version required for react-native-navigation) and was able to see my start-up error.

[mirsujat]

there is a emulator warning: occured after adding react-native-nagivation

Emulator: Warning: Quick Boot / Snapshots not supported on this machine. A CPU with EPT + UG features is currently needed. We will address this in a future release.

[mirsujat]

Is there solution. thanks in advance

[mirsujat]

It's Ok. this Emulator warnig is OK

[joa-queen]

It's happening the same to me. No matter if I downgrade react-native at all.

No console errors. Nothing. Just a blank screen.

[peakyDicers]

I find that closing the application in the emulator, and then opening it up again works for me, I know it sounds dumb but it took me a long time before I tried it and it worked for me.

Get Outlook for Androidhttps://aka.ms/ghei36

---

From: Joaquín notifications@github.com Sent: Saturday, April 14, 2018 11:32:31 AM To: wix/react-native-navigation Cc: Ian Chui; Manual Subject: Re: [wix/react-native-navigation] Blank white screen on Android, IOS working fine! (#2687)

It's happening the same to me. No matter if I downgrade react-native at all.

No console errors. Nothing. Just a blank screen.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/wix/react-native-navigation/issues/2687#issuecomment-381337299, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AQE0Jcxn7aTkEaBYmx73lEjaK3H4IIbFks5tohaPgaJpZM4R_10K.

[joa-queen]

I am working with a physical device, and closing and opening does nothing but crashing.

[MaheshNandam]

react - 16.0.0 react-native - 0.50.4

It was running fine but recently got the issue, did anyone solved this issue?

[xvonabur]

I've finally solved this issue by combining this solution and this one.

[varqasim]

@xvonabur Man you are a life saver... I applied the first solution first. Delete the app, rebuilt again, didn't work for the first time, but after trying again delete the app, closing the debugger and building all over again, finally the android app is running!

Edit: Alright, and now it's the same again.. :(

[joa-queen]

@qasimalbaqali don't play with my feelings like that!!

[xvonabur]

@qasimalbaqali it works in my case. I had to delete an app, restart npm server and reset caches, but after that no more blank window in emulator. Heavy multitasking, closing app by pressing back button work as expected.

For the second solution you do actually need to edit source code of react-native-navigation. Otherwise it doesn't work.

[varqasim]

@joaqtor I'm not playing with your hear this time, I promise. It worked again, I did what @xvonabur sugggested in both of his posts. I uninstalled the app, closed the npm server for bundling, closed the debugging tab, and installed it again. It was a blank screen at first, but then when I click on the the square button in the navigation bar (sorry I don't know what exactly is that button called), the one that shows you all the running apps on your phone, then clicked on my app again, WALAA it's not white again and it's running :)

[xvonabur]

@qasimalbaqali I think you have another problem with your code, because going to recent apps list and back works without fixes mentioned above.

I have the following dependencies:

"react": "16.2.0",
"react-native": "0.52.2",
"react-native-navigation": "^1.1.397"

[ericketts]

If you're having trouble getting your changes picked up, try these options:

• navigate to $TMPDIR and rm metro-cache-* and haste-map-* (essentially clearing the RN packager cache(s))
• navigate to your app's android dir, and execute ./gradlew clean (which bins the compiled Java code and deletes any generated builds)

With both those done, you're guaranteed to re-build everything from scratch, so if your changes still aren't showing up, you may need to re-examine the code you've added.

[sirawatGG]

I solved this by @ibmouhssine solution. thank you.

I think the issue only happen with new version of react and react-native. For example I used react@16.3.1, reacct-native@0.55.3, it shows blank screen unless I add icon in Navigation.startTabBasedApp.

However, it works just fine with my previous version of react@16.0.0-alpha.12, react-native@0.47.1.

[dungnguyen10989]

add this mothod in to MainActivity:

@Override
    public LinearLayout createSplashLayout() {
        LinearLayout view = new LinearLayout(this);
        TextView textView = new TextView(this);
        /*ImageView img = new ImageView(this);

        int w = LinearLayout.LayoutParams.MATCH_PARENT;
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(w, w);

        img.setImageResource(R.drawable.background);
        img.setLayoutParams(layoutParams);*/
        view.setBackgroundColor(Color.parseColor("#ffffe0"));
        view.setGravity(Gravity.CENTER);

        textView.setTextColor(Color.parseColor("#319efb"));
        textView.setText("Your Project");
        textView.setGravity(Gravity.CENTER);
        textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 40);

        view.addView(textView);
        return view;
    }

If I config react-native-navigation with redux, in first time to run app in debug mode, after I grant overlay permission, app will appear SplashScreen above, and show my screens after action ROOT_CHANGED dispatched, but if I reload app by shake device or press command + M > reload, app only show SplashScreen above, not show my screen whether action ROOT_CHANGED has been dispatched(show in debugger), this error is only on android when config navigation with redux, who can help me ?

[vijaya06]

when i am making build through react-native run-android then its working fine but when i am making signed apk so its showing white screen. what i do. please help!

[batuhansahan]

i solve this issue add "icon" in tabs

` {

  label: 'MESSAGES',

  screen: '<example>.Messages',

  icon: require('./img/MESSAGES.png'), // !! this line must be here

  title: 'Messages'

},

`

[manojkmishra]

I was facing white screen issue for past two days.

1. First I was using memu android emulator - in that case it was not moving after showing. Metro Bundler ready. Loading dependency graph, done.

2. Then I started using android studio, there also it was the same. After updating my android studio finally found the error in android studio logcat. In my case also it was icon issue.

05-17 17:34:08.193 6607-6640/com.appanme E/ReactNativeJS: Error while starting app: Error: No icon defined for tab appname.abcScreen 05-17 17:34:08.205 6607-6607/com.appanme E/unknown:ReactNative: Unable to launch redbox because react activity is not available, here is the error that redbox would've displayed: console.error: "Error while starting app: Error: No icon defined for tab appname.abcScreen"

As soon as I defined the icons, everything started working:

constructor() { this._initApp() } _initApp() { Navigation.startTabBasedApp({ tabs: [ { label: 'Feeds', screen: 'appname.abcScreen', title: 'title1', icon: require('./images/icon1.png'), }, { label: 'Explore', screen: 'appname.defScreen', title: 'title2', icon: require('./images/icon1.png'), }, ] }) }