React Native version mismatch when upgrading from 59.5 from 60.4 - react-native

After upgrading to the newer version of react native (60.4) following all instructions on https://react-native-community.github.io/upgrade-helper/
But still getting this error message:
console.error: "React Native version mismatch.
JavaScript version: 0.57.8
Native version: 0.60.4
Make sure that you have rebuilt the native code. If the problem persists try clearing the Watchman and packager caches with 'watchman watch-del-all && react-native start --reset-cache'.
Here's a screenshot
The point is that I was on version 0.59.5 before upgrading.
Already tried:
- Downgrading to 60.0
- Removing node_modules/
- Removing react-navigation (maybe it was using another version of RN, but it is on version 3.11.1 now)
- Another develop environment
- Deleting entire folder and cloning from remote
- implementation ("com.facebook.react:react-native:0.60.4") { force = true }
Here is my package.json dependencies:
"dependencies": {
"#react-native-community/async-storage": "^1.6.1",
"native-base": "^2.13.4",
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-animatable": "^1.3.0",
"react-native-camera": "^3.0.1",
"react-native-firebase": "^5.5.6",
"react-native-gesture-handler": "^1.3.0",
"react-native-masked-text": "^1.12.5",
"react-native-material-menu": "^0.6.6",
"react-native-push-notification": "^3.1.8",
"react-native-qrcode-scanner": "^1.2.1",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "3.11.1"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/runtime": "^7.5.5",
"#react-native-community/eslint-config": "^0.0.5",
"babel-eslint": "^10.0.2",
"babel-jest": "^24.8.0",
"documentation": "12.1.1",
"eslint": "^6.1.0",
"eslint-config-airbnb-base": "^13.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-native": "^3.7.0",
"flow-bin": "^0.98.0",
"jest": "^24.8.0",
"jetifier": "^1.6.3",
"metro-react-native-babel-preset": "^0.55.0",
"react-test-renderer": "16.8.6"
},
Node version: 12.8.0
Yarn version: 1.17.3
I was able to run after trying watchman watch-del-all && react-native start --reset-cache but all vector-icons were crashed and all firebase-analytics events resulted in app crashing.

Solution was creating a project using react-native init MyProject and them add the libraries in package.json, but react-native-vector-icons still need linking.
The only problem is that custom fonts doesn't seen to work at all!

Related

How to upgrade react-native version from 0.68.0 to latest version 0.69.1? I have tried but got an error

I have tried to upgrade react native version from 0.68.0 to latest version 0.69.1, by using this command npx react-native upgrade, it throws an error below is picture link (error)
https://drive.google.com/file/d/1nwKDW0r5-LrJhazqXJaBN70SzFg2fsXY/view?usp=sharing
"dependencies": {
"#react-native-async-storage/async-storage": "^1.17.7",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"axios": "^0.27.2",
"react": "17.0.2",
"react-native": "0.68.0",
"react-native-bootsplash": "^4.2.3",
"react-native-camera": "^4.2.1",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.15.0",
"react-native-svg": "^12.3.0",
"react-native-svg-transformer": "^1.0.0",
"react-native-toast-message": "^2.1.5",
"react-native-vector-icons": "^9.2.0",
"react-redux": "^8.0.2",
"redux-thunk": "^2.4.1"
},
Please try it below steps maybe it works.
-- Delete node modules
Also,go to IOS folder & delete pods folder & podfile.lock
-- Then do the:
npm install,
cd ios, pod install,
-- then do the :
npx react-native upgrade
or else
you can define specific version also, like
npx react-native upgrade 0.69
it works.

React native 0.64 iOS release build stuck on 'Bundle React native code and images'

