React-native: React-native version mismatch 0.59.4

[Linoa65]

🐛 Bug Report

Hello !

We are facing issue with react-native. I recently upgrade the version of react native from 0.57.3 to 0.59.4 (for different modules needs).
We test our application on multiple smartphones (android and IOS) and we encounter this error :

Just for information, our package.json is up to date, and only ONE device get this issue. Impossible to reproduce on release mode, and on other devices (android and IOS).

We already tried everything possible like many people which had this issue :

• Delete all caches (gradle, watchman, RN, phone, node)
• Tried to force RN versions on build.gradle file
• Tried to totally uninstall app, then install release, then uninstall and then install debug version.

To Reproduce

We don't know how to reproduce it. It happens after we upgrade our modules, then try to run the app on other specific device.

Expected Behavior

We expected to run the app, like usual.

Code Example

package.json

{
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "moment": "2.24.0",
    "prop-types": "latest",
    "react": "16.8.3",
    "react-native": "0.59.4",
    "react-native-android-badge": "0.4.3",
    "react-native-animatable": "1.3.0",
    "react-native-audio": "4.2.2",
    "react-native-camera": "2.4.0",
    "react-native-document-picker": "git+https://[email protected]/Elyx0/react-native-document-picker#v3",
    "react-native-easy-toast": "1.1.0",
    "react-native-fabric": "0.5.2",
    "react-native-firebase": "5.3.1",
    "react-native-fontawesome": "6.0.1",
    "react-native-fs": "2.13.2",
    "react-native-image-crop-picker": "0.21.3",
    "react-native-image-grid": "1.0.0",
    "react-native-image-resizer": "^1.0.1",
    "react-native-incall-manager": "3.2.2",
    "react-native-modal": "6.5.0",
    "react-native-notifications": "1.1.20",
    "react-native-permissions": "1.1.1",
    "react-native-sound": "0.10.9",
    "react-native-svg": "8.0.8",
    "react-native-video": "4.3.1",
    "react-native-voximplant": "1.6.0",
    "react-navigation": "2.18.2",
    "react-redux": "5.1.0",
    "redux": "4.0.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "babel-jest": "23.6.0",
    "eslint": "^5.9.0",
    "eslint-plugin-react": "^7.11.1",
    "har-validator": "5.1.3",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.1",
    "node": "11.13.0",
    "react-test-renderer": "16.6.0-alpha.8af6728"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts"
    ]
  },
  "jest": {
    "preset": "react-native"
  }
}

Environment

React Native Environment Info:
   System:
     OS: Windows 10
     CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
     Memory: 8.75 GB / 15.93 GB
   Binaries:
     npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
     Watchman: 4.9.4 - C:\Users\Marvyn\Documents\watchman\watchman.EXE
   IDEs:
     Android Studio: Version  3.2.0.0 AI-181.5540.7.32.5056338

[JKCooper2]

Do a search inside of your yarn or npm lock file for 0.57.3 and see which library is using that version. I've had some issues with react-native-video installing its own version of react-native which conflicted, so I ended up running a postInstall script that would delete that folder from node_modules/react-native-video

[Linoa65]

Ok thank you I will try it, but it is strange to get this error only on one phone, because we tried to connect 2 phones and install the same app and the error is only on one of them (always the same). This made me think it's a cache phone problem or something like that. I will try some things and go back to tell you what happens ! :)

[wbercx]

Do you happen to have multiple productFlavors/builds of your app installed on the device at once?

[Linoa65]

I don't think so, we delete the app each time before installing it again on device.

[MarvynORourke]

Hello, I work with Linoa65 and I took the tests a little further. I reset the phone on which the error was displayed and it turns out that even after that, it doesn't work, we have the same error. I also tried to delete our project and re-clone it but it's always the same. Computers have also been changed to change the project, but nothing is working.

[Linoa65]

After investigation, it seems this bug is appearing on all devices/emulators only on android 9. The app run successfully on android 8 (API 26/27) but mismatch on android 9 (API 28).

[LukePenkava]

After investigation, it seems this bug is appearing on all devices/emulators only on android 9. The app run successfully on android 8 (API 26/27) but mismatch on android 9 (API 28).

Amazing, thanks a lot. I was trying to fix this for two days. No idea it would be related to Android version in Simulator.

[felipevlourenco]

After investigation, it seems this bug is appearing on all devices/emulators only on android 9. The app run successfully on android 8 (API 26/27) but mismatch on android 9 (API 28).

Amazing, thanks a lot. I was trying to fix this for two days. No idea it would be related to Android version in Simulator.

Also in the same situation for couple days! Thanks!!

[sardmendoza]

Can confirm that this also happens to actual device (Samsung S9) running on Android 9 (API 28).

[ghost]

I can also reproduce this issue on my actual device (Vivo 1808) on Android 8.1.0, so this isn't limited to something in just API 28. But it works fine on an API 26 emulator.

[kelset]

Hey everyone - thanks for opening this issue. It looks like there is something weird going on here, but I don't know if it's really a react-native "caused" issue; it seems to be related to some misconfiguration of complex project that went through an upgrade process.

This is also super weird:

After investigation, it seems this bug is appearing on all devices/emulators only on android 9. The app run successfully on android 8 (API 26/27) but mismatch on android 9 (API 28).

What @JKCooper2 said on top seems the right way to debug this:

Do a search inside of your yarn or npm lock file for 0.57.3 and see which library is using that version. I've had some issues with react-native-video installing its own version of react-native which conflicted, so I ended up running a postInstall script that would delete that folder from node_modules/react-native-video

