276

Getting the following message when I init a new project and then launch the Xcode emulator:

React-Native Version Mismatch

Javascript Version 0.50.1 Native version: 0.50.0

Make sure you have rebuilt the native code. ...

Does anyone know what is going on here and can help me?

Improve this question

50 Answers 50

Reset to default
1
2
460

This is what I've done with it:

Close all terminals and run build again.

You may forget to close nodejs terminal from another project, and they happen to have installed different react version.

So the code fetches from nodejs server conflicts with the native one.

Improve this answer
8
  • 1
    what if I don't want to close my currently opened terminals (I have apps running there) ? Is there another workaround ?
    – Dimitar Tsonev
    Commented Apr 24, 2018 at 11:35
  • 1
    @DimitarTsonev you can just close that specific terminal opened by react-native, which shows Bundling 'index.android.js' 100.0% (1/1), done.
    – Val
    Commented Apr 25, 2018 at 2:02
  • 1
    force fully using react dependency version in build.gradle worked. thanks @Val
    – jake oliver
    Commented May 15, 2018 at 10:50
  • Closed all terminals and used: react-native run-ios
    – Steffo Dimfelt
    Commented Jun 11, 2018 at 20:59
  • also run pod install if you are using cocoapods.
    – Oleg Novosad
    Commented Mar 28, 2019 at 13:02
43

In case you created your react-native app using create-react-native-app. You should have a app.json (expo). and a package.json file, check if the expo versions match and change accordingly. For example in my case the problem was that in the app.json file I had a 25.0.0 version for the expo sdkVersion attribute, I change that to 23.0.0 and everything worked.

package.json:

"dependencies": {
    "expo": "^23.0.4",
    "react": "16.0.0",
    "react-native": "^0.50.4"
  }

app.json:

{
  "expo": {
    "sdkVersion": "23.0.0" // before was 25.0.0
  }
}
Improve this answer
1
  • This worked for me! Quick update: you may not use a direct npm module for your react-native package and instead have a tarball. If that's the case, you can use react-native status to verify your version of RN. :)
    – blakeface
    Commented Dec 9, 2018 at 19:45
16

Just go to your android/app/build.gradle and then add to the dependencies section:

dependencies{
compile ("com.facebook.react:react-native:0.50.3") { force = true } 
}

/// the react native version can be found in package.json

Improve this answer
3
  • 5
    where do I change for ios
    – Anurag Shrivastava
    Commented Aug 28, 2018 at 9:07
  • what's the equivalent change in package.json?
    – Nate Glenn
    Commented Jun 30, 2019 at 18:23
  • I know this is an old answer but "force" is not deprecated. (and also compile is now implement)
    – FMaz008
    Commented Dec 17, 2020 at 2:10
9

just force react native version in your android's app level gradle file, in the dependencies section.

compile ("com.facebook.react:react-native:0.52.0") { force = true }

worked for me

Improve this answer
1
  • 3
    This worked for me. I have 0.53.3. I added a force with 0.53.3, restarted terminals, ran npm start -- --reset-cache and ran react-native run-android
    – Florin Dobre
    Commented May 15, 2018 at 12:30
8

If you're running your React Native app through Expo, upgrading React Native is liable to cause this error (as noted at https://github.com/expo/expo/issues/923).

If that's your scenario, your options are:

  1. Bump Expo (which is listed in your package.json) to a version that is compatible with your React Native version (if one exists, which may not be the case - judging by the linked issue, I figure that Expo support trails React Native releases).
  2. Discard your changes, delete and reinstall your Node modules, Eject from Expo, and then (after checking that you can still run your app post-ejection) try your upgrade again.
Improve this answer
1
8

For Android developers who couldn't get it fixed by just closing and rebuilding, Manually uninstall the app on the emulator/device.

Improve this answer
1
  • 3
    Uninstalling the app from IOS simulator worked for me.
    – Sait Banazili
    Commented Jun 7, 2018 at 10:05