Description
Hello. Since I have updated my react native project from 0.63.4 to 0.64, I fail to build it on iOS in release mode.
The build block on the "Bundle React Native code and images" phase and never ends.
I have tried to:
watchman watch-del-all, uninstall and reinstall watchman
deintegrate and setup cocoapods
use react-native upgrade
upgrade by hand with react native upgrade helper
Everything works as expected on Android and on iOS debug mode.
build return :
Run custom shell script 'Bundle React Native code and images'
this build phase never ends
React Native version:
System:
OS: macOS 11.2.3
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU # 2.30GHz
Memory: 290.03 MB / 8.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK:
Android NDK: 20.0.5594570
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.7199119
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Java: 11.0.9 - /usr/bin/javac
npmPackages:
#react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.64.0 => 0.64.0
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
Update a project to RN 0.64 using ncu and npm install
Update every single file one by one using react native grade helper
Clean build-cache, watchman watch-del-all
Try to compile on Release mode in the simulator or real device
Expected Results
Build successfully
Snack, code example, screenshot, or link to a repository:
package.json:
{
"name": "wallstreat_bet",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#bankify/react-native-animate-number": "^0.2.1",
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-firebase/analytics": "^11.4.1",
"#react-native-firebase/app": "^11.4.1",
"#react-native-firebase/dynamic-links": "^11.4.1",
"#react-native-firebase/in-app-messaging": "^11.4.1",
"#react-native-firebase/messaging": "^11.4.1",
"#react-navigation/bottom-tabs": "^5.11.10",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.4",
"#stomp/stompjs": "^6.1.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"react": "17.0.2",
"react-native": "0.64.0",
"react-native-camera": "^3.43.6",
"react-native-confetti-cannon": "^1.5.2",
"react-native-elements": "^3.4.1",
"react-native-fbsdk": "^3.0.0",
"react-native-flash-message": "^0.1.23",
"react-native-gesture-handler": "^1.10.3",
"react-native-htmlview": "^0.16.0",
"react-native-permissions": "^3.0.3",
"react-native-progress-circle": "^2.1.0",
"react-native-qrcode-generator": "^1.2.2",
"react-native-qrcode-scanner": "^1.5.4",
"react-native-reanimated": "^2.1.0",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.1.1",
"react-native-sound": "^0.11.0",
"react-native-splash-screen": "^3.2.0",
"react-native-vector-icons": "^8.1.0",
"react-native-webview": "^11.4.3",
"react-navigation": "^4.4.4",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
"redux-persist": "^6.0.0",
"reselect": "^4.0.0",
"text-encoding": "^0.7.0",
"uuid-random": "^1.3.2"
},
"devDependencies": {
"#babel/core": "^7.14.0",
"#babel/runtime": "^7.14.0",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.25.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
podfile:

Does publishing to NPM add dependencies?

The package react-canvas-draw has the following in its package.json on GitHub:
"dependencies": {
"catenary-curve": "^1.0.1",
"lazy-brush": "^1.0.1",
"prop-types": "^15.6.2",
"resize-observer-polyfill": "^1.5.0"
},
"peerDependencies": {
"react": "16.x"
},
"devDependencies": {
"all-contributors-cli": "^5.4.1",
"babel-eslint": "^7.2.3",
"css-loader": "^0.28.9",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.1.1",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.34.1",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"gh-pages": "^1.1.0",
"nwb": "0.21.x",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"style-loader": "^0.19.1"
},
However, when I view the package on NPM, I see:
"dependencies": {
"catenary-curve": "^1.0.1",
"codecov": "^3.5.0", // <-- note
"coveralls": "^3.0.4", // <-- note
"lazy-brush": "^1.0.1",
"prop-types": "^15.6.2",
"resize-observer-polyfill": "^1.5.0"
},
"peerDependencies": {
"react": "16.x"
},
"devDependencies": {
"all-contributors-cli": "^5.4.1",
"babel-eslint": "^7.2.3",
"css-loader": "^0.28.9",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.1.1",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.34.1",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"gh-pages": "^1.1.0",
"nwb": "^0.21.5",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"style-loader": "^0.19.1"
},
I noted above the two additional packages that I see: codecov and coveralls. They're also displayed in the user-friendly site.
Why are these in the NPM package entry, but not in the GitHub source?
My only thought: the words codecov and coveralls only really exist in the .travis.yml file:
before_install:
- npm install codecov coveralls
- npm install nwb
...So, npm publish is detecting the npm install commands and adding dependencies to package.json? I can't find anything to support this, but I don't have any better ideas.
You're correct in your assumption, executing npm install as of NPM v5 will add them to the package.json as dependencies. The subsequent npm publish that travis runs is then including this "updated" dependency list in the package.
It's interesting that they're shipping with those packages, as they're primarily "dev dependencies" so don't need to be included in the distributed bundle. You may want to open an issue or pull request that either declares these as dev dependencies in the package.json or includes a --save-dev in the .travis.yml.
(Though the latter would not be that great either as it would "add" those as dev deps of the published module that are not reflected on the github source).

React Native - Unable to resolve module `#babel/runtime/helpers/interopRequireDefault`

I upgraded my react native application from 0.48.3 to 0.59.8 everything works fine until lauching the emulator . Then this error appears :
error: bundling failed: Error: Unable to resolve module
`#babel/runtime/helpers/interopRequireDefault` from
`E:\als\variant\generic\index.android.js`: Module
`#babel/runtime/helpers/interopRequireDefault` does not exist in the
Haste module map
Here is my Package.json :
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#babel/runtime": "^7.0.0-beta.55",
"babel-loader": "^8.0.5",
"content-disposition": "^0.5.2",
"core-js": "^3.0.1",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-loader": "^2.4.5",
"react-native": "0.59.8",
"react-redux": "^5.0.6",
"react-router-dom": "^5.0.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
"#babel/plugin-transform-block-scoping": "^7.0.0",
"#babel/plugin-transform-flow-strip-types": "^7.4.4",
"#babel/plugin-transform-react-jsx-source": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.4.4",
"#babel/preset-env": "^7.4.3",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-preset-react-native": "^5.0.2",
}
I have tried all solutions found in similar questions but not working .Have you any idea please ?
Try to reset cache with
npm run start --reset-cache
I faced this same issue and no solutions mentioned on the threads worked. However I was finally able to solve it by removing and re-installing the global version of react-native:
npm uninstall react-native -g
npm install react-native#latest -g
And the error then disappeared when I re-ran:
react-native start

