React-native: Blank screen for Android. RN Version 60.0.3

[vyshakh]

Getting blank screen for android on Mac OS. Looks fine on Windows OS.

OS: macOS 10.14.4
React Native version:
react: 16.8.6 => 16.8.6
react-native: 0.60.3 => 0.60.3

Steps To Reproduce

1. react-native init testapp
2. react-native run-android

Expected screen
New intro screen

Workaround
Run react-native start before running react-native run-android

[iamacup]

does running react-native start followed by react-native run-android fix this issue for you?

[vyshakh]

does running react-native start followed by react-native run-android fix this issue for you?

@iamacup Yup. It works. Thank you 👍
So another workaround is
Run react-native start before running react-native run-android

[iamacup]

This is todo with some behavior change where when we run react-native run-android on mac after 0.60.0 the bundler does not start automatically - and then if you start the bundler AFTER by running react-native start, no matter how many times you reload the app it will not move on from white screen.

I do not know if this is intended behavior or a bug, but it did make me pull my hair out for a while ;-)

[hannanstd]

hi
i have this problem. i use UBUNTU. when i use react-native run-android i will get red page. and then i use react-native start i will get blank white screen.

[williamprt]

Hi
The same for me. I use Ubuntu and tried run react-native on a physical device and Genymotion android emulator. Nothing works

[alitsvin]

I'm faced this issue on Linux Mint.
Run react-native start before react-native run-android helped

[danielnora]

This happens to me as well on Ubuntu 19.04.
On a brand new project:

react-native info (Output)

Binaries:
    Node: 10.16.2 - ~/.nvm/versions/node/v10.16.2/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.2/bin/npm
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1

react-native run-android apparently starts the Metro bundler and, after installing the app on the phone, the Metro server is closed and the app displays the message:

Unable to load script. Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release.

Then, if I try to run react-native start and then press Reload on the app, the Metro server will detect the request, will build it and, upon reaching 100%, will render a white screen on the app.

After this, closing the app, restarting the metro bundler, starting the app again is completely ineffective. The only solution is uninstalling the app and only installing it again after a Metro server is running with the react-native start command.

[igoratf]

Thanks @iamacup and @vyshakh I was going crazy to run new projects and that actually worked.

[vuggg]

does running react-native start followed by react-native run-android fix this issue for you?

@iamacup Yup. It works. Thank you
So another workaround is
Run react-native start before running react-native run-android

Thanks, it worked

[srthiagos]

I had same problem here, but in windows.
I resolve it deleting node_modules and reinstall using npm install and it's solved for me, but i don't try with yarn install

[Usamaliaquat123]

I had same problem here, but in windows.
I resolve it deleting node_modules and reinstall using npm install and it's solved for me, but i don't try with yarn install

Yea bro, it also works some times its the problem of fetching packages through yarn or npm i. Yes you can use yarn instead of yarn install

[iamacup]

@vyshakh do you mind testing this now on a new project - react native 0.61.x ?

looks to me like this is fixed and could be closed.

[sandunmj]

react-native start in one terminal and the react-native run-android in another terminal fixed the issue for me.

[SopoB]

What if the same issue is coming on building the final app (apk) file, how to avoid that white screen?

[iamacup]

@SopoB it is probably unrelated to this issue - a white screen typically indicates a javascript runtime crash which could be because of anything - you will need to see debugging release builds in the docs

[EduardoAraujoB]

hey, i've the same problem on Ubuntu, for thats work for me i've to run react-native start in one terminal and run react-native run-android in other terminal

[nikfardin]

The same problem on Ubuntu 19.04, RN 0.61.4. It works for me.
First run npx react-native start then npx react-native run-android

[Touseef-ahmad]

The same problem on Ubuntu 19.04, RN 0.61.4. It works for me.
First run react-native start then react-native run-android
but why?

[sandunmj]

react-native start for starting the server which communicates with the phone/ emulator.
react-native run-android builds the project and installs in the phone/ emulator using the communication tunnel which was created before.

