React-native: Blank Screen Issue on iOS

[eggybot]

React Native version:

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Memory: 1.56 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 23, 24, 25, 26, 27, 28
      Build Tools: 28.0.2, 28.0.3
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.1 => 0.61.1 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7
    react-native-rename: 2.4.1

Steps To Reproduce

1. Upgrade from 0.60.5 to 0.61.1
2. Build/Run App to Xcode or via cli which produce success build but has error

Describe what you expected to happen:
After Upgrading to Latest version 0.61.1, I tried to rebuild and run my app on my Simulator (iPhone 11) via XCode. All went smooth and the rebuild status goes Success. But the problem it didn't initiate or run the Metro Bundler automatically, so then I manually run the Metro using react-native start / npm start.

After running it just show me a blank screen no error message.

The bundle gives me a 100% (1/1) done. This will be the result always if I kept try to rub/rebuild it.

Is this a bug or something wrong with my setting? please keep note that I follow the Upgrade process using the Upgrade Helper.

I also tried to remove all dependencies but still gives me a blank white screen result. I already tried all solution I can find here and over stackoverflow but no luck.

[sunweiyang]

I am still on 0.60.5; it was working about an hour ago (and for the entirety of development during the previous week), but then this frozen blank screen issue began to happen for me too. I've made no changes to my codebase.

[sunweiyang]

@eggybot Don't know if this would help you, but I just now fully restarted my computer, and my own app no longer gets the frozen blank screen.

[eggybot]

@sunweiyang I already did that, as well reset all cache as well tried to re-install it. It looks like I need to do again from start if I cannot solve this by tom

[georgeonofrei]

I have this issue too. Started suddenly this afternoon. Left the computer untouched for sone 2 hours and when I came back blank screen on simulator and device.
Tried to clean cache, clean build, change build system, update dependencies, remove install node_modules, update cocoa pods, nothing changed. Also restarted xcode and the computer, but nothing.
Reverted to a version before leaving the computer and it still does not work.

Symptoms are the same:

• blank screen
• bundle loaded 100%
• no shake menu to enable debug mode
• in debugger in Chrome if I try Reload app it indicates there's no app connected

Any ideas?

Version: 0.60.5 - no attempted upgrade.

[matantech]

I have this issue too. Started suddenly this afternoon. Left the computer untouched for sone 2 hours and when I came back blank screen on simulator and device.
Tried to clean cache, clean build, change build system, update dependencies, remove install node_modules, update cocoa pods, nothing changed. Also restarted xcode and the computer, but nothing.
Reverted to a version before leaving the computer and it still does not work.

Symptoms are the same:

• blank screen
• bundle loaded 100%
• no shake menu to enable debug mode
• in debugger in Chrome if I try Reload app it indicates there's no app connected

Any ideas?

Version: 0.60.5 - no attempted upgrade.

I'm also having this issue. I'm able to see the splash screen for one second and than there's a bleck screen and no development menu

[AhmadSadiq0]

Also facing the same issue.....

[eggybot]

Update:
This issue is weird something had happen and it works suddenly but if you try to add a new package or reset and remove all node_modules and pod this issue shows again.

for the temp solution (which might or might now work on your side) what I did

1. is re-install again using yarn install
2. then delete the pod folder and pod.lock then install again pod install .
3. delete also the derive folder.
4. run/build the app using react-native run-ios , this action failed run it on xcode.

NOTE: (optional) run metro npm start if the bundler didn't auto initiate, for me this happen to my current app project. but for the newly build app the bundler auto open.

TAKE NOTE: This issue will return or might return if you add new package or run install as well deleting cache or pod files. I suggest remember the steps you did when your app build success.

[yastrebovb]

Having this issue in production! I just launched a new version of my app and got this.
Hope @eggybot suggestion will work.

[leandrosimoes]

Same issue here, but on Android... update to 0.61.2 and got the blank screen. I have tried to clean everything, yarn cache, node_modules, gradle and build again, still not working tho. I just roll back to version 0.60.5, clean everything again, build again and it is working. Not a clue about what is causing the problem in the new version.

Update:
I just figure out that I had some error in my javascript, and that was causing the blank screen for me. That was not supposed to happen tho, a red screen with the error was supposed to show instead. So, as soon I fix the error, the blank screen disappeared.

[eggybot]

Hi quick update, I just found out that in Xcode if I build/run the app and goes success and show white blank screen this means there still an error or issue on the project in terms of setup the modules and other error that didn't show by the Xcode Log. The only way you can see the errors is by running it on this command react-native run-ios --simulator="iPhone 11" via Terminal (which displays logs of error if failed).

Once all issue has been resolved. Try to re-run again the app at least twice in the terminal and it should start running and building the app. Also, you can rebuild the app in Xcode if there are no errors in the terminal logs.

This solves my issue now. The only thing missing now is the auto initiate on the metro bundler which can be solved by running npm start command.

[nasungtea]

I had the same problem with React screen not showing
I can't click on the simulator Button, so I quit the simulator and turned it on again and it worked fine.

[Nargle30]

Same issue
Have no idea how to fix it....

[georgeonofrei]

as @eggybot indicated, there's some issue at runtime before react native is bootstrapped. I was not able to solve it using his method.
In the end I recreated the project from a hello world (created with the cli), importing all the code and setting up stuff in ios project (android was pretty much copy paste unless you are also considering updating)
Although it sounds horrible, for me it ended up being simpler and faster than trying to debug it. instead of spending 2-3 days (or more), you can recreate in a matter of 2-3 hours, if the projects allows you. Bonus, you can update to latest react native version with minimum impact (again, if the code and dependencies allow you).

[Nargle30]

I don't get how eggybot's method can help, sorry :(
I had "white screen" issue before on both platforms and the root of this was in splash screen, it was used as a screen in navigation and had white background color :/ I gust changed the color to the one, I use on the next screen. Not good, I know, but looks better
And now I run it in release mode and only on iOS the issue is still valid (only in release mode). And I found where it declared - rootView.backgroundColor is set to white in AppDelegate.m (which is okay). Looks like, really, the app is just jammed there for some time and then continue working

Strange
In logs I don't see anything special

[massoprod]

Same issue. It happened when I did update from react-native 0.59.10 to 0.61.5

[MOwais]

Same issue. Did not make any changes to codebase.

[Nargle30]

I was recommended to use react-native-splash-screen lib, I had already no need to use it instead of the old implementation, but it could be helpful for you, have a look

[MOwais]

Not sure what the issue was but I was able to resolve it by simply restarting my Mac.

[glintpursuit]

@Nargle30 try below

https://facebook.github.io/react-native/docs/running-on-device#pro-tip

// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"
UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
launchScreenView.frame = self.window.bounds;
rootView.loadingView = launchScreenView;

[Nargle30]

@glintpursuit, thank you so much! Works perfect!

[ithustle]

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

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[moh3n9595]

Same issue

[wamry]

same here

[danwhite-ipc]

I have the same issue in a test flight build but it seems to be affecting one user predominantly more than any other

[officexchangesg]

this is usually happens when you have a running process occupying some resources so the react-native can't start successfully, you may try to run 'react-native start' to see whether can start or not. Close that process n your problem will be solved.