search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.04k stars 24.32k forks source link

Blank screen for Android. RN Version 60.0.3 #25704

Closed vyshakh closed 3 years ago

vyshakh commented 5 years ago

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 commented 5 years ago

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

vyshakh commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

alitsvin commented 5 years ago

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

dnorac commented 5 years ago

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 commented 5 years ago

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

phungxuanvuong commented 5 years ago

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

tsdevvv commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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

SopoB commented 4 years ago

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

iamacup commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

EduardoAraujoB commented 4 years ago

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

dclipca commented 4 years ago

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

Alaaeldin1993 commented 4 years ago

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

israelcena commented 4 years ago

metro-bundler is the problem

EduardoAraujoB commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

kennethnym commented 4 years ago

Doesn't work for me.

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

Gabriel-Aquino commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

joseananio commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

Jackson-Calixto commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

fabOnReact commented 3 years ago

I quote the workaround proposed from the author of the issue

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

sorry, I did not read each answer but I believe this is not an issue with react-native, but https://github.com/react-native-community/cli

There is an open issue https://github.com/react-native-community/cli/issues/1223 to fix metro server not starting when running react-native run-android

There is also a pr https://github.com/react-native-community/cli/pull/1230

PS: Try using this settings to configure

CLICK TO OPEN SCREENSHOT OF DEV SETTINGS

| Change Bundle Location | Server host and port for device | |:-------------------------:|:-------------------------:| | | |

ovinokurov commented 3 years ago

This is a very easy fix, I don't understand why nobody came up with the solution before.

1) Go to Android Studio 2) Open your [Android Virtual Device Manager] in [Your Virtual Devices] delete all devices and add a new one.

Now Run :) good luck!

theking200794 commented 3 years ago

I was getting the error "Invariant Violation: Module AppRegistry is not a registered callable module" and because of this was facing a white screen issue. After struggling for a day first I rest cache using npx react-native start --reset-cache After that, I give this command react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res and deleted the already installed app on my real device. After that, I did a weird thing: restarting my pc and installing the app again using IntelliJ and the white screen issue was gone.

ZeeshanAhmadKhalil commented 2 years ago

I am getting this issue when i enable chrome debugger!