Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider, js engine: hermes

Question

I am getting this error when trying to import and use the GiftedChat component from "react-native-gifted-chat":

Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider, js engine: hermes

I have tried several things listed here. People appear to have similar issues with other packages relating to "react-native-safe-area-context".

• I have updated "react-native-safe-area-context" (4.2.5 at the time of this post)
• uninstalled "react-native-safe-area-context"
  • rm node_modules
  • rm -rf ios/Pods && ios/Podfile.lock
  • rm package-lock.json
  • npm install
  • reinstall pods -> npx pod-install
  • build the project again to the same error

I am NOT using expo but I am using the React Native CLI.

It appears to me that the issue is with "react-native-gifted-chat".

Details:

• "react-native": "0.66.4"
• "react-native-safe-area-context": "^3.1.9"
• "react-native-gifted-chat": "^1.0.0"

If anyone has any ideas or insight I would appreciate it. If I find a solution I will post it as a comment.

Answer 1

According to this post the error means the same extension is installed multiple times.

checked where "react-native-safe-area-view" was being used

npm list react-native-safe-area-context

Results:

├─┬ @react-navigation/[email protected]
│ ├─┬ @react-navigation/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @react-navigation/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected]
└── [email protected]

it appears that gifted chat is pulling in 4.2.4 and 3.1.9

updated "react-native-safe-area-context" to latest version (4.2.5)

ran npm dedupe

"react-native-gifted-chat" appeared to still be pulling in two versions

├─┬ @react-navigation/[email protected]
│ ├─┬ @react-navigation/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @react-navigation/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected]
└── [email protected]

This seemed odd so I check the package itself in node_modulesnode_modules/node_modules/react-native-gifted-chat/package.json and found that the dependencies requested 4.2.4 specifically

  "dependencies": {
    "@expo/react-native-action-sheet": "3.13.0",
    "dayjs": "1.8.26",
    "prop-types": "15.7.2",
    "react-native-communications": "2.2.1",
    "react-native-iphone-x-helper": "1.3.1",
    "react-native-lightbox-v2": "0.9.0",
    "react-native-parsed-text": "0.0.22",
    --> "react-native-safe-area-context": "4.2.4", <--
    "react-native-typing-animation": "0.1.7",
    "use-memo-one": "1.1.1",
    "uuid": "3.4.0"
  },

instead of requiring ^4.2.4 they specifically require version 4.2.4

---

side note: ^ character defines a range of acceptable versions that include all patch and minor versions from the ones specified up to, but not including, the next version. So "^1.2.3" can be approximately expanded as ">=1.2.3 <2.0.0".

---

What does mean?

I installed the required version for "react-native-gifted-chat" which will work with all other dependencies then checked if it was finally deduped.

npm install [email protected]

npm list react-native-safe-area-context

finally deduped

├─┬ @react-navigation/[email protected]
│ ├─┬ @react-navigation/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @react-navigation/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Error fixed.

Don't forget to reinstall your pods.

---

TL;DR

• "react-native-gifted-chat" did not write their package.json correctly.
• They specifically require version 4.2.4 of "react-native-safe-area-context"
• They should require versions ^4.2.4 (>=4.2.4 < 5.0.0)
• Installing this specific version fixes the issue since there is not two version of the package being used. npm install [email protected]
• Could alternatively do a patch for "react-native-gifted-chat" making the fix just listed
• Don't forget to reinstall your pods and all that jazz

---

Answer 2

For me its working fine after upgrading react-native-safe-area-context to version 4.3.3

npm i [email protected]

Answer 3

Had the same issue (when dealing with react native gifted chat) and here's what I did:

1. npm depude

2. npm ls react-native-safe-area-context

and if you have more than one version run the following npm i react-native-safe-area-context@<the oldest one>

3. delete node_modules
4. run npm i