react native downloading javascript bundle 100% stuck

问题

when I am trying to execute npm start it works fine, but when i try to run my application by expo the process goes till 100% and after that nothing happens. I am not getting what is exact issue over there. I am having following things in package.json.... please help me to resolve this issue.

{
  "name": "ProMeeting",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "~29.0.0",
    "react-native-scripts": "^1.14.0",
    "react-test-renderer": "16.3.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@babel/preset-react": "^7.0.0-beta.56",
    "expo": "^29.0.0",
    "firebase": "^5.3.1",
    "native-base": "^2.7.2",
    "react": "16.3.1",
    "react-native": "^0.55.4",
    "react-native-firebase": "^4.3.8",
    "react-native-vector-icons": "^5.0.0",
    "react-navigation": "^2.11.2"
  }
}

Screenshot added for illustration purpose

回答1:

It seems there are multiple reasons why this could happen. I tried to run other apps on my simulator, restarted my simulator and even tried to delete the build folders and rebuild from scratch, but none of these approaches solved the issue.

What finally worked was restarting the React Native Debugger that I had on in the background the entire time.

You can also check the Network tab of React Native Debugger if you've enabled Offline throttling. Disabling it should also solve the issue in some cases.

回答2:

In my case this always happened when I remote JS debugging was turned on. The JS bundle would load to 100%, but then the app was stuck. React Native Debugger could not connect, with the error message Another debugger is already connected.

After trying all kinds of things (cache resets, restarting Metro builder, restarting simulator) without any luck, I remembered that the only "other debugger" I had ever used were the Chrome Devtools, so I quit Chrome, and immediately everything was working again.

Turns out, even though I had closed the Chrome tab where I had been debugging the app, some background process in Chrome was still attached as a debugger to the app (also after reboots of the simulator). Then it hit some kind of breakpoint or exception on startup, so it paused, and all I could see was the Downloading Javascript bundle 100% message.

回答3:

In my case, my code worked in Android, but not in iOS simulator.

SplashScreen.preventAutoHide(); was the problem.

I called the method twice, App.js and Main.js, respectively.

After removing it in the App.js, it worked.

(I think restarting the React Native Debugger helped as well)

回答4:

This is how I resolved the issue in Mac.

My screen was stuck at Downloading javascript bundle 100%

Select Simulator, Press (Command + D) in Mac, the simulator will display the set of options.

The Application will now load

回答5:

react-native-firebase often cause same issue.

below is official integration guide of react-native-firebase. https://rnfirebase.io/docs/v5.x.x/installation/ios

B) At the beginning of the didFinishLaunchingWithOptions:(NSDictionary *)launchOptions method add the following line:

[FIRApp configure]; "It is recommended to add the line within the method BEFORE creating the RCTRootView. Otherwise the initialization can occur after already being required in your JavaScript code - leading to app not initialised exceptions."

Do you have GoogleService-Info.plist? Did you pod install? Did you Hardware > Erase all Contents and settings in simulator?

回答6:

I also stuck at the same problem and did every possible thing but it not worked, I revert every change but still the issue is there..

I created my own solution and it works perfectly for me, maybe it might help someone, you can try it with Apple and Android too

Update expo-cli and react-native with npm update -g expo-cli and npm update -g react-native
Uninstall expo app on emulator or device and reinstall it
Create new project with expo init project_name (use your original project name, rename the previous for backup).
Try to run this new blank app in your expo app, it should run properly.
Now install every dependency from non working package.json one by one or in bulk but without giving version using command expo install package_name (Manually because it might be possible because of version conflict).
Now add your old project files and directories including app.json and App.js to this new project.
Run your project again with expo start -c command.

And here you go with your working project!
Happy Coding!!!

回答7:

For me clearing out expo app data worked. Apparently i have stored data in SQLite which then i have been fetching incorrectly.

回答8:

Well in my case I removed a for loop that I had in my code and it was enough to fix this issue. Apparently my react app was crashing everytime it run that loop.

回答9:

in my case ;

I added a new package ( @khanshamshad32/carousel ) v1.0.1 . i guess package has problems and my expo on real device stuck %100.. and im going to delete all of items package.

1- from package.json (relative instance)

2- from package-lock.json (relative instance)

3- from "package name" folder of node_modules

and it did work

回答10:

You should try setting up a new react-native project and transfer your files to the new project and then try running it again, this issue occurs when build files are missing