React native upgrade from babel 6 to babel 7

What would be the steps to upgrade from babel 6 to babel 7 an existing react-native project?
These are the old dependencies:
"dependencies": {
.........
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"prop-types": "^15.5.10",
"react": "16.3.1",
"react-native": "0.55.4",
"react-redux": "5.0.7",
"redux": "^4.0.0",
"redux-actions": "^2.6.1",
"redux-mock-store": "^1.5.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.1.0",
},
"devDependencies": {
"babel-eslint": "^8.2.2",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"eslint": "^4.18.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "6.1.1",
"eslint-plugin-react": "^7.4.0",
"gulp": "^3.9.0",
"gulp-eslint": "4.0.2",
"gulp-mocha": "6.0.0",
"jest": "^23.5.0",
.....
},
What steps do you have to follow to make this update?
How should the new dependencies looks like?
It is not very clear for me (after reading the babel doc) what I should do to make this upgrade, commands to run and what should be added in dependencies and what in devDependencies.
Also it is not very clear for me what is the difference between babel 6 and babel 7 regarding what is happening with the JS code in a react-native project.
Please don't respond with just links to babel doc or to react-native 0.57 change log.
I would need at least some basic steps to do this upgrade and an example of a package.json of a RN project based on babel 7.
Short answer:
run npx babel-upgrade
(then you can take a look in package.json to check what changed)
Long answer:
For RN 0.57.x after reading the babel and babel-upgrade docs I realized it was enough to have all the old babel dependencies inside devDependencies for my project:
"dependencies": {
.........
"react": "16.3.1",
"react-native": "0.55.4",
},
"devDependencies": {
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"react-native": "0.55.4",
"babel-eslint": "^8.2.2",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
.....
},
1) I used npx and babel-upgrade (npx is already included in npm versions >= 5.2.0)
If you have older npm versions you have to install npx globally.
npx lets you run babel-upgrade without installing it locally.
2) I ran npx babel-upgrade ( without the --write option) to see how the upgrade will affect my package.json deps)
3) I ran npx babel-upgrade --write
4) I set RN version to 0.57.1 and changed the babel-preset dependency from "babel-preset-react-native": "^5", to "metro-react-native-babel-preset": "^0.45.0",and .babelrc configuration to:
{
"presets": ["module:metro-react-native-babel-preset"]
}
as written in the RN change log instructions.
Now package.json looks like this:
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.1",
.......
}
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-do-expressions": "^7.0.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-bind": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.0.0",
"#babel/plugin-proposal-pipeline-operator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-syntax-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-flow": "^7.0.0",
"#babel/register": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-preset-react-native-stage-0": "^1.0.1",
.....
}
I am not sure if all the new dependencies added by gradle-upgrade are needed but the project builds and runs ok for both android and ios.
If you find a better solution or improvements for this babel update please add a comment or add a new answer, I will be happy to update my answer or accept a new better one.
Sources:
https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#057
https://github.com/babel/babel-upgrade
For RN 0.58.6 I noticed I do not need so many babel deps. I noticed this creating a new project with a react-native init command.
My package.json file looks now like this:
{
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.6",
// ....
},
"devDependencies": {
"#babel/core": "^7.0.0-0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.53.0",
"react-test-renderer": "16.6.3",
// ....
},
"jest": {
"preset": "react-native",
// ...
}
}
NOTE:
For IOS: I was able to build it in IOS without any react/react-native deps in pod file. I added/re-added those inside Linked Frameworks and Libraries section
Use babel-upgrade.
You can try using babel-upgrade in order to automatically upgrade your Babel dependencies.
It's very easy to use, even without installing it globally.
I recommend having a clean working directory (no unstaged changes) and simply run the following command:
npx babel-upgrade --write
This will update your package.json and your .babelrc files with the correct Babel versions and packages.
The --write command just tells the tool to save the changes to disk. That's why I suggested having a clean working directory so you can review the changes with git diff. If you omit --write it will just show the desired changes in the console.
You can see more information at https://github.com/babel/babel-upgrade.
For anyone having this problem in 2021 :
npm install --save-dev #babel/core #babel/cli