Flipper causing expo to be stuck at 100% and give a black screen

[Acetyld]

How frequently does the bug occur?

Always

Description

Flipper causing expo to be stuck at 100% and give a black screen, this only happens when flipper is open when connecting the metro bundler, this wont happen if you first open app and then flipper
I reproduced this as well: https://github.com/Acetyld/realm-test-expo

Stacktrace & log output

No response

Can you reproduce the bug?

Always

Reproduction Steps

npx create-expo-app test
cd test
npm install -D expo-dev-client
npm install [email protected] or latest (11...)
npx expo install expo-build-properties
add to app.json

 {
"plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "flipper": true
          }
        }
      ]
    ],
}

open flipper 0210.0
npx expo run:ios

Version

12/11

What services are you using?

Local Database only

Are you using encryption?

No

Platform OS and version(s)

Expo 49

Build environment

Which debugger for React Native: ..
Flipper

Cocoapods version

No response

[kneth]

@Acetyld Using your reproduction case I observe the following using Flipper v0.210.1, realm@next and bson@^4:

• With Realm and Flipper: loading bundle hangs at 100 %
• Without Realm but with Flipper: loading completes and app is launched
• With Realm but without Flipper: loading completes and app is launched

I believe it is consistent with your observations. We need to investigate more in order to understand what is the root cause.

[0x1337ak]

I want to add this:

• with Realm but without flipper: loading complete first time , after exit expo app, loading again from expo by click on development server IP stuck at "Loading from metro ..."
  demo npx create-expo-app MyAwesomeRealmApp --template @realm/expo-template

[kishannareshpal]

This issue should require urgent attention

[Acetyld]

For us its not a real issue anymore. We just open flipper after opening app and we reload

[kishannareshpal]

Interesting, for us it still hangs with either Bundling: 100%... or a brief Loading from metro... and a white screen. This is reproducible by using the Realm expo template as follows:

Steps to reproduce:

1. Use NodeJS v20.9.0 (LTS) and NPM v10.1.0 (nvm use --lts)
2. npx create-expo-app@latest MyAwesomeRealmApp --template @realm/expo-template
3. Create a new iOS development client build with EAS
4. Start the expo dev client server: npm start
5. Run the built dev client build on my iPhone.
   • The first time it runs (or if npm start -- --clear), it builds up to 100% and stops with the message Bundling: 100%..., all while showing a blank white screen (the splash screen).
   • Then press r from the server to reload the app, it changes from the 100% bundled message to Loading from metro... and then message disappears but still displaying the blank white screen (the splash screen).
   • Press r again, same thing happens as mentioned in the step above.
     • However, for some magical reason, if i keep pressing r to reload the app, it does eventually go to the home screen and everything appears to work fine (even the fast reload on code change), BUT manually reloading again we find ourselves with the white screen issue all over again (repeat from second point in step 5)

Note
This only appears to affect iOS dev client builds (physical iPhones and simulators). Android builds don't have this issue for me.

package.json

{
  "name": "myawesomerealmapp",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
  },
  "dependencies": {
    "@realm/react": "^0.6.0",
    "expo": "^49.0.8",
    "expo-dev-client": "~2.4.8",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-get-random-values": "~1.9.0",
    "realm": "12.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.5",
    "@babel/plugin-proposal-decorators": "^7.22.5",
    "@realm/babel-plugin": "^0.1.1",
    "@types/react": "~18.2.13",
    "typescript": "^5.1.3"
  },
  "license": "Apache-2.0",
  "private": true
}

This is related to: https://www.mongodb.com/community/forums/t/expo-49-0-13-stuck-on-splashscreen-after-installing-realm-and-creating-eas-build/249757/7

[Acetyld]

Yhea, we develop mostly on simulators, we never run npm start, always the ios/android command from expo that are generated on a prebuild

[AdamGerthel]

Am having the same issue. It usually loads the first time with a fresh app install on simulator (never works on device), but subsequent reloads fail to pass the metro stage 90% of the time. Flipper is not enabled.

[AdamGerthel]

Update: Uninstalling expo-dev-client fixed the issue entirely. I don't actually use OTA so I'm not sure I really need expo-dev-client for anything other than that the UI is prettier than the default RN, so I'll go with that workaround for now.