[🐛] Error: Tried to register two views with the same name RNSVGRect

[DarylBeattie]

Issue

When I run my app that includes stream-chat-expo, in either iOS or Android (emulator or device) it crashes with the error:

 ERROR  Invariant Violation: Tried to register two views with the same name RNSVGRect, js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

In the stack-trace it shows stream-chat is there after my root App.tsx.

My package-lock.json has a peer-dependency on react-native-svg, and yet I do not see that in stream-chat's package.json. (weird)

Downgrading stream-chat-expo from 5.29.0 to 5.18.1 fixed the issue for me.

Steps to reproduce

Steps to reproduce the behavior:

1. Create an expo react-native project. SDK50.
2. Install react-native-svg through expo, not through npm directly. (https://docs.expo.dev/versions/latest/sdk/svg/)
3. Intsall stream-chat-expo, latest 5.29.0
4. Try to run your app, see error.

Expected behavior

I expect the app to start without issue.

Project Related Information

Customization

Click To Expand

# N/A

Offline support

• [ ] I have enabled offline support.
• [ ] The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

# N/A

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • [ ] iOS
  • [ ] Android
  • [ ] iOS but have not tested behavior on Android
  • [ ] Android but have not tested behavior on iOS
  • [ ] Both
• stream-chat-react-native version you're using that has this issue:
  • e.g. 5.4.3
• Device/Emulator info:
  • [ ] I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

Additional context

Screenshots

Click To Expand

---

[khushal87]

Hey @DarylBeattie what is the version of your react-native-svg package?

[DarylBeattie]

It was the latest version when I got that error.

I reverted to 14.1.0, because that was the last version I had in my node_modules, and the error went away.

So either: a) the error didn't exist in 14.1.0 and exists in the latest. or b) simply replacing the version in my node_modules made the error disappear.

[gchen1196]

Currently having the same issue with using stream-chat-expo. I get the same error when wrapping my root component with the OverlayProvider from stream-chat-expo

[gchen1196]

also downgrading stream-chat-expo to 5.18.1 worked for me too

[khushal87]

I think 14.1.0 in the latest version of the SDK should not cause a problem for you since we are using the same on our sample apps. We haven't tested it with >=15 so we will have to test that.

[gchen1196]

@khushal87 i tried running npm list react-native-svg and seems like there's a conflict between both react-native-svg packages. im on expo 50.0.5

npm list react-native-svg

├── [email protected] └─┬ [email protected] └─┬ [email protected] └── [email protected]

[DarylBeattie]

I think 14.1.0 in the latest version of the SDK should not cause a problem for you since we are using the same on our sample apps. We haven't tested it with >=15 so we will have to test that.

@khushal87 Hey, so it definitely does cause an incompatibility.

I see on Apr 12 that you committed a change to package/package.json (part of this PR) that specifies "react-native-svg": ">=15.1.0", and you did so as part of some "chore compatibility fixes" -- however, that makes it incompatible with Expo SDK50. Could you please update this dependency to say >= 14.1.0 so that when we're running Expo it doesn't try install a min-version of 15.2.0 for us, which causes an error and the Expo apps don't run?

For all the users using stream-chat-react-native outside of Expo, this won't make a difference since the latest svg will be retrieved, but for Expo users they'll maintain compatibility.

Since there is a "stream-chat-expo", it makes sense to do what you can to maintain compatibility there. This change won't hurt StreamChat, and will help people's Expo apps to run again. Seems like a win-win.

[DarylBeattie]

I have confirmed that StreamChat 5.27.0, the commit before this change was made, works with Expo50. (Attn @gchen1196 in case you wanted to upgrade.)

[khushal87]

What is your output of npm why react-native-svg, @DarylBeattie?

[gchen1196]

I can confirm that downgrading to [email protected] worked for me as well since the [email protected] are shared now as shown here: ├── [email protected] └─┬ [email protected] └─┬ [email protected] └── [email protected] deduped

However, for [email protected] and [email protected]:

npm why react-native-svg [email protected] node_modules/react-native-svg react-native-svg@"14.1.0" from the root project

[email protected] peer node_modules/stream-chat-expo/node_modules/react-native-svg peer react-native-svg@">=15.1.0" from [email protected] node_modules/stream-chat-expo/node_modules/stream-chat-react-native-core stream-chat-react-native-core@"5.29.0" from [email protected] node_modules/stream-chat-expo stream-chat-expo@"^5.29.0" from the root project

[khushal87]

Hey @gchen1196 @DarylBeattie, is it still a problem for you all?

[khushal87]

Closing the issue due to a long time of inactivity and inability to reproduce it. Please feel free to reopen if its still relevant with proper reproduction steps. Thanks 😄

[ilovechallenge]

I am using following modules and got this error.

"react-native-qrcode-svg": "^6.3.1",
"react-native-svg": "^13.9.0",

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