gluestack-ui: Invariant Violation: Tried to register two views with the same name RNSVGSvgView

Description

Using GluestackUI in a clean new projekt with Expo SDK 49 causes a rendering issue when implementing the provider

CodeSandbox/Snack link

https://github.com/AllBitsEqual/Prototyping/tree/gluestack/gluestack

Steps to reproduce

either follow the link above for my demo repo with a clean new project or complete the following steps:

  1. create new expo project: npx create-expo-app@latest --template expo-template-blank-typescript@sdk-49
  2. install missing packages, pick name, cd into project
  3. install expo router requirements yarn expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler
  4. (optional) install requirements for web yarn expo install react-native-web@~0.19.6 react-dom@18.2.0
  5. follow other changes from https://docs.expo.dev/routing/installation/ (change package.json, app.json and babel.config.js as described)
  6. install gluestack UI npx gluestack-ui@latest
  7. start project and run it in your emulator (web doesn’t seem to be affected)
  8. make a page (optional with a base _layout.tsx) and implement the provider <GluestackUIProvider config={config.theme}>
  9. update the app in your emulator and the error should occur

image

gluestack-ui Version

latest

Platform

  • Android
  • Expo
  • iOS
  • Next

Other Platform

No response

Additional Information

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 4
  • Comments: 24 (3 by maintainers)

Most upvoted comments

a temporary fix is to downgrade react-native-svg to 13.4.0

When I downgrade react-native-svg to 13.4.0, I get another error: Invariant Violation: requireNativeComponent: "RNSVGSvgView" was not found in the UIManager. Has anyone found a solution that doesn’t lead you right back to Tried to register two views with the same name RNSVGSvgView ? This is only happening on Android for me.

@Viraj-10 nice! Thanks for responding so quickly.

I had to switch from 13.13 to 13.4.0 (and do a pod install, too) to get the icons to work.

Weirdly, looking in package-lock, I could see @gluestack-ui entries for that specific version inside a nested node_modules folder as well as my own 13.13.x version.

I dont think this should be closed… I think a good outcome would either be:

a) Properly enforce dependencies so that the right version is automatically loaded without us needing to manually include precisely the right one at the top level… or b) Fix whatever that bug is that causes the duplicate views (guessing it’s because the same package is loaded twice, but with different versions).

I suspect there is a world where the final fix combines both A and B 😉

EDIT: I dont think this is simply a “documentation” problem; this is a code issue.

EDIT 2: Actually, having re-read @Viraj-10 's post properly (😉) it sounds like there is a separate piece of work to address the locked version… so if this ticket is closed, lets link it, in some way, to the ongoing ticket covering fixing the 13.4.0 hard-lock.

EDIT 3: @Viraj-10 - is there another open ticket to resolve the 13.4.0 lock? I dont see one when I search issues for that version number…

Hey @njt1982, you are right it should have been linked to some other issue. I have created #995 for that. We will post updates there.

I see you’ve added it to expo existing project instructions, but it’s not in the RN existing project installation instructions yet: https://ui.gluestack.io/docs/guides/install-rn

Hey @bvisserbb, Thanks for pointing out it has been updated now.

PS:- @gluestack-ui/themed is currently locked to react-native-svg version 13.4.0. We are working on removing lock version till then please make sure you have right version installed in your project. Best Way to check version is to package.json inside your node_modules/react-native-svg.

@Viraj-10 this lock to 13.4.0 is the issue being reported here. Why close this ticket when this issue isn’t resolved? Are you able to link to another issue that is tracking the removal of the 13.4.0 lock?

At least update the documentation for themed to say it won’t work if you have a different version of react-native-svg?

Hey @bvisserbb, This issue is different. It is comes under critical issue since this crashes your app. Moving from locking version doesn’t come under this. I have reported this internally and we have it in our roadmap. Sorry I didn’t create a issue on github which points the same. #995 here I have created a issue.

PS:- @gluestack-ui/themed is currently locked to react-native-svg version 13.4.0. We are working on removing lock version till then please make sure you have right version installed in your project. Best Way to check version is to package.json inside your node_modules/react-native-svg.

@Viraj-10 this lock to 13.4.0 is the issue being reported here. Why close this ticket when this issue isn’t resolved? Are you able to link to another issue that is tracking the removal of the 13.4.0 lock?

At least update the documentation for themed to say it won’t work if you have a different version of react-native-svg?

include this on your package.json

“resolutions”: { “react-native-svg”: “13.4.0” }, overrides: { “react-native-svg”: “13.4.0” }

Unfortunately, it didn’t work for me. I cleared package-lock.json as well. No luck.

a temporary fix is to downgrade react-native-svg to 13.4.0

This fixed it for me. Thanks @AllBitsEqual!

Kudos to @surajahmed for this, I only spread their genious quick fix solution for others.

a temporary fix is to downgrade react-native-svg to 13.4.0

This fixed it for me. Thanks @AllBitsEqual!