Can't upgrade React-Native project due dependencies - react-native

Question

I am trying to update my RN project from 0.62.2 to the latest one (currently 0.63.3).
I am just running npm update and get errors:
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"16.13.1" from react-native#0.63.3
npm ERR! node_modules/react-native
npm ERR! react-native#"^0.63.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Before running npm update I had ran npx npm-check-updates -u and got the following:
#react-native-community/netinfo ^5.9.5 → ^5.9.9
#react-navigation/drawer ^5.8.6 → ^5.11.4
#react-navigation/native ^5.7.1 → ^5.8.10
#react-navigation/stack ^5.7.1 → ^5.12.8
#types/react ^16.9.43 → ^17.0.0
amazon-cognito-identity-js ^3.3.3 → ^4.5.5
aws-amplify ^3.0.21 → ^3.3.10
axios ^0.19.2 → ^0.21.0
graphql ^0.11.7 → ^15.4.0
graphql-tag ^2.10.4 → ^2.11.0
moment-timezone ^0.5.31 → ^0.5.32
react ^16.11.0 → ^17.0.1
react-native ^0.62.2 → ^0.63.3
react-native-base64 0.0.2 → 0.1.0
react-native-gesture-handler ~1.5.0 → ~1.9.0
react-native-reanimated ~1.4.0 → ~1.13.2
react-native-safe-area-context ^0.7.3 → ^3.1.9
react-native-screens 2.0.0-alpha.12 → 2.15.0
react-native-simple-crypto ^0.2.13 → ^0.2.15
react-native-vector-icons ^6.7.0 → ^7.1.0
react-navigation ^4.4.0 → ^4.4.3
#babel/core 7.8.7 → 7.12.9
#babel/runtime 7.8.7 → 7.12.5
babel-jest 24.9.0 → 26.6.3
metro-react-native-babel-preset 0.56.4 → 0.64.0
react-test-renderer 16.9.0 → 17.0.1
OK, I summarise from the error that react#^17.0.1 is wrong for react-native#0.63.3 which requires react#16.13.1 but this was produced by npx npm-check-updates -u - why it makes incompatible deps tree?..
If I change manually react version to "^16.0.0", npm install fails with:
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"16.13.1" from react-native#0.63.3
npm ERR! node_modules/react-native
npm ERR! react-native#"^0.63.3" from the root project
Why "react#16.14.0"?! From where?
I just can't understand how all this s..tuff works.. Please, suggest.
My current package.json:
{
"name": "Proj",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/netinfo": "^5.9.9",
"#react-navigation/drawer": "^5.11.4",
"#react-navigation/native": "^5.8.10",
"#react-navigation/stack": "^5.12.8",
"#types/react": "^17.0.0",
"amazon-cognito-identity-js": "^4.5.5",
"aws-amplify": "^3.3.10",
"axios": "^0.21.0",
"graphql": "^15.4.0",
"graphql-tag": "^2.11.0",
"i18n-js": "^3.8.0",
"moment-timezone": "^0.5.32",
"react": "^16.0.0",
"react-native": "^0.63.3",
"react-native-avatar-social": "0.0.3",
"react-native-base64": "0.1.0",
"react-native-gesture-handler": "~1.9.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-localize": "^2.0.1",
"react-native-reanimated": "~1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "2.15.0",
"react-native-simple-crypto": "^0.2.15",
"react-native-tab-view": "^2.15.2",
"react-native-tab-view-viewpager-adapter": "^1.1.0",
"react-native-uuid-generator": "^6.1.1",
"react-native-vector-icons": "^7.1.0",
"react-native-video": "^4.4.5",
"react-native-viewpager": "^0.2.13",
"react-native-zeroconf": "github:atlascoder/react-native-zeroconf",
"react-navigation": "^4.4.3",
"rn-fetch-blob": "^0.12.0"
},
"devDependencies": {
"#babel/core": "7.12.9",
"#babel/runtime": "7.12.5",
"babel-jest": "26.6.3",
"metro-react-native-babel-preset": "0.64.0",
"react-test-renderer": "17.0.1"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
UPDATE
Following #anthony-marino suggestion I made manual dependencies update by update helper, and the I returned to the issue that moved my to upgrade!!
npm ERR! Found: react#16.13.1
npm ERR! node_modules/react
npm ERR! react#"16.13.1" from the root project
npm ERR! peer react#"^16.0" from #react-native-community/viewpager#4.2.1
npm ERR! node_modules/#react-native-community/viewpager
npm ERR! peer #react-native-community/viewpager#"*" from react-native-tab-view-viewpager-adapter#1.1.0
npm ERR! node_modules/react-native-tab-view-viewpager-adapter
npm ERR! react-native-tab-view-viewpager-adapter#"^1.1.0" from the root project
npm ERR! 15 more (#react-navigation/core, #react-navigation/drawer, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"16.11.0" from react-native-zeroconf#0.12.3
npm ERR! node_modules/react-native-zeroconf
npm ERR! react-native-zeroconf#"github:atlascoder/react-native-zeroconf" from the root project
npm ERR!
And the thing that runs me out..
I have a component from #react-native-community/viewpager and why if it requires peerDep react#"^16.0" - why it doesn't accept react#16.13.1. The ^16.0 means all fresher that 16.*, doesn't it?! When I check ^16.0 on npm semver calculator - it shows me 16.13.1 as suitable..
WORKAROUND
On trapping to this trouble while update:
Delete node_modules and package-lock.json
npm i
When npm i fails - remove failing dependencies
After completion of npm i - manually install removed dependencies

Answer 1

From your logs: react-native 0.63.3 needs react#"16.13.1", but found react#"^17.0.1". Just downgrade your react via npm install react#16.13.1 and try npm install again. It should work without errors. If you run npm outdated you'll see that "react" is outdated. But it's unlikely that you're going to have all your packages in the latest version.

Answer 2

so I've also run into this problem when I migrated from RN 0.63.1 to 0.64.1 so I solved it in this way:
Step run npx react-native upgrade for me it updated react and react-native
Then I've updated these dependencies mannually:
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "17.0.1"
you could use this tool to see what changes did these command npx react-native upgrade and what changes you have to do it manualy
https://react-native-community.github.io/upgrade-helper/?from=0.63.1&to=0.64.1
Then run npm install --force to update package-lock.json with new dependency that you've added manually.
If you have tests with Jest probably then you have to adjust a few things as well go to jest.configs.js and make sure you have here react-native and #react-native as well
transformIgnorePatterns: [
'node_modules/(?!(jest-)?react-native|#react-native|#react-native-community)',
],
and probably you'll have some problem with these mock as well
// The old way
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
// Here path was updated
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
Now you should be good to go, this example was for upgrading RN from 0.63.1 to 0.64.1 but it could work for you as well.
p.s I'm using node -v 14.15.4 and npm -v 7.7.6 you may have less problem if you're using npm v6

Answer 3

This solved my problem.
npm install #react-native-community/masked-view --force

Answer 4

I had to use :
npm i --legacy-peer-deps