Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider error with @react-navigation/stack

Question

When I am trying to use import {createStackNavigator} from @react-navigation/stack, it gives me an error

Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider

I have tried finding a solution, but nothing helps.

enter image description here

RNCSafeAreaProvider is related to this module: https://github.com/th3rdwave/react-native-safe-area-context/issues/110 However, there might be a duplicate installation out there inside other modules such as: https://github.com/react-native-elements/react-native-elements/issues/2721 — goodhyun, Jan 08 '21 at 22:58

score 50 · Answer 1 · edited Oct 18 '21 at 18:28

50

Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider error with @react-navigation/stack

It means you have installed same extension multiple times.

Running "npm dedupe" command solved my problem.

or Yarn install (The dedupe command isn’t necessary. yarn install will already dedupe.)

edited Oct 18 '21 at 18:28

Community

1
1

answered Apr 08 '21 at 07:48

Kerim Senturk

501
4
4

2

If you are using yarn, it says: error The dedupe command isn't necessary. `yarn install` will already dedupe. – PHZ.fi-Pharazon May 03 '21 at 04:20
2

`npm deduce` fixed my issue – Cuado Aug 06 '21 at 08:16
1

i use yarn install and it doesn't work. but npm dedupe works – olawalejuwonm Jan 08 '22 at 17:41
this worked to get me running on Android, but IOS still doesn't work... so weird! Thanks doe! – Lorenzo Covarrubias Jan 20 '23 at 14:07

score 17 · Answer 2 · answered Jul 20 '21 at 13:00

For my case, two different masked-view packages in package.json caused it:

"@react-native-community/masked-view": "0.1.10",
"@react-native-masked-view/masked-view": "0.2.4",

ReactNavigation5 requires @react-native-community/masked-view, while react-native-skeleton-placeholder has the other as the prerequisite. So, watching your dependencies, you can remove one of those to get rid of this error.

score 15 · Answer 3 · edited Aug 18 '21 at 08:00

15

Just running

expo upgrade

solved my issue.

edited Aug 18 '21 at 08:00

Oleg Valter is with Ukraine

9,619
8
37
59

answered Aug 08 '21 at 10:30

Bukenya KizzaRoland

721
1
7
13

Editor's note: do not rollback or override edits from community members that improve formatting and/or syntax and spelling. In your case, the user fixed formatting misuse. Code blocks should not be formatted as quotes, much less as nested quotes. – Oleg Valter is with Ukraine Aug 18 '21 at 08:03
I ran into this problem when I upgraded my project using npm-check-updates. That is obviously not the correct way of doing it for Expo projects. Now using `expo upgrade` all is good. Thanks! – eigil Sep 17 '21 at 13:50

score 13 · Answer 4 · edited May 01 '21 at 05:50

13

reinstalling react-native-safe-area-context did the trick for me in EXPO.

edited May 01 '21 at 05:50

Dharman

30,962
25
85
135

answered May 01 '21 at 05:44

Aayush Bhattacharya

1,628
18
17

This works for me too – AyoDavid Dec 07 '21 at 20:08

score 8 · Answer 5 · answered Mar 23 '21 at 05:12

8

There have been few fixes on Github for this package issues on resolving the above dreadful error, which one of it happens to work for me. I'll highlight a couple of fixes here and follow the link for more.

Follow these steps to fix it, but I only tried the last part:

delete node_modules and your lock file (package-lock.json / yarn.lock)
change the expo package version in package.json to 38.0.8
remove react-native-safe-area-context from your package.json
run yarn or npm install

The below step works for me.

run expo install react-native-safe-area-context

Thanks to brentvatne.

answered Mar 23 '21 at 05:12

Akolade Adesanmi

1,152
11
15

2

the line that helped me: `expo install react-native-safe-area-context` – Boris Mitioglov Dec 09 '21 at 23:13
I'd very much recommend you not delete your lock file. That can cause major issues with your application far beyond what they may or may not fix. – Artif3x Nov 09 '22 at 17:30

score 4 · Answer 6 · answered Sep 24 '21 at 12:24

