Android: empty white screen after BundleDownloader failure

[samkline]

Description

In development mode on Android, if the app has no JS bundle and no fallback available, the app displays a RedBox error saying either Unable to load script. or Could not connect to development server.. If the user resolves this issue and chooses Reload, the app will then successfully download the bundle from Metro, but will not actually initialize the application. Instead, the app simply shows a blank white screen.

Here's the series of steps that causes this to happen:

1. runCreateReactContextOnNewThread is called as part of normal React Native initialization
2. The mCreateReactContextThread thread is created and started
3. Since no bundle is available, the thread exits early because createReactContext throws an exception; this is what triggers the RedBox
4. The user starts Metro and taps Reload, which causes BundleDownloader to download the bundle
5. BundleDownloader's onSuccess callback calls recreateReactContextInBackground
6. recreateReactContextInBackground sees that mCreateReactContextThread was already set earlier, and thus sets mPendingReactContextInitParams
7. The newly set mPendingReactContextInitParams is never used and the app sits idle

I have a proposed fix that I'll send a PR for.

Version

0.66.4

Output of npx react-native info

System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 573.08 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
    Watchman: 2022.01.03.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /Users/samkline/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK:
      Android NDK: 20.1.5948944
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7935034
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.66.4 => 0.66.4
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Stop any locally running Metro service
2. Start a new project with npx react-native init
3. Run yarn android to build and launch the app in your emulator
4. Wait until you see the RedBox error
5. Run yarn start
6. In the app, tap Reload to load the bundle from Metro
7. The app loads the bundle from Metro, then leaves you at a blank white screen

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

No response

[cortinico]

In development mode on Android, if the app has no JS bundle and no fallback available, the app displays a RedBox error saying either Unable to load script. or Could not connect to development server.. If the user resolves this issue and chooses Reload, the app will then successfully download the bundle from Metro, but will not actually initialize the application. Instead, the app simply shows a blank white screen.

Thanks for looking into this @samkline, it's great stuff! I've noticed this same behavior and I had this in my backlog to investigate. Glad you found the time to do it. I'll give it a try in the next days as there are a couple of scenarios I'd like to test, but on a first look the PR looks fine to me.

[cortinico]

We tested with @ShikaSD and all it was working great on our end 👍 Thanks again @samkline