[EduardoAraujoB]

React Native does not start the metro-bundler automatically? in other systems i didn't have this problem, maybe a problem in configurations on Ubuntu, terminal or a bug in react-native-cli?

[israelcena]

I've the same problem on Mint 19.2 and works for me.
First run react-native start then react-native run-android !!

[EduardoAraujoB]

I think that's a problem to start the metro-bundler automatically on linux, so maybe it's a problem in the terminal or configurations of the react native for linux

[virtumonde]

Experienced the same problem on Mac and starting the Metro server before the app (react-native start) fixed it.

[Alaaeldin1993]

works for me.
First run npx react-native start then npx react-native run-android

[israelcena]

metro-bundler is the problem

[EduardoAraujoB]

So what is wrong with metro-bundler? It isn't start automatically when the react-native run-android is finishing, but work when we started it on other terminal, maybe its a problem to start metro-bundler automatically?

[godswillokokon]

Hi
The same for me. I use Ubuntu and tried run react-native on a physical device and Genymotion android emulator. Nothing works

hello, who did you fix this issue

[Shoukat488]

This is todo with some behavior change where when we run react-native run-android on mac after 0.60.0 the bundler does not start automatically - and then if you start the bundler AFTER by running react-native start, no matter how many times you reload the app it will not move on from white screen.

I do not know if this is intended behavior or a bug, but it did make me pull my hair out for a while ;-)

I faced the same issue but now has been solved through your solution. Thanks

[Gabriel-Aquino]

Funcionou! Fiz o seguinte passo: primeiro executei react-native start, após aparecer o "loading... done" eu executei o comando react-native run-android e funcionou. Estava fazendo o contrário e a tela ficava apenas branca. Usando Linux Mint 19.3 "Tricia"

[Shoukat488]

Funcionou! Fiz o seguinte passo: primeiro executei react-native start, após aparecer o "loading... done" eu executei o comando react-native run-android e funcionou. Estava fazendo o contrário e a tela ficava apenas branca. Usando Linux Mint 19.3 "Tricia"

I don't understand the language which you have written. So giving an answer by so far my understanding.
run the following commands in this order.
1- npm start or react-native start
2- react-native run-android
It worked for me

[MrCreeper1008]

Doesn't work for me.

Edit: turns out it was an infinite loop of useEffect call that caused the blank screen.

[Gabriel-Aquino]

Funcionou! Fiz o seguinte passo: primeiro executei react-native start, após aparecer o "loading... done" eu executei o comando react-native run-android e funcionou. Estava fazendo o contrário e a tela ficava apenas branca. Usando Linux Mint 19.3 "Tricia"

I don't understand the language which you have written. So giving an answer by so far my understanding.
run the following commands in this order.
1- npm start or react-native start
2- react-native run-android
It worked for me

Oh, Sorry bro, i said that it worked to me too, but I wrote in portuguese. I followed the same steps did you say, thanks!

[lumagallacio]

Funcionou! Fiz o seguinte passo: primeiro executei react-native start, após aparecer o "loading... done" eu executei o comando react-native run-android e funcionou. Estava fazendo o contrário e a tela ficava apenas branca. Usando Linux Mint 19.3 "Tricia"

funcionou! obrigada

[arieller]

the start and run-android doesnt work
neither reinstalling the npm packages
what is this?

[joseananio]

facing same issue on a fresh project. Ubuntu 19.10 react native 0.62.0. None of these suggestions works for me.

EDIT: I was actually using 0.61.5

ugrading to 0.62.0 worked instantly. Well that was the new project and the old one has only react-native-navigation(~0.6.1) installed at RN version 0.61.5. So I'm about to investigate if RNN was the cause.

[joshglenn]

I'm currently having this problem on version 0.61.5. This was working fine previously, but something happened while my back was turned. Still, starting the metro bundler first with yarn start and after that, running yarn android works around the problem.