4

package.json adding in scripts npm dedupe worked for me .

answered Sep 24 '21 at 12:24

savita

79
4

2

This appears to be simply confirming that [this answer](https://stackoverflow.com/a/66999488/10871073) worked. That means it is not an answer, of itself, and shouldn't be posted as one. – Adrian Mole Sep 24 '21 at 13:18

score 3 · Answer 7 · answered Mar 19 '21 at 11:04

3

In my case I forgot to add one line which is import 'react-native-gesture-handler'; on top of the file in index.js

if you don't install it so you have to install it first by using the command npm install react-native-gesture-handler

OR

yarn add react-native-gesture-handler

answered Mar 19 '21 at 11:04

Saad Qamar

1,039
9
9

When I upgraded react-navigation from 3-4 I forgot to include this. Thanks. – zachary Feb 11 '22 at 15:06

score 3 · Answer 8 · answered Apr 08 '21 at 11:10

3

Even though its already answered I'll provide a solution that worked for me.

"react-native-safe-area-context" is probably causing a conflict with Navigation Container.

Removing "safe-area-context" solved the issue temporarily for me and its probably the way for a more permanent solution.

Im a React-Native beginner but this is my input to help other people with similar issues.

answered Apr 08 '21 at 11:10

Carl Hidestål

49
4

This was the exact issue I was facing. Now, according to https://reactnavigation.org/docs/handling-safe-area, react-native-safe-area-context is required to support navigation. This is what I did to solve mine: 1. deleted 'react-native-safe-area-context' from my 'package.json' 2. ran 'yarn' 3. ran 'expo install react-native-safe-area-context' . This will ensure that expo adds this package itself, since the conflict was btw 'expo' and 'react-native' – Okpo Dec 17 '21 at 07:40

Andrews · Answer 9 · 2022-09-15T23:04:46.390

I was having the same problem with react-native-safe-area-context. So I searched for it in my yarn.lock and found out that some other lib was using a different version of safe-area-context than the one I had in my package.json

react-native-gifted-chat was using version 4.2.4 of react-native-safe-area-context

I had version 3.3.2 in my package.json

So I updated my package.json to use the same version (4.2.4) and it worked

score 2 · Answer 10 · answered May 12 '21 at 21:22

What worked for me was uninstalling react-native-elements and reinstalling them.

react-native-safe-area-context has a module inside of react-native-elements, which caused caused the duplicate error.

The other answers worked only temporarily but the error would continue to appear

Ashikh · Answer 11 · 2021-07-11T12:07:37.940

it works for me version sdk(42.0.0) ❤️❤️❤️

here is the solution :)

open your app route folder ==> node_modules ==> invariant ==> browser.js

in browser.js file remove the [if condition code] (line number 28 to 46 )

my package.json file given below :

"expo": "~42.0.1",

"react": "16.13.1",

"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",

"react-native-safe-area-context": "3.1.9",

score 2 · Answer 12 · edited Aug 13 '21 at 14:05

it works for me version SDK(42.0.0)

here is the solution :)

open your app route folder ==> node_modules ==> invariant ==> browser.js

in browser.js file remove the [if condition code] (line number 28 to 46 )

my package.json file given below :

"expo": "~42.0.1",

"react": "16.13.1",

 "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",

"react-native-safe-area-context": "^3.3.0",
"react-native-screens": "^3.5.0",

score 1 · Answer 13 · edited Sep 06 '21 at 12:01

In the pack-lock.json file, remove the react-native-safe-area-context. That will solve the problem.