7

I've never seen this error before, but whenever I can't get Xcode and React-Native to play well together, I do a couple of things. Check what version of Xcode I'm working with. If it needs to be updated, I update it. Then clearing watchman and the cache are the second place I go. I don't use the reset cache command. It always says that I need to verify the cache, so I skip that (you can do it though, I just get confused). I use rm -rf $TMPDIR/react-* to get rid of any cached builds. If that doesn't work, I try to build the app in Xcode, then work my way from there, to build it with react-native run-ios. With this error message, it seems you might start by trying to build it with Xcode. Hope that helps...let me know your progress with it. Good luck! (Also, you could update to RN 0.51 as another attempt to get your versions synced.)

Improve this answer
2
  • The other thing is that I played around with expo. Wonder if that messed things up
    – Sam Rao
    Commented Dec 12, 2017 at 2:01
  • You could just do npm install --save [email protected] But, I'd try building it with Xcode first. Have you done that yet? If you need help, let me know.
    – Jared Nelson
    Commented Dec 12, 2017 at 2:03
7

I had this problem for the longest time and none of the above solutions helped. I was in the middle of upgrading react native in a create-react-native-app project until I found out that not all versions of Expo support the latest React Native.

Found this page linked in the documentation that shows which version combinations of React Native, React, and Expo are officially supported:

Source: https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md

Editing the app.json and package.json files to match the corresponding versions and running npm install got everything working again.

Improve this answer
0
6

I am using a physical device, in my case this solved the problem:

  1. Uninstall the app
  2. lsof -i :8081
  3. kill -9 PID
  4. Rebuild the app (react-native run-android or react-native run-ios)
Improve this answer
2
  • Simply killing all PIDs from lsof -i :8081 and rebuilding did it for me on iOS Simulator.
    – Ronan Boiteau
    Commented May 18, 2019 at 18:57
  • The same here - tried Rimraf node_modules, npm start —reset-cache, etc - nothing worked. Then I did as above - uninstalled app, used taskkill /im node.exe and taskkill /f /PID(number given in last step, of existing PID), then react-native run-android. Worked a treat!
    – user1641906
    Commented Aug 26, 2019 at 15:25
5

In your build.gradle file add the following

implementation ("com.facebook.react:react-native:0.51.0") {
    force = true;
}

replace 0.51.0 with the version in your package.json

Improve this answer
0
5

I have tried the solutions above but adding this to AndroidManifest.xml seems to fix it.

  android:usesCleartextTraffic="true"
Improve this answer
3
  • 2
    It worked like charm.. this is the reason I will never like android.. There is always a magic word that solves your problems which have driven you crazy for many hours.
    – mcnk
    Commented Apr 1, 2020 at 13:28
  • It worked for me this time.
    – deva11
    Commented Nov 12, 2021 at 7:31
  • Yeap. this save my time!! thanks!
    – Tuan Huynh
    Commented Jul 30, 2023 at 14:45
4

Try installing the dependencies again. That worked for me-

1.) yarn/npm install
2.) yarn/npm start --reset-cache

Improve this answer
4

It happens sometimes when you try to run without closing the node server, in which the previous app was running, so try restarting React.To do so, just run the following commands:

1. To kill current processes
killall node -9 

2. To Start React  Native
react-native start 

3. Then Run android
react-native run-android
Improve this answer
1
  • Running this command also worked for me "killall node"
    – Seunope
    Commented Sep 10, 2020 at 20:39
4

For my case I'm facing it on iOS, and I've tried to reset and clear all cache using below command but failed too, despite many comments saying that the root cause is there is react packager running somewhere accidentally, I've restarted my mac and the problem still remained.

watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start --reset-cache

The solution is, to delete the build folder @ /ios/build, then execute react-native run-ios solved it

Improve this answer
3

For me it was due to react-native version in dependency section of package.json file. It was:

