React 17 Compatibility

[jmkolbe]

Hello,
I'm new to React and React Native, so please bear with me if this a dumb question.
I started a new project, which came with

"react": "17.0.1",
"react-native": "0.64.0"

and when I followed the official documentation on adding navigation, I ran the suggested command

npm install @react-navigation/native @react-navigation/stack

This command failed with

npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0" from @react-native-community/masked-view@0.1.10
npm ERR! node_modules/@react-native-community/masked-view
npm ERR!   peer @react-native-community/masked-view@">= 0.1.0" from @react-navigation/stack@5.14.3
npm ERR!   node_modules/@react-navigation/stack
npm ERR!     @react-navigation/stack@"*" from the root project

I then looked for react-native-community/masked-view, which led me to https://www.npmjs.com/package/@react-native-community/masked-view, where it says the package is at version 0.1.0. There was a link to a repo though - this one.
Here, the latest release is v0.2.3, well above the 0.1.0. Coincidentally, this version claims to fix: peerDependencies support React 17.

There are two questions: Is @react-native-community/masked-view indeed the same thing as the @react-native-masked-view/masked-view from this repo?
If so, why are the version numbers so different? Otherwise, why does the NPM page link here?

[userException]

Getting the same error

[jpark0506]

me too...

[mibmol]

Same here

[shrutiraoniit25]

I am getting the same error ...Is there any solution to run I am new to react native and been stuck with this for days..

[Naturalclar]

should be fixed in v0.2.3
please use the latest version @react-native-masked-view/masked-view (note the change in namespace)

[jmkolbe]

Thanks for your response.
However, if one is not using masked-view directly, but via @react-navigation/stack, how does one resolve this dependency?

edit: to me it looks like @react-navigation/stack depends on @ react-native-community/masked-view

[nechmads]

Same error. Can't install @react-navigation/stack as it relies on @react-native-community/masked-view.
Anyone managed to find a way to fix this?

[jmkolbe]

To make matters worse, https://github.com/react-navigation/stack is archived.
Perhaps the way to handle navigation proposed in the React Native documentation isn't quite "best practice".

[markbennett1973]

https://github.com/react-navigation/stack has been archived, but replaced by https://github.com/react-navigation/react-navigation/tree/main/packages/stack. This says to install using npm install @react-navigation/stack@next

But that says to install @react-navigation/native using npm install @react-navigation/native@next. So I've done that, and now have version 6.0.0-next.1 of @react-navigation/native.

But now when I run npm install @react-navigation/stack@next it tells me it needs @react-navigation/native@"^6.0.0"

mark@Marks-MBP TestProject % npm install @react-navigation/stack@next
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: testproject@0.0.1
npm ERR! Found: @react-navigation/native@6.0.0-next.1
npm ERR! node_modules/@react-navigation/native
npm ERR!   @react-navigation/native@"^6.0.0-next.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @react-navigation/native@"^6.0.0" from @react-navigation/stack@6.0.0-next.8
npm ERR! node_modules/@react-navigation/stack
npm ERR!   @react-navigation/stack@"6.0.0-next.8" from the root project

So it looks to me like react-navigation/stack is saying it needs ^6.0.0 of react-navigation/native, but I've got 6.0.0-next.1, which doesn't count.

I've successfully installed react-navigation/stack by telling npm to ignore that unmet dependency: npm install @react-navigation/stack@next --force. But I still get errors trying to run any of the code samples, and don't really know if it's because of this dependency mismatch or something else I've done wrong.

Interestingly, the example on https://reactnavigation.org/docs/6.x/hello-react-navigation which you can run in Snack has the same problem resolving the dependencies in package.json, and won't run at all.

It looks to me as though we just have to sit and wait for the package maintainers to sort out their dependencies, and for the React Native documentation maintainers to update their instructions around navigation.

[markbennett1973]

Hmm - after trying to go back to v5.x of react-navigation to see if that worked, I came across react-navigation/react-navigation#9459, so then tried installing the react-navigation dependencies using the yarn instructions from https://reactnavigation.org/docs/6.x/getting-started instead of npm, and it seems to be working just fine:

yarn add @react-navigation/native@next
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
npx pod-install ios
yarn add @react-navigation/stack@next @react-native-masked-view/masked-view

[symap]

I just installed all the React Navigation packages, including @react-native-community/masked-view (v0.1.10), using yarn instead of npm and it worked.

[gabrielrufino]

Same problem. Any update?

[dirtyvu255]

React Navigation package

How to install all the package?
Tks for reading

[leoaraujocosta]

Hey guys, any update on this?

[muhammada86]

Anyone able to solve this? Still having porblem installing @react-native-community/masked-view , and react navigation stack... any update on that?

[dirtyvu255]

I use Yarn add instead of npm install! Its work <3

[dirtyvu255]

Anyone able to solve this? Still having porblem installing @react-native-community/masked-view , and react navigation stack... any update on that?

Use yarn add instead of npm install

[leoaraujocosta]

Hey @dirtyvu255 , were you able to install the 0.2.3 version?

[AhmedRafiullah]

Problem is still present any word on when this issue will be fixed ?

[Naturalclar]

Hello, sorry for the inconvenience this has been causing.
I'm currently unable to fix the @react-native-community/masked-view package, since I don't have access to that package.

Please consider using patch-package https://www.npmjs.com/package/patch-package to add the required change to the package.json.

[jqn]

The easiest fix is to use yarn instead of npm and patch-package ignores the package.json by default so that is not a good solution @Naturalclar

[vaibhav9619]

There is a problem with react@17 and above. It does support @react-native-community/masked-view": "^0.1.10".
So till we get updated version of masked view, we can downgrade the react from 17 to 16

"dependencies": {
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/stack": "^5.14.4",
"react": "16.13.1",
"react-native": "0.63.3",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.1.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.1.1",
"redux": "^4.0.5"
},
"devDependencies": {
"@babel/core": "7.13.15",
"@babel/runtime": "7.13.10",
"@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": "16.13.1"
},

This worked for me. Although pls let me know once it started working on react 17 and above.

[Naturalclar]

I've got the release permission for the old namespace, and released v0.1.11 which includes fix for this issue.

Please note that this is just a escape hatch for those who are using react-navigation v5 with npm.

I'm not planning to maintain @react-native-community/masked-view package, as the namespace has changed to @react-native-masked-view

[jaseembinmuhammed]

try with
npm install --force @react-native-community/masked-view

[Robert1996s]

I installed "npm install --save @react-native-masked-view/masked-view"

It worked for me.

[Naturalclar]

Closing as the issue is resolved in the latest version

[huandrey]

brother, I had a similar problem yesterday! I fixed it by entering the @react-navigation folder that is inside node_modules and replacing the @react-native-masked-view/masked-view import with @react-native-community/masked-view.

The replacement was done inside this MaskedViewNative.tsx file

This was because in my project I had both libs installed, I removed the @react-native-masked-view/masked-view and I only had this @react-native-community/masked-view.

The bad part is that every time we give yarn to install the dependencies these import modifications will return to their initial state. I still haven't had time to see if the @react-navigation lib has already changed this by default, but I believe there is already an update on this, hope I helped :))