The code will look like this:

  "react-native-elements": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-3.1.0.tgz",
      "integrity": "sha512-U4CuyO+q2JlduPht4P0xz+oIbw3W53uYPpkMqvlwjJiVoFfwnpbAu+JZL01/7VMe98G4Y8nJImcBh7zK9cb3Uw==",
      "requires": {
        "@types/react-native-vector-icons": "^6.4.6",
        "color": "^3.1.2",
        "deepmerge": "^4.2.2",
        "hoist-non-react-statics": "^3.3.2",
        "lodash.isequal": "^4.5.0",
        "opencollective-postinstall": "^2.0.3",
        "prop-types": "^15.7.2",
        "react-native-ratings": "^7.3.0",
        "react-native-safe-area-context": "^3.1.9",
        "react-native-size-matters": "^0.3.1"
      },
      "dependencies": {
        "deepmerge": {
          "version": "4.2.2",
          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
        },
        "opencollective-postinstall": {
          "version": "2.0.3",
          "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
          "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
        },
        ---> "react-native-safe-area-context": { <--- remove this
          "version": "3.1.9",
          "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.1.9.tgz",
          "integrity": "sha512-wmcGbdyE/vBSL5IjDPReoJUEqxkZsywZw5gPwsVUV1NBpw5eTIdnL6Y0uNKHE25Z661moxPHQz6kwAkYQyorxA=="
        }
      }
    },

score 1 · Answer 14 · edited Oct 13 '21 at 02:49

1

For me it worked using the commands:

npm dedupe
expo update

edited Oct 13 '21 at 02:49

kyun

9,710
9
31
66

answered Oct 13 '21 at 01:53

Daniel Rabelo

19
6

`npm dedupe` was enough for me – Rajendran Nadar Jan 13 '22 at 18:35

score 1 · Answer 15 · edited Oct 13 '21 at 13:42

Okay, this might seem a little wacky hacky, and I'm not quite sure how or why it worked, but it did. I tried pretty much all the answers here and got nowhere.

Note: I had ./package.json in my directory already from when my app previously threw this error, see below

For some reason, if do the following:

I run Yarn, allow it to create ./yarn.lock and ./node_modules
THEN I run npm i which creates the ./package-lock.json file
Run expo start, my app loads...

I don't think this is good practice but it worked for me. Here's my ./package.json which I had in my directory BEFORE I ran yarn/went through the steps in the order above:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@babel/runtime": "7.0.0-beta.55",
    "@react-native-async-storage/async-storage": "^1.15.9",
    "@react-native-community/netinfo": "6.0.0",
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/drawer": "^6.1.4",
    "@react-navigation/native": "^6.0.2",
    "aws-amplify": "^4.2.5",
    "aws-amplify-react-native": "^5.0.3",
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

If it works for anyone that visits, cool, if someone could explain or attempt to repeat this and comes up with an explanation please share.

score 0 · Answer 16 · answered Aug 21 '21 at 06:24

0

is here is the solution

Comented the line

open your app route folder ==> node_modules ==> invariant ==> browser.js

in browser.js file remove the [if condition code] (line number 28 to 46 )

answered Aug 21 '21 at 06:24

saul alvarez

21

score 0 · Answer 17 · edited Oct 24 '21 at 08:39

0

Run expo install react-native-safe-area-context
Run yarn install or npm install

edited Oct 24 '21 at 08:39

answered Oct 24 '21 at 05:39

chamith nadeeshan

1

score 0 · Answer 18 · edited Jan 04 '23 at 18:19

0

This error also appears if you move your navigation and screens across files.

You can solve this by just running the command below if you are using expo or its equivalent it bare React Native app.

expo start --clear

edited Jan 04 '23 at 18:19

fatihyildizhan

8,614
7
64
88

answered Jan 04 '23 at 17:13

Ahurein

1
1

score 0 · Answer 19 · answered Aug 01 '23 at 22:44

0

This github issue comment helped me. Basically, in my package.json I just went to the react-native-safe-area-context dependency, and changed my version 4.6.3 to ^4.6.3 and ran yarn/npm install again, and re-ran the project. Instant success.

answered Aug 01 '23 at 22:44

SeanMC

1,960
1
22
33

score -2 · Answer 20 · answered Jul 14 '22 at 08:56

-2

step 1: delete your node modules Step 2: install node modules using yarn instead of npm install

Now,your issue Fixed

answered Jul 14 '22 at 08:56

Abdul Rehman

27
3

Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider error with @react-navigation/stack

20 Answers20

Linked