And given that there has not being any feedback about it, I'd suggest you try to look at it closely at the .lock file again.

Maybe cleaning up all the caches could help?

rm -rf node_modules;
rm -rf $TMPDIR/react-native-packager-cache-*;
rm -rf $TMPDIR/metro-*;
rm -rf $TMPDIR/react-*;
rm -rf $TMPDIR/haste-*;
watchman watch-del-all;
yarn;
yarn start --reset-cache; (for bundler)

Also, please create a repro so that we can take a closer look at this issue, as it stands now there isn't much we can do and because of that I'd close this if we don't have one.

[sardmendoza]

Adding android:usesCleartextTraffic="true" to AndroidManifest.xml seems to fix the issue on my end.

[MarvynORourke]

It works for me, thank you.

[kelset]

Ok then, I'll close this for now. If the issue re-surfaces please provide a repro so that it can be investigated properly 🙇‍♂️

[LaurentCHRETIENMT]

adding the missing "react-native": "0.57.1" to app.json, (with sdk version set to 31), solved (at last) the problem in my case (expo client). (as displayed in https://stackoverflow.com/questions/53402555/expo-react-native-version-mismatch-error-javascript-version-0-55-4-native). (More generally, the right matching of those two versions seems thus to be a crucial point).

[LaurentCHRETIENMT]

it resulted apparently also in solving an other somewhet strange error with "UIManager function undefined" (for me playTouchSound ..) occuring when touching the screen. (that I could in the meantime keep aside putting a ()=>{} in it at the very beginning in App.js .. " require('react-native').UIManager.playTouchSound=()=>{}; " )

[bryanstearns]

I also had this problem, after upgrading from 0.55.3 to 0.59.8 using rn-diff-purge; it only happens on one Android 9 device, not on Android 9 simulators or an Android 8 device. None of the things that @Linoa65 tried worked for me either, nor did the android:usesCleartestTraffic="true" thing (and it's already in my android/app/src/debug/AndroidManifest.xml, since that file was a change shown by rn-diff-purge during my upgrade).

I went back and reexamined each of the changes that rn-diff-purge had suggested, and realized that I'd missed three: I hadn't updated the gradle-wrapper.jar or gradle-wrapper.properties, and also hadn't added the new DEFAULT_JVM_OPTS values in the gradlew script. Fixing these things made the problem go away for me.

[bencmack]

Upgrading from 0.56.0 to 0.59.9 had me facing this problem and nothing I found around the internet helped. I first did the steps identified by @bryanstearns and updated the android/gradle/wrapper/gradle-wrapper.jar distributionUrl based on rn-diff-purge as well as the line for DEFAULT_JVM_OPTS in android/gradlew.bat.

That still didn't fix my issue but I kept those changes and then followed @sardmendoza's advice and added android:usesCleartextTraffic="true" to my AndroidManifest.xml within the _Application_ tag where you find android:name, android: label, android:icon etc.

After that I closed all of terminals and deleted the app from the emulator and ran everything again and it worked! No more version mismatch error. I also did not need to downgrade my simulator from Android 9.

[anthowm]

@sardmendoza this advice save my day too 👍

[garfieldnate]

I'm encountering this issue on iOS with the combination of expo 33 and RxDB as dependencies.

[bryanstearns]

I just went through another battle with this, on Android: this time, the version mismatch box seemed to be caused by my having added main and debug network_security_config.xml files and referenced them from my main and debug AndroidManifest.xml files (our app needs to talk to S3 in cleartext, and developer host machines when developing against real devices). I banged my head against this for a while before deciding it was OK to get rid of both network_security_config.xml files and just added android:usesCleartextTraffic="true" to both manifests.

The thing that really bugs me about this problem is that I know that "Native version" always gives the react-native package version from my package.json, but I have no clue where the Javascript version is coming from - it's 0.57.3, which I guess was the version we started with before upgrading RN, but there aren't any references to it in my sources. And why should the message go away when I do network security configuration differently? (Please add comments if you can explain any of this!)

[al-exe]

Adding android:usesCleartextTraffic="true" to AndroidManifest.xml seems to fix the issue on my end.

I have absolutely no idea why this works, but it worked. Thank you x1000000

[tsvaditya27]

If you are using expo, all you have to do is

sudo expo install react-native

[RicoDevelop]

I update the react-native version: 0.57.4 to 0.59.8 and i getting the following message "React-Native Version Mismatch"

This solution works for me:

1.- In the folder of the project, update all the code react-native in the Android Studio:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

2.- Go to Android Studio and FILE->>INVALIDATE CACHES/RESTART
3.- In Android Studio, BUILD->>CLEAN PROJECT
4.- In Android Studio, BUILD->>REBUILD PROJECT
5.- Delete App in simulator or Devices
6.- Run...
I hope to help you!

[erick4556]

@RicoDevelop I tried and nothing, I have the same error: React-native version mismatch

[radneran]

If you are using expo, all you have to do is

sudo expo install react-native

Faced this problem when upgrading from expo SDK 34 to 35. I ran expo install react-native as it suggested in the command line and this issue popped up. Tried clearing everything but nothing worked.

The only thing that worked was changing react-native version in package.json from "^0.61.2" to "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz". Seems expo maintains compatible react-native versions in their respective SDK repos. Still, find it weird that expo install didn't retrieve the compatible version.

[Biplovkumar]

Adding android:usesCleartextTraffic="true" to AndroidManifest.xml seems to fix the issue on my end.

Thanks, You saved my day .
Sol:-
android:usesCleartextTraffic="true"

[foloinfo]

Don't forget to update app.json file if you are using Expo.