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

Acetyld commented 1 year ago

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 realm@12.0.0-rc.3 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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

This issue should require urgent attention

Acetyld commented 1 year ago

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

kishannareshpal commented 1 year ago

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:

Use NodeJS v20.9.0 (LTS) and NPM v10.1.0 (nvm use --lts)
npx create-expo-app@latest MyAwesomeRealmApp --template @realm/expo-template
Create a new iOS development client build with EAS
Start the expo dev client server: npm start
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
}

Acetyld commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.

realm / realm-js