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

[karimcambridge]

👉 jump to the solution

[AleeeKoi]

Same issue here @karimcambridge, do you have found a solution?

[karimcambridge]

Nope,. I reverted back as noone seems to know why yet. Not many people are getting the issue.

[AleeeKoi]

ok, @karimcambridge can you explain what you have reverted? Thank you

In my case, I'm starting a new expo project and simply installing react navigation (following the official guide). I can see that simply importing import { createStackNavigator } from '@react-navigation/stack'; in my navigation file generate the error.

[karimcambridge]

Oh wow.

I'm not sure

I was on expo sdk 37 so I just reverted my package.json and ran npm install

[AleeeKoi]

Well, downgrading to sdk 37 make it works. I will wait with you for a solution.

[chrisscott]

I'm seeing this with react-navigation and Expo SDK 38 as well. For some reason Expo has this lib (and no others) in it's node_modules. As a workaround to get my project working, I removed it from there. Not sure where the fault lies though.

[sam17896]

Getting the same issue, you guys found any solution yet.. may be we need to open this issue on expo repo.. also if downgrading to sdk 37 works, then please tell me whats the latest version of sdk 37 as expo's github release history is confusing.

[chrisscott]

It looks like Expo 38.0.8 fixed this. Targeting that version in my project and doing an npm install resolved this.

[sam17896]

It looks like Expo 38.0.8 fixed this. Targeting that version in my project and doing an npm install resolved this.

Unfortunately not for me I'll dig more tonight.

[ikakara]

I created a sample app that demonstrates the issues: https://github.com/ikakara/expo-sdk38-bug

[conrad-vanl]

I can confirm that we're experiencing this issue on a non-expo app (react-native init app). We ran into it while attempting to upgrade to react-navigation v5. We also upgraded react-native-safe-area-context at the same time. I do not have a good lead yet on the cause from our end...it looks like it could be coming from the @react-navigation/compat package but i'm not very certain on that yet.

[henrypigg]

@conrad-vanl I had the same issue and it was a problem with react-navigation. I fixed it by updating react-navigation-stack to 2.8.2 and react-navigation-tabs to 2.9.0.

[jasonserafino]

Removing react-native-safe-area-context from expo.dependencies in package-lock and running npm install fixed this for me. Expo and react-navigation 5.

[neiker]

It looks like Expo 38.0.8 fixed this. Targeting that version in my project and doing an npm install resolved this.

This solves the issue for me. I also removed expo app from simulator and let it install again

[HristoEftimov]

It works on ver.3.0.7, with SDK38 + React Navigation 5.

Upgrading to ver.3.1.1 breaks the app :/

[iNeedHookah]

For me the following worked:

• Delete react-native-safe-area-contex from package.json

• Removed node modules rm -rf node_modules

• Run npm install

[pastordougdev]

I just started a new project on SDK 38 (38.0.8). Installed safe-area-context version 3.0.7 and it still breaks.

[kalideir]

I noticed I have two versions/copies of react-native-safe-area-context, one inside the project's package.json and the other is inside expo's. So I have finally solved this problem the following way:

1. Go to expo's own node_modules, remove the react-native-safe-area-context from there
2. Remove react-native-safe-area-context from package.json for expo's folder in node_modules
3. Run again using expo r -c.

Note: this problem usually happens when you remove node_modules and reinstall them.

[dominik992]

For now, I added this inside "scripts" in my package.json "postinstall":"rm -rf node_modules/expo/node_modules/react-native-safe-area-context",

It's an ugly fix but does the job.

[brentvatne]

@pastordougdev - can you provide a reproducible example?

i just did this and it worked as expected:

╭─~/code
╰─$ expo init testingit
? Choose a template: expo-template-blank

🧶 Using Yarn to install packages. You can pass --npm to use npm instead.

✔ Downloaded and extracted project files.
✔ Installed JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following yarn commands.

- cd testingit
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios
- yarn web
╭─~/code
╰─$ cd testingit
╭─~/code/testingit ‹master›
╰─$ expo install react-native-safe-area-context
Installing 1 SDK 38.0.0 compatible native module using Yarn.
> yarn add react-native-safe-area-context@~3.0.7
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 0 new dependencies.
✨  Done in 2.67s.

the key things here:

• expo package is [email protected]
• install react-native-safe-area-context with expo install react-native-safe-area-context

---

still having this problem?

• delete node_modules and your lockfile (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
• run expo install react-native-safe-area-context

[xcode-one]

expo version 38.0.9 solved the problem.

[pkj-ind]

Below worked for me:

Removing package-lock,json and node_module delete entry of "react-native-safe-area-view": "^1.1.1" from package.json run "npm install"

Post that i was not getting this error while launching app on ios device.

[TagIt34]

Below worked for me:

Removing package-lock,json and node_module delete entry of "react-native-safe-area-view": "^1.1.1" from package.json run "npm install"

tried the same, but does not work. But I also cannot see version 38.0.8. It is only showing me 38.0.0 And if I then try to "install expo-secure-store" I am getting a new error:

"action persist/PERSIST" which simply stays on my terminal window while the expo app on the iPhone crashes

Anyone could help please?

[iNorthSea]

@pastordougdev - can you provide a reproducible example?

i just did this and it worked as expected:

╭─~/code
╰─$ expo init testingit
? Choose a template: expo-template-blank

🧶 Using Yarn to install packages. You can pass --npm to use npm instead.

✔ Downloaded and extracted project files.
✔ Installed JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following yarn commands.

- cd testingit
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios
- yarn web
╭─~/code
╰─$ cd testingit
╭─~/code/testingit ‹master›
╰─$ expo install react-native-safe-area-context
Installing 1 SDK 38.0.0 compatible native module using Yarn.
> yarn add react-native-safe-area-context@~3.0.7
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 0 new dependencies.
✨  Done in 2.67s.

the key things here:

• expo package is [email protected]
• install react-native-safe-area-context with expo install react-native-safe-area-context

still having this problem?

• delete node_modules and your lockfile (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
• run expo install react-native-safe-area-context

Nice, Guy~

[brentvatne]

still having this problem?

• run expo install react-native-safe-area-context
• run yarn or npm install