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.

Answer 1

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.)

Answer 2

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.

Answer 3

Just running

expo upgrade

solved my issue.

Answer 4

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

Answer 5

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.

Answer 6

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

Answer 7

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

Answer 8

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.

Answer 9

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

Answer 10

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

Answer 11

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",

Answer 12

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",

Answer 13

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=="
        }
      }
    },

Answer 14

For me it worked using the commands:

npm dedupe
expo update

Answer 15

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:

1. I run Yarn, allow it to create ./yarn.lock and ./node_modules
2. THEN I run npm i which creates the ./package-lock.json file
3. 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.

Answer 16

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 )

Answer 17

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

Answer 18

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

Answer 19

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.

Answer 20

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

Now,your issue Fixed