White / Blank screen displayed on launch in release mode.

[agusvazquez]

Hello guys!

I am having this issue.

Description

Blank / White screen is randomly shown on startup in release mode and I get stuck, I have to close the app and try again in order to make it work. I think it has a lot of more chance for the white screen to be displayed if it is the first run after a fresh install. I think it has something to do with react navigation and react-native-screens but I am not sure about it. Happens on both Android and iOS.

Already tried this solution without any success.
#26605 (comment)

React Native version:

Run react-native info in your terminal and copy the results here.

info Fetching system and libraries information...
(node:7256) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
    Memory: 828.73 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.7.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 12.0.1 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^16.13.1 => 16.13.1 
    react-native: ^0.63.2 => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create sample project and add some screens using react navigation lib.
2. Perform a release run on xCode / Android

Expected Results

Blank / White screen should not appear and should be replaced by the splash and the app after everything loads.

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

This sample starts with a fresh install app from testflight.

Dependencies:

"@apollo/react-components": "^4.0.0",
    "@apollo/react-hooks": "^4.0.0",
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/datetimepicker": "^3.0.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/toolbar-android": "^0.1.0-rc.2",
    "@react-native-community/viewpager": "^4.1.4",
    "@react-native-firebase/analytics": "^7.4.1",
    "@react-native-firebase/app": "^8.3.0",
    "@react-native-firebase/messaging": "^7.6.1",
    "@react-native-firebase/remote-config": "^8.1.1",
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "@sentry/cli": "^1.55.1",
    "@sentry/react-native": "^1.7.1",
    "apisauce": "^1.1.2",
    "apollo-boost": "^0.4.9",
    "apollo-client": "^2.6.10",
    "base-64": "^0.1.0",
    "easy-peasy": "^3.3.1",
    "g": "^2.0.1",
    "graphql": "^15.3.0",
    "graphql-tag": "^2.11.0",
    "jetifier": "^1.6.6",
    "jwt-decode": "^2.2.0",
    "moment": "^2.27.0",
    "react": "^16.13.1",
    "react-native": "^0.63.2",
    "react-native-code-push": "^6.3.0",
    "react-native-credit-card-input": "^0.4.1",
    "react-native-device-info": "^5.6.4",
    "react-native-dialog-input": "^1.0.8",
    "react-native-elements": "^2.2.1",
    "react-native-email-link": "^1.9.2",
    "react-native-fbsdk": "^2.0.0",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-google-places": "^3.1.2",
    "react-native-image-picker": "^2.3.3",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-iphone-x-helper": "^1.2.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localization": "^2.1.6",
    "react-native-masked-text": "^1.13.0",
    "react-native-modal": "^11.5.6",
    "react-native-modal-datetime-picker": "^8.9.3",
    "react-native-permissions": "^2.1.5",
    "react-native-reanimated": "^1.13.0",
    "react-native-safe-area-context": "^3.1.4",
    "react-native-screens": "^2.10.1",
    "react-native-segmented-control-tab": "^3.4.1",
    "react-native-vector-icons": "^7.0.0",
    "react-native-webview": "^10.4.0",
    "rn-fetch-blob": "^0.12.0",
    "styled-components": "^5.1.1"

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[safaiyeh]

Hi @agusvazquez sorry you're experiencing this. Could you provide a minimum repro that demonstrates this?

[agusvazquez]

Hey @safaiyeh thanks for your response.

I have created a new project with the same structure as my real project, but I just wasn't able to reproduce the issue.
This is the project if you want to check it out.

https://github.com/agusvazquez/BlankScreen-Demo

Apologies for not being able to give you all the feedback you need. I will keep working on reproducing the issue.

[safaiyeh]

A quick check of the react-native-screens repo, I saw some issues concerning the blank screens. Could you check if those are helpful?

[safaiyeh]

Also I found this issue, does their fix work for you? #26400

[agusvazquez]

Yes! I have been googling and tried most of the solutions on react-native-screens repo. I will check again, perhaps I missed something.

About #26400 , I saw that one is related to android only, and in my case it happens on both Android and iOS with 100% certainty on iOS on the first launch.

The only difference I see the first launch over the other ones is the Push Notifications alert pop up for iOS. I don't think that might be breaking something that prevents the app to be loaded, right?

[agusvazquez]

Hello @safaiyeh .

I have been testing this and I realized that this only happens when downloading the app from the Store / Testflight. Running as release mode does NOT reproduce this issue.

Looking for that, I saw this.

microsoft/react-native-code-push#1356

I removed codepush from my project, and now it seems to work fine. I will continue it with them.

Thanks for your support!

[safaiyeh]

@agusvazquez Awesome! I'm glad you narrowed down the issue.