Invariant Violation：试图注册两个同名的视图RNCSafeAreaProvider，js引擎：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/bottom-tabs@6.3.1
│ ├─┬ @react-navigation/elements@1.3.3
│ │ └── react-native-safe-area-context@3.1.9 deduped
│ └── react-native-safe-area-context@3.1.9 deduped
├─┬ @react-navigation/stack@6.2.1
│ └── react-native-safe-area-context@3.1.9 deduped
├─┬ react-native-gifted-chat@1.0.0
│ └── react-native-safe-area-context@4.2.4
└── react-native-safe-area-context@3.1.9

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/bottom-tabs@6.3.1
│ ├─┬ @react-navigation/elements@1.3.3
│ │ └── react-native-safe-area-context@4.2.5 deduped
│ └── react-native-safe-area-context@4.2.5 deduped
├─┬ @react-navigation/stack@6.2.1
│ └── react-native-safe-area-context@4.2.5 deduped
├─┬ react-native-gifted-chat@1.0.0
│ └── react-native-safe-area-context@4.2.4
└── react-native-safe-area-context@4.2.5

This seemed odd so I check the package itself in node_modules node_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 react-native-safe-area-context@4.2.4

npm list react-native-safe-area-context

finally deduped

├─┬ @react-navigation/bottom-tabs@6.3.1
│ ├─┬ @react-navigation/elements@1.3.3
│ │ └── react-native-safe-area-context@4.2.4 deduped
│ └── react-native-safe-area-context@4.2.4 deduped
├─┬ @react-navigation/stack@6.2.1
│ └── react-native-safe-area-context@4.2.4 deduped
├─┬ react-native-gifted-chat@1.0.0
│ └── react-native-safe-area-context@4.2.4 deduped
└── react-native-safe-area-context@4.2.4

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 react-native-safe-area-context@4.2.4
• 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 react-native-safe-area-context@4.3.3