npm install fails with react 17.0.1 and react-native 0.64.0

[aboodtech]

Current behaviour

npm install react-native-paper fails with latest react-native release 0.64.0

Error is displayed when trying to install react-native-paper using npm

Expected behaviour

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR! peer react@"17.0.1" from react-native@0.64.0
npm ERR! node_modules/react-native
npm ERR! peer react-native@">=0.64.0-rc.0 || 0.0.0-" from @react-native-community/cli@5.0.1-alpha.1
npm ERR! node_modules/@react-native-community/cli
npm ERR! @react-native-community/cli@"^5.0.1-alpha.0" from react-native@0.64.0
npm ERR! react-native@"0.64.0" from the root project
npm ERR! 1 more (react-native-paper)
npm ERR! peer react@"^16.0.0 || ^17.0.0" from react-shallow-renderer@16.14.1
npm ERR! node_modules/react-shallow-renderer
npm ERR! react-shallow-renderer@"^16.13.1" from react-test-renderer@17.0.1
npm ERR! node_modules/react-test-renderer
npm ERR! dev react-test-renderer@"17.0.1" from the root project
npm ERR! 4 more (react-test-renderer, use-subscription, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0" from @callstack/react-theme-provider@3.0.5
npm ERR! node_modules/react-native-paper/node_modules/@callstack/react-theme-provider
npm ERR! @callstack/react-theme-provider@"^3.0.5" from react-native-paper@4.7.2
npm ERR! node_modules/react-native-paper
npm ERR! react-native-paper@"" 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.
npm ERR!
npm ERR! See /Users/xx/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xx/.npm/_logs/2021-03-15T10_46_15_026Z-debug.log

Code sample

npx react-native init MyTestApp
cd MyTestApp && npm install react-native-paper

Screenshots (if applicable)

What have you tried

yarn seems to work fine.

Your Environment

software	version
ios or android	both
react-native	0.64.0
react-native-paper	4.7.2
node	v14.15.1
npm or yarn	npm: 7.6.3
expo sdk

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• yarn (found: 7.6.3, latest: 1.22.10)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[hussainahmad]

+1 unable to install react-native-paper with latest react-native.

[kuasha420]

Yarn can install react native paper on a freshly generated RN64 Project .

[geovrisco]

Yarn can install react native paper on a freshly generated RN64 Project .

im using npm but get the same error, any workaround for this particular issue?

[raajnadar]

use yarn it will resolve many issues.

[kuasha420]

Very odd, I've just installed paper after creating a fresh project with typescript template.

[siof]

Using:
"react": "17.0.1"
"react-native": "0.64.0"
"react-native-paper": "^4.7.2"
"npm": "^6.14.11"

When trying to install dependencies (by using npm install) i'm getting:
@callstack/react-theme-provider@3.0.5 requires a peer of react@^16.3.0 but none is installed. You must install peer dependencies yourself.

react-theme-provider in version 3.0.5 is dependency of react-native-paper in version 4.7.2

I'm not sure but maybe this mismatch in required versions is causing problem.

[nalzayat]

Having this problem as well on a fresh new react-native ts template when using npm.

"react": "17.0.1"
"react-native": "0.64.0"
"react-native-paper": "^4.7.2"
"npm": "^7.7.6"

I used yarn instead and it worked.

[RishabhKarnad]

For those using npm 7, for now, these options seem to work

• Pass the --legacy-peer-deps flag when using npm commands
• Downgrade to npm 6 which is less strict with peer dependencies

Original answer on stackoverflow: https://stackoverflow.com/a/65568080

[AlanSl]

tldr: looks like this is a bug in NPM not an issue with react-native-paper, try adding --force to your npm install command for now (or use Yarn).

---

I think this issue isn't specific to react-native-paper, I'm getting the same from installing react-navigation.

It appears to be caused by (a bug in?) NPM 7's new strictness in handling peer dependencies:

• react-native-paper (and many others) says "I'm happy with any version of react" (peer dep react: "*")
  • NPM7 says "Okay, here's the latest, 17.0.2"
• react-native-paper (and many others) says "I'm happy with any version of react-native" (peer dep react-native: "*")
  • NPM7 says "Okay, here's the latest, 0.64.0"
• react-native 0.64.0 says "I specifically want react 17.0.1 please" (peer dep react: "17.0.1", it's 17.0.2 in the next release but that's not out yet)
  • NPM7 says "BUT WE'VE ALREADY INSTALLED 17.0.2! THIS IS A DISASTER" and crashes

Yarn in the same situation just installs React 17.0.1, and everyone is happy. I'd call this a bug in NPM and it looks like I'm not alone: NPM bug report npm/cli#3083 and PR npm/arborist#266

In the meantime, this current NPM7 behaviour can be temporarily bypassed by either:

• Passing --force, which outputs warnings instead of crashing (I'd try this first)
• Passing --legacy-peer-deps, which doesn't install any missing peer dependencies (like NPM <=6)

---

Update May 2021 - The NPM bug is still there, the above-linked PR failed to fix it, they've opened a new issue npm/cli#3171 so we still need to keeping using --force (or, switch to Yarn).

[bhargav29dev]

i was having same issue with npm

$ npm i react-native-paper
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR! peer react@"17.0.1" from react-native@0.64.0
npm ERR! node_modules/react-native
npm ERR! peer react-native@">=0.64.0-rc.0 || 0.0.0-" from @react-native-community/cli@5.0.1-alpha.2
npm ERR! node_modules/@react-native-community/cli
npm ERR! @react-native-community/cli@"^5.0.1-alpha.0" from react-native@0.64.0
npm ERR! react-native@"0.64.0" from the root project
npm ERR! 1 more (react-native-paper)
npm ERR! peer react@"^16.0.0 || ^17.0.0" from react-shallow-renderer@16.14.1
npm ERR! node_modules/react-shallow-renderer
npm ERR! react-shallow-renderer@"^16.13.1" from react-test-renderer@17.0.1
npm ERR! node_modules/react-test-renderer
npm ERR! dev react-test-renderer@"17.0.1" from the root project
npm ERR! 4 more (react-test-renderer, use-subscription, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0" from @callstack/react-theme-provider@3.0.5
npm ERR! node_modules/react-native-paper/node_modules/@callstack/react-theme-provider
npm ERR! @callstack/react-theme-provider@"^3.0.5" from react-native-paper@4.8.1
npm ERR! node_modules/react-native-paper
npm ERR! react-native-paper@"" 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.
npm ERR!
npm ERR! See C:\Users\DELL\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\DELL\AppData\Local\npm-cache_logs\2021-05-04T12_20_14_663Z-debug.log