Search code examples
react-nativereact-native-gifted-chatreact-native-safe-area-view

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

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.

Solution

  • 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