New solution for locked issue #110: Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider

[jamonholmgren]

The old solution: https://github.com/th3rdwave/react-native-safe-area-context/issues/110#issuecomment-668864576

New solution: just run expo install react-native-safe-area-context and then yarn or npm install. Should fix the problem by installing a newer version of react-native-safe-area-context (in my case, 3.1.4).

I would have updated the original issue, but it's locked.

[janicduplessis]

Hey! Thanks @jamonholmgren, I updated the comment in the locked issue. Can you confirm this is correct?

[LogicAnalysis]

Unfortunately, this doesn't work for me. It results in: " code ERESOLVE ERESOLVE unable to resolve dependency tree "

[LogicAnalysis]

Finally managed to solve this issue, in case anyone else is having the same problem I did. The error was in fact correct that there were 2 versions installed. However, I had previously deleted the wrong one (the one in /node_modules). I'm using expo, and what ended up working was deleting the copy in /node_modules/expo/node_modules/, as well as its reference in package-lock.json.

[rossb89]

Finally managed to solve this issue, in case anyone else is having the same problem I did. The error was in fact correct that there were 2 versions installed. However, I had previously deleted the wrong one (the one in /node_modules). I'm using expo, and what ended up working was deleting the copy in /node_modules/expo/node_modules/, as well as its reference in package-lock.json.

Yup I had this issue as well, using Expo SDK 39 and react-navigation 4.x

It appears Expo comes with react-native-safe-area-context in it's own node_modules folder, but react-navigation was complaining about Unable to resolve "react-native-safe-area-context" from "node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js"

until it was installed with expo install react-native-safe-area-context.

This appeared to work fine with Android when running the app, even though there were now 2 versions present in the dependancy tree after checking with npm list react-native-safe-area-context.

iOS however gave this error described here when booting up the app: Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider.

For a quick and dirty solution for now, i've added "postinstall": "rm -rf node_modules/expo/node_modules/react-native-safe-area-context" under scripts in package.json to remove the Expo one, and now the app is running fine.

I'm sure there must be a better solution out there by someone more versed in this than myself :)

[SamMakesThings]

@rossb89 This is crazy levels of hacky but it's also the only thing that's worked lol. Did have to add another line for a different library with its own react-native-safe-area-view (@draftbit/ui)

[davidz172]

I have the same issue using an using React-Native-CLI. I wrote a simple UI library package "A" based on "react-native-elements", then I try to use package "A" in an React-Native-CLI app. the app uses "@react-navigtion" so I have to add react-native-safe-area-context 3.1.9 as dependency. Then I run into "Tried to register two views with the same name RNCSafeAreaProvider". "react-native-elements" also require react-native-safe-area-context 3.1.9, I think the version I installed is correct, not sure where the problem is. Any guidence or thoughts are appricated.

package.json of my libary package.

{ name: "A" ............ "dependecies":{ "react-native-elements": "^3.1.0" } ................... }

package.json of my app. { ............ "dependecies":{ "@react-native-community/masked-view": "^0.1.10", "@react-navigation/native": "^5.8.10", "@react-navigation/stack": "^5.12.8", "react":"16.13.1", "react-native":"0.63.4", "react-native-gesture-handler":"^1.9.0", "react-native-safe-area-context": "3.1.9", "react-native-screens": "^2.16.1", "react-native-vector-icons": "^7.1.0" "A":"0.0.1"

} ................... }

[mohdaatif]

Unfortunately, this doesn't work for me. It results in: " code ERESOLVE ERESOLVE unable to resolve dependency tree "

I have also installed two versions of react-native-safe-area-context, but nothing appears in expo node modules related to react-native-safe-area-context, can you suggest any solution.

[FrankEmiro]

i tried everything, no one solution worked in IOS ( didn't try yet in Android).

i've expo bare workflow, expo-cli 3.26.2 and "expo": "~38.0.8",

• deleted node_modules and package.lock or yarn.lock
• deleted react-native-safe-area-context from Package.json
• npm or yarn install
• expo install react-native-safe-area-context
• cleaned Xcode Build folder
• used new simulator without cache
• build with Xcode

same issue:

please help, is 2 days i m stock!

[juho-ylikyla]

I had an issue where react-native-safe-area-context was included in the dependencies of a dependency and as a direct dependency

I had it in package-lock.json react-native-elements which introduced the duplicate dependency. Removing that manually fixed the issue.

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

[FrankEmiro]

so i don t know the reason but i did installed react-native-safe-area-view with react-native-safe-area-context together and it worked for now, here the steps:

• deleted node_modules and package.lock or yarn.lock
• deleted react-native-safe-area-context from Package.json
• yarn install
• In the Expo managed workflow: expo install react-native-safe-area-view react-native-safe-area-context
• In bare React Native projects: yarn add react-native-safe-area-view react-native-safe-area-context
• Next, you need to link react-native-safe-area-context. If you are using autolinking, run npx pod-install again. If not, follow these instructions: https://github.com/react-navigation/react-native-safe-area-view
• cleaned Xcode Build folder
• used new simulator without cache
• build with Xcode

[rubiagatra]

I can say @juho-ylikyla solution and delete rm -rf node_modules/react-native-elements/node_modules/react-native-safe-area-context works for me

[ccraig09]

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

[PuspaGurung]

Finally managed to solve this issue, in case anyone else is having the same problem I did. The error was in fact correct that there were 2 versions installed. However, I had previously deleted the wrong one (the one in /node_modules). I'm using expo, and what ended up working was deleting the copy in /node_modules/expo/node_modules/, as well as its reference in package-lock.json.

Thank you, this work for me.

[tx-dynamics]

only remove the previous one and install it with expo install react-native-safe-area-context it works for me.

[jacobp100]

This is for v3 of the library, and we're on v4. Please re-open a new issue if you're still facing issues