"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.0"
}

I chaged it to:

"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "0.52.0"
}

Now it works fine.

Improve this answer
0
3

In my case installing a new virtual device helped. Now I am using 1 device per app.

Improve this answer
0
3

The fix we did was to make sure the ANDROID_HOME and PATH variables were set up prior to the build.

First, run the below two commands then the build the app for the device.

export ANDROID_HOME=/Users/username/MyFiles/applications/androidsdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
Improve this answer
3

This is working for me :

react-native start --reset-cache
Improve this answer
2

For others with the same problem on iOS with CocoaPods:

I tried all of the solutions above, without luck. I have some packages with native dependencies in my project, and some of those needed pod modules being installed. The problem was that React was specified in my Podfile, but the React pod didn't automatically get upgraded by using react-native-git-upgrade.

The fix is to upgrade all installed pods, by running cd ios && pod install.

Improve this answer
2

Expo users - make sure your app.json sdk version and package.json expo version are (may be equal) compatible to each other.

Improve this answer
1
  • Thank you! This was the solution for a new expo user.
    – Jasper Blues
    Commented Feb 1, 2020 at 3:53
2

For me, who is running with a monorepo, there was a hidden react-native version inside yarn.lock. It was not present in any package.json, but was never deleted.

I removed that particular react-native version from yarn.lock, and did a

yarn install

This cleaned out alot of old stuff and made sure that things was working fine.

Improve this answer
1

I also had this issue using Expo and iOS Simulator. What worked for me was erasing the Simulator in Hardware > Erase All Content and Settings...

Improve this answer
1
  • I am pretty sure that this can be accomplished by just uninstalling the Expo app from the emulator. No need to everything.
    – Ajay Gupta
    Commented May 20, 2018 at 13:24
1

I have got the same issue while building my react native app for android and I did the following which worked for me.

The "JavaScript version 0.50.1" in the error console is the react-native version in your package.json file. Make sure it is the same version as "Native version 0.50.0" in the error console.

  1. I have Updated the react-native version to the "Native Version 0.50.0" as prompted in the error console.
  2. Rebuild the app react-native run-android.
Improve this answer
1

Possible Fix:

  1. Delete the package-lock.json
  2. Run: watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/haste-map-react-native-packager-* && rm -rf node_modules/&& npm install

If the problem persists, try to execute the project directly from the Xcode

This worked for me.

Improve this answer
1

In my case (NOT using expo & Android build)

package.json

"dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.2"
}

And app.json 

{
  "sdkVersion": "27"
}

resolved the issue

Improve this answer
1
1

I was trying to build and run a React Native app from WebStorm and ran into this problem. The simple solution for me was:

watchman watch-del-all

On macOS, if watchman is not already installed, install it using Homebrew:

brew install watchman
Improve this answer
1

In my case, I changed the expo version manually. I got the same issue because I forgot to update sdkVersion in app.json and babel-preset-expo in package.json

After that run: expo r -c to clear cache and start the app.

Improve this answer
1

This Answer is Published in 2020, Fix this Error in 3 steps:

First step: I changed the value of expo in package.json file to the latest supported version, according to expo documents(visit here).

Second step: I changed the value of sdkVersion in app.json file to the same value of expo in package.json.( equal number to last step).

Third step : I changed the value of react-native in package.json file to the same value of React Native Version , according to expo documents(visit here).

now your ready to go.

use npm install to install specified version of dependencies and then npm start to run the project

Improve this answer
1
1

I got this classing when TypeScript type definitions mismatched.

E.G react-native at 0.61.5 in dependencies and @types/react-native at 0.60.0 in devDependencies.

As soon as I updated devDependencies it worked. Didn't have to restart anything.

Improve this answer
1

edit your package.json for your javascript version

"react-native": "^0.50.1",

after run

npm install
Improve this answer
1
2

Not the answer you're looking for? Browse other questions tagged or ask your own question.