CODEWITHSUNDEEP
reactjsreact-nativenpmexpo
Deepak
Deepak

Reputation: 482

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

Downloading Javascript bundle 100%

Upvotes: 47

Views: 22616

Answers (12)

Elavarasan r
Elavarasan r

Reputation: 1295

In my case, When i was tried with physical device then try to install in simulator. Then its got stuck like it. I solved the problem after stopped the debugger. For that use below steps.

Android:

  1. Go to settings in mobile >> Installed Apps >> choose your app and click on clear Data.
  2. uninstall your existing app and try to install .

IoS:

  1. Uninstall the exist app and try to install as new.
  2. Shake your device and stop debug and try again to install.

Upvotes: 0

Dangular
Dangular

Reputation: 449

As of January 2021, your node version may be one of the causes of this problem.

Check your node version using node -v and if the version is 15.x.x, try downgrading the version to 14.15.1:

$ npm install -g n
$ n 14.15.1

Upvotes: 0

Akansh Sirohi
Akansh Sirohi

Reputation: 23

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

  1. Update expo-cli and react-native with npm update -g expo-cli and npm update -g react-native
  2. Uninstall expo app on emulator or device and reinstall it
  3. Create new project with expo init project_name (use your original project name, rename the previous for backup).
  4. Try to run this new blank app in your expo app, it should run properly.
  5. 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).
  6. Now add your old project files and directories including app.json and App.js to this new project.
  7. Run your project again with expo start -c command.

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

Upvotes: 0

cantaş
cantaş

Reputation: 136

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

Upvotes: -1

Chirag Bhatia - chirag64
Chirag Bhatia - chirag64

Reputation: 4526

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.

Upvotes: 101

Mário Prada
Mário Prada

Reputation: 2158

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.

Upvotes: -2

Faiz Mohammed
Faiz Mohammed

Reputation: 364

This is how I resolved the issue in Mac.

  1. My screen was stuck at Downloading javascript bundle 100%

Screen stuck Downloading javascript bundle 100%

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

Click on Stop RemoteJS Debugging

  1. The Application will now load

Application will load now

Upvotes: 4

Jonas Sourlier
Jonas Sourlier

Reputation: 14465

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.

Upvotes: 6

WhaSukGO
WhaSukGO

Reputation: 713

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)

Upvotes: 2

delavago1999
delavago1999

Reputation: 254

well this post is old but lets go, how I solved this problem for myself:

> install yarn


> run: yarn remove react-native


> run: yarn add react-native


> run: react-native run-android

Upvotes: -7

sonicmario
sonicmario

Reputation: 611

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?

Upvotes: 1

Harsh Metrey
Harsh Metrey

Reputation: 131

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

Upvotes: -3

Related Questions