[🐛] 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

├── react-native-svg@14.1.0
└─┬ stream-chat-expo@5.29.0
└─┬ stream-chat-react-native-core@5.29.0
└── react-native-svg@15.2.0

[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 stream-chat-expo@5.27.0 worked for me as well since the react-native-svg@14.1.0 are shared now as shown here:
├── react-native-svg@14.1.0
└─┬ stream-chat-expo@5.27.0
└─┬ stream-chat-react-native-core@5.27.0
└── react-native-svg@14.1.0 deduped

However, for stream-chat-expo@5.29.0 and expo@50.0.17:

npm why react-native-svg
react-native-svg@14.1.0
node_modules/react-native-svg
react-native-svg@"14.1.0" from the root project

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