walletconnect-monorepo: Invariant Violation: Tried to register two views with the same name RNSVGRect with expo

Hi, when using @walletconnect/react-native-dapp with expo, the following error occurs:

Invariant Violation: Tried to register two views with the same name RNSVGRect
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

I think the problem is that @walletconnect/react-native-dapp is used a very old version of react-native-svg. I tried to solve it like here https://stackoverflow.com/questions/54543324/react-native-svg-error-tried-to-register-two-views-with-the-same-name-rnsvgre but it didn’t work.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 21

Most upvoted comments

Below changes in package.json works for me.

  "dependencies": {
    "@walletconnect/react-native-dapp": "1.7.7",
    "react-native-svg": "12.3.0",
    "react-native-qrcode-svg": "6.1.2"
  },
  "resolutions": {
    "react-native-svg": "12.3.0",
    "react-native-qrcode-svg": "6.1.2"
  },

+10

petrusjj on Apr 1, 2022

@sssemil Thanks for confirming.

Can you please try heading into your node_modules directory and going inside of @walletconnect/react-native-dapp/node_modules. Here, try to delete react-native-svg and refresh your app to see if your problem is fixed.

If this works, you will probably need to automate this step as a part of postinstall in your package.json until we can publish a PR that marks react-native-svg as a devDependency.

i.e something like

rm -rf node_modules/@walletconnect/react-native-dapp/node_modules/react-native-svg

cawfree on Aug 5, 2021

Overriding the package with npm v8.3+ worked for me 👍

"overrides": {
  "react-native-svg": "~12.1.1"
}

IB3N on May 25, 2022

If you have yarn you can use resolutions section in package.json to override specific package, but in case of npm you can do similar stuff as written below, but you need to have npm in version >=8.3 https://stackoverflow.com/a/70396201

michalmaka on Apr 6, 2022

This is still an issue.

Not using expo.

Anandhu-1 on Mar 22, 2022

This is still an issue:

% yarn list react-native-svg
yarn list v1.22.17
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ @walletconnect/react-native-dapp@1.7.1
│  └─ react-native-svg@9.6.4
└─ react-native-svg@12.1.1
✨  Done in 0.24s.

0xDarni on Feb 1, 2022

Also watch out for node_modules/@walletConnect/react-native-qrcode-svg/node_modules/package.json too!

what do you mean by watch out…?

jordangrant on Dec 28, 2021

Downgrade react-native-svg to 9.6.4 solves the problem. Reference: https://github.com/cawfree/create-react-native-dapp/commit/9b2f6b7b9f713006057e606fd11846c2f5a3551d

akinncar on Oct 6, 2021

If this works, you will probably need to automate this step as a part of postinstall in your package.json until we can publish a PR that marks react-native-svg as a devDependency.

Why is not possible to fix it? react-native-dapp is not open source anymore?

When I try rm -rf node_modules/@walletconnect/react-native-dapp/node_modules/react-native-svg I have another error: TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[17], "./NativeComponents").RNSVGSvg')

akinncar on Oct 6, 2021