[ithustle]

I have this behavior on my app after release it. Some help will be nice!

[Jackson-Calixto]

This happens to me as well on Ubuntu 19.04.
On a brand new project:

react-native info (Output)

Binaries:
    Node: 10.16.2 - ~/.nvm/versions/node/v10.16.2/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.2/bin/npm
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1

react-native run-android apparently starts the Metro bundler and, after installing the app on the phone, the Metro server is closed and the app displays the message:

Unable to load script. Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release.

Then, if I try to run react-native start and then press _Reload_ on the app, the Metro server will detect the request, will build it and, upon reaching 100%, will render a white screen on the app.

After this, closing the app, restarting the metro bundler, starting the app again is completely ineffective. The only solution is uninstalling the app and only installing it again after a Metro server is running with the react-native start command.

Thank you so much, it worked for me

[jackiewung]

Don't know if this will help anybody, but if you have the prop defaultVideoQuality passed, check that your device can support it (front and back also have different video quality)

Had defaultVideoQuality set to 1080p on the front camera and noticed that smaller devices supported 720p at the best for front camera view

[VivekkChudasama]

I try to run react-native start and then press Reload on the app, the Metro server will detect the request, will build it and, upon reaching 100%, will render a white screen on the app.

After this, closing the app, restarting the metro bundler, starting the app again is completely ineffective. The only solution is uninstalling the app and only installing it again after a Metro server is running with the react-native start command.

Not working

[smartsailor]

Getting blank screen for android on Mac OS. Looks fine on Windows OS.

OS: macOS 10.14.4
React Native version:
react: 16.8.6 => 16.8.6
react-native: 0.60.3 => 0.60.3

Steps To Reproduce

1. react-native init testapp
2. react-native run-android

Expected screen
New intro screen

Workaround
Run react-native start before running react-native run-android

what if you try using local option out of 3 available options ,
I mean from Tunnel,LAN,Local.
Please try running on adnroid using Local option.
I dont know if this is right or wrong,but its working on my device.
Please correct me if I will miss on any important thing in future if I go ahead with this option.
Thanks.

[flyskywhy]

With test react-native init --version 0.61.0 rn610 and react-native init --version 0.61.1 rn611, results 0.61.0 is good and 0.61.1 has current issue.

The only meaningful commit (comes from PR https://github.com/facebook/react-native/pull/26495 ) between 0.61.0 and 0.61.1 is Allow again for injecting custom root view via ReactActivityDelegate (#26495) by @kmagiera (and committed by @grabbou ), it will be nice if @kmagiera improve the compatibility between this commit and the Metro server.

[ajaymarathe9]

Getting blank screen for android on Mac OS. Looks fine on Windows OS.

OS: macOS 10.14.4
React Native version:
react: 16.8.6 => 16.8.6
react-native: 0.60.3 => 0.60.3

Steps To Reproduce

1. react-native init testapp
2. react-native run-android

Expected screen
New intro screen

Workaround
Run react-native start before running react-native run-android

It works :P

[mohammadbrzbrz72]

the correct way for linux ubuntu 20.04 lts
you should do this to run android in develop mod

when you turn on your pc or laptop to work on project,
you should pass these steps:

1- react-native run-android ( when finish the first step , you see error in your emulator or device )
2- to fix this problem, close that project in your emulator or device ( but the terminal or your vscode must be opened )
3- then write react-native start in your terminal
4- first wait to see this in your terminal :

           ######                ######               
         ###     ####        ####     ###             
        ##          ###    ###          ##            
        ##             ####             ##            
        ##             ####             ##            
        ##           ##    ##           ##            
        ##         ###      ###         ##            
         ##  ########################  ##             
      ######    ###            ###    ######          
  ###     ##    ##              ##    ##     ###

### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######

             Welcome to React Native!
            Learn once, write anywhere

5- open your built project and then you can see the project starting to bundle

enjoy your project :)