search

facebook / react-native

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

White Screen of Death After Migrating to New Architecture #36319

Closed atticusliu closed 1 year ago

atticusliu commented 1 year ago

Description

White screen of death after migrating from React Native 0.68.2 to React Native 0.71.3, upgrading packages, and making all necessary code changes. Everything checks out and builds correctly, but I'm encountering the white screen of death immediately after I auto-login into my app.

React Native Version

0.71.3

Output of npx react-native info

System: OS: macOS 13.2.1 CPU: (8) x64 Apple M1 Memory: 21.14 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.13.0/bin/yarn npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm Watchman: Not Found Managers: CocoaPods: Not Found SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8815526 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 11.0.16 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.3 => 0.71.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

The normal flow of my app when debugging is:

  1. Loading screen appears
  2. Login screen briefly flashes and I'm automatically logged in
  3. Homepage

In my case, the white screen of death happens after step 2. I know I'm being logged in because the API call to fetch my credentials is being logged and successfully fulfilled. So, to answer @carlosalmonte04's question (at least in my context), I'm moving from Auth.tsx to something like Home.tsx, on which I'm seeing the white screen of death instead of step 3. I've been trying to set ErrorBoundaries to what I think would be good affected areas so I'll keep plugging away and trying different things.

Snack, code example, screenshot, or link to a repository

Can't share a repo, but attached is a quick recording of the flow. Please let me know if you can't see this. https://user-images.githubusercontent.com/3667216/221721429-0d36a511-577e-4f85-876d-bb2c9d1367bb.mp4

github-actions[bot] commented 1 year ago
:warning: Missing Environment Information
:information_source: Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.
atticusliu commented 1 year ago

If needed , below are the results of running npx react-native info (responding to the github-actions bot's comment):

System:
    OS: macOS 13.2.1
    CPU: (8) x64 Apple M1
    Memory: 28.69 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.13.0/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8815526
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.16 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.3 => 0.71.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
cortinico commented 1 year ago

White screen of death after migrating from React Native 0.68.2 to React Native 0.71.3, upgrading packages, and making all necessary code changes. Everything checks out and builds correctly, but I'm encountering the white screen of death immediately after I auto-login into my app.

Can you clarify if you're able to run on 0.71.3 with the Old Architecture or not? Does the white screen happens after you turn on New Architecture?

redpanda-bit commented 1 year ago

Any logs on Xcode? Does it happen on Android also?

atticusliu commented 1 year ago

I haven't checked with Android yet - getting iOS up and running is my first priority. By the way, I don't think I've been able to Flipper connected properly. Xcode logs when running:

flipper: FlipperClient::addPlugin Inspector
flipper: FlipperClient::addPlugin Preferences
flipper: FlipperClient::addPlugin React
flipper: FlipperClient::addPlugin Network
Thread Performance Checker: Thread running at QOS_CLASS_USER_INTERACTIVE waiting on a lower QoS thread running at QOS_CLASS_DEFAULT. Investigate ways to avoid priority inversions
PID: 6478, TID: 2308639
Backtrace
=================================================================
3   Wefunder                            0x0000000100d667e8 -[_RCTSRRunLoopThread runLoop] + 44
4   Wefunder                            0x0000000100d66518 __49+[NSRunLoop(RCTSRWebSocket) RCTSR_networkRunLoop]_block_invoke + 116
5   libdispatch.dylib                   0x0000000106b6a04c _dispatch_client_callout + 20
6   libdispatch.dylib                   0x0000000106b6bbbc _dispatch_once_callout + 136
7   Wefunder                            0x0000000100d6647c +[NSRunLoop(RCTSRWebSocket) RCTSR_networkRunLoop] + 84
8   Wefunder                            0x0000000100d604b8 -[RCTSRWebSocket _connect] + 68
9   Wefunder                            0x0000000100d5f25c -[RCTSRWebSocket open] + 300
10  Wefunder                            0x0000000100d41be4 -[RCTReconnectingWebSocket start] + 148
11  Wefunder                            0x0000000100d31578 -[RCTPackagerConnection init] + 404
12  Wefunder                            0x0000000100d313c4 __49+[RCTPackagerConnection sharedPackagerConnection]_block_invoke + 36
13  libdispatch.dylib                   0x0000000106b6a04c _dispatch_client_callout + 20
14  libdispatch.dylib                   0x0000000106b6bbbc _dispatch_once_callout + 136
15  Wefunder                            0x0000000100d31378 +[RCTPackagerConnection sharedPackagerConnection] + 84
16  Wefunder                            0x0000000100dcabf4 -[RCTDevSettings initialize] + 148
17  Wefunder                            0x000000010145d970 -[RCTTurboModuleManager _createAndSetUpRCTTurboModule:moduleName:moduleId:] + 2024
18  Wefunder                            0x000000010145d02c __75-[RCTTurboModuleManager _provideRCTTurboModule:moduleHolder:shouldPerfLog:]_block_invoke + 136
19  Wefunder                            0x000000010145cbf4 -[RCTTurboModuleManager _provideRCTTurboModule:moduleHolder:shouldPerfLog:] + 1112
20  Wefunder                            0x000000010145c6b8 -[RCTTurboModuleManager provideRCTTurboModule:] + 320
21  Wefunder                            0x000000010145e300 -[RCTTurboModuleManager moduleForName:warnOnLookupFailure:] + 80
22  Wefunder                            0x0000000100cb4f00 -[RCTCxxBridge moduleForName:lazilyLoadIfNecessary:] + 240
23  Wefunder                            0x0000000100cb5548 -[RCTCxxBridge moduleForClass:] + 76
24  Wefunder                            0x0000000100dce0dc -[RCTBridge(RCTDevSettings) devSettings] + 92
25  Wefunder                            0x0000000100cb9bf8 -[RCTCxxBridge executeSourceCode:sync:] + 448
26  Wefunder                            0x0000000100cb3f4c __21-[RCTCxxBridge start]_block_invoke.115 + 140
27  libdispatch.dylib                   0x0000000106b68598 _dispatch_call_block_and_release + 32
28  libdispatch.dylib                   0x0000000106b6a04c _dispatch_client_callout + 20
29  libdispatch.dylib                   0x0000000106b7e69c _dispatch_root_queue_drain + 972
30  libdispatch.dylib                   0x0000000106b7ee64 _dispatch_worker_thread2 + 196
31  libsystem_pthread.dylib             0x0000000201c44dbc _pthread_wqthread + 228
32  libsystem_pthread.dylib             0x0000000201c44b98 start_wqthread + 8
WARNING: Logging before InitGoogleLogging() is written to STDERR
W0228 14:20:56.559979 1879650304 UIManagerBinding.cpp:123] instanceHandle is null, event will be dropped
W0228 14:20:56.570147 1879650304 UIManagerBinding.cpp:123] instanceHandle is null, event will be dropped
W0228 14:20:56.570197 1879650304 UIManagerBinding.cpp:123] instanceHandle is null, event will be dropped
W0228 14:20:56.570222 1879650304 UIManagerBinding.cpp:123] instanceHandle is null, event will be dropped
W0228 14:20:56.570241 1879650304 UIManagerBinding.cpp:123] instanceHandle is null, event will be dropped
W0228 14:20:56.570261 1879650304 UIManagerBinding.cpp:123] instanceHandle is null, event will be dropped
W0228 14:20:56.570278 1879650304 UIManagerBinding.cpp:123] instanceHandle is null, event will be dropped
W0228 14:20:56.570294 1879650304 UIManagerBinding.cpp:123] instanceHandle is null, event will be dropped
W0228 14:20:56.570310 1879650304 UIManagerBinding.cpp:123] instanceHandle is null, event will be dropped
flipper: Desktop failed to provide certificates. Error from flipper desktop:
rsocket::StreamInterruptedException: connection error
flipper: Desktop failed to provide certificates. Error from flipper desktop:
rsocket::StreamInterruptedException: connection error
atticusliu commented 1 year ago

White screen of death after migrating from React Native 0.68.2 to React Native 0.71.3, upgrading packages, and making all necessary code changes. Everything checks out and builds correctly, but I'm encountering the white screen of death immediately after I auto-login into my app.

Can you clarify if you're able to run on 0.71.3 with the Old Architecture or not? Does the white screen happens after you turn on New Architecture?

Yes, I can run 0.71.3 with the Old Architecture. I did so by running pod install without the New Architecture flag. So no, the white screen only happens after I turn on New Architecture.

cortinico commented 1 year ago

I did so by running pod install without the New Architecture flag. So no, the white screen only happens after I turn on New Architecture.

Thanks for the clarification. Are you able to run a New Architecture app from the template? Does the white screen occurs also there?

atticusliu commented 1 year ago

Which template are you referring to?

cortinico commented 1 year ago

Which template are you referring to?

The one you get once you do npx react-native init

richardReitz commented 1 year ago

I'm facing for the same issue on iOS RN 0.71.7. My app start perfectly, I can pass to the login screen, but if I reload the app or get any error the app returns a blank screen and even after reloading it doesn't work again, only building again the app returns.

github-actions[bot] commented 1 year ago

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

cortinico commented 1 year ago

Closing as the original author @atticusliu is unresponsive. Please reopen if the issue persists

affansk commented 1 year ago

@cortinico White Screen i am facing after enabling new architecture with the latest RC 0.72.0-rc.5.

The same is working with old architecture

cortinico commented 1 year ago

@cortinico White Screen i am facing after enabling new architecture with the latest RC 0.72.0-rc.5.

Please open a new issue and share a reproducer

zvici commented 6 months ago

I also had the same problem in version 0.72.12

zvici commented 6 months ago

i think problem from @react-navigation