Tried to register two views with the same name RNSVGPath

[obetomuniz]

As you can see in the screenshot, I get the issue when I tried use 2 libraries that use react-native-svg as dependency. I'm using RN 0.52 and RN-svg 6.0.1-rc.2

[msand]

Probably similar issue to this: https://stackoverflow.com/questions/46613149/tried-to-register-two-views-with-the-same-name-progressbarandroid
and
invertase/react-native-firebase@54c92d0

[ewalti]

I'm back on 5.5.1 on my project but wanted to try 6.x to see if it would fix some other issues I was having. Rolling up caused this same conflict at first, because I seemingly had another library requiring the old version (react-native-pathjs-charts) and 6.x. I removed that library, as I was no longer using it, rm -rf node_modules, yarn, react-native link, and the issue went away.

[sibelius]

this happens when another lib has this package as a dependency, we can close this

[msand]

Alright, I'll go ahead and close this.

[HarmJan1990]

Hi there,

I get this error but i only have react-native-svg included once.
There is no other library that requires it in my project but i still get this error.
Any clues?

[yogeshR5]

+1

[viewsing]

Expo also has the react-native-svg, so I remove the react-native-svg when using Expo, the error is gone

[jean-noelp]

Removing react-native-svg is just a workaround.
Me, i need last version of react-native-svg too, how to do that ?

[matteocollina]

Same issue
react-native-cli: 2.0.1
react-native: 0.55.4

npm list react-native react-native-svg :

[tmswartz12]

Getting this issue. Is there a working solution?

[sftgf]

+1

[msand]

If you're using yarn, then you can use resolutions: https://yarnpkg.com/en/docs/package-json#toc-resolutions
E.g. if you're using react-native-svg v8.0.8 and want to override it in all your dependencies, add this to your package.json file and run yarn again:

  "resolutions": {
    "react-native-svg": "8.0.8"
  }

Or, if you're using npm, then you can run: https://www.npmjs.com/package/npm-force-resolutions#how-to-use

rm -r node_modules
npx npm-force-resolutions
npm install

[vjsingh]

This seems to be a new issue in Expo 31? None of the fixes in this thread worked for me

[msand]

@vjsingh Expo already includes react-native-svg, you shouldn't add it as a dependency.

[vjsingh]

@msand Thanks for the advice. I'm not sure what it was since I removed my dependency on react-native-svg. It may be related to https://github.com/JesperLekland/react-native-svg-charts which I used, but that library appears to load react-native-svg as a peer dependency which looks to be the right way to do it?

Anyway, for now I am just going to stick with Expo 30 until I have some more time. Thank you again for the help.

[abduraufsherkulov]

I have a similar issue here. Expo 32, as soon as it renders the component, expo crashes.

[msand]

@abduraufsherkulov if you use expo, then this library comes built in and you shouldn't add it as a dependency, also make sure none of your other dependencies depend on it. Or, eject the project.

[vjsingh]

I'm not sure if I set my package.json wrong somehow, but after upgrading to Expo 31 I had to change all imports of react-native-svg in a package I depend on to import from Expo instead.

vjsingh/react-native-svg-charts@298f371

[msand]

That sounds correct, Expo should probably change their setup, such that they also expose the react-native-svg module.

[msand]

You can find examples of ejecting from expo: https://github.com/msand/InfiniDrawExpo
to ExpoKit: https://github.com/msand/InfiniDrawExpo/tree/expokiteject
or to plain react-native: https://github.com/msand/InfiniDrawExpo/tree/nativeeject
And the original project which has both web (using react-native-web) and plain react-native here: https://github.com/msand/InfiniDraw/

[gtiongco95]

I've tried removing the react-native-svg dependency and updated my imports to use expo instead but when I run my app I get a: "React.isMemo is not a function. (In 'React.isMemo(component)', 'React.isMemo' is undefined)"

Has anyone else experienced this or know what is wrong?

[msand]

Are you using react-redux or react-is? Perhaps this thread can help you: vercel/next.js#6117

[gtiongco95]

Using react-redux. Tried the approach of pinning my version to 4.4.9 from 5.1.0 which it was initially. However, I'm met with other issues so don't really think that would be a feasible approach for me..

EDIT making the changes to use expo's svg, clearing node_modules, removing package-lock.json, running npm install and running expo start -c (with the clear cache flag) worked for me.

[lylest]

i am still facing the same issue

[akshaygore06]

 npmPackages:
      react: 16.8.6 => 16.8.6 
      react-native: ^0.59.5 => 0.59.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
      react-native-shimmer: 0.5.0
      react-native: 0.59.8

still facing same issue.. tried npm-force-resolutions but no results.

[astw]

My case,
If I remove react-native-svg, I got an error complaining there is no react-native-svg,
If I include I got 'register two views with the same name RNSVGPath' error.
npm-force-resolutions doesn't help.

[martinfrouin]

I'm facing this issue as well
[fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Tried to register two views with the same name RNSVGPath

I'm using react-native@0.59.9 and react-native-svg@5.5.1

I'm not using Expo, and the @msand solution doesn't work for me.

Please reopen this issue

[msand]

Can you make a minimal reproduction first?

[Jimexa]

@astw I am facing the same issue. Have you figured it out yet?

[dragslag]

@Jimexa I went through every file in react-native-svg-charts and changed import Svg {Line, etc,etc} from 'react-native-svg' to import Svg {Line, etc, etc} from 'expo' and that works for now.

[vjsingh]

@dragslag You may want to look into Victory charts. I used react-native-svg-charts for a while, and it's a great library but not actively maintained anymore. The switch didn't take too long

[dragslag]

Thanks @vjsingh I'll check it out

[Vincetroid]

What should you do if you want to use react-native-qrcode-svg in Expo?

[RikusWiehahn]

How I fixed this:

1. Make sure react-native-svg is not in package.json
2. Delete package-lock.json
3. Delete node_modules
4. Run npm install

[nandorojo]

expo-install react-native-svg caused this issue for me since it appears to install the wrong version. This fixed it:

rm -rf node_modules
npm i react-native-svg@9.11.1
npm i
expo start -c

Answer from StackOverflow

[chanonroy]

I was able to solve this issue by installing the appropriate version using:

expo install react-native-svg

[Egizas]

My case,
If I remove react-native-svg, I got an error complaining there is no react-native-svg,
If I include I got 'register two views with the same name RNSVGPath' error.
npm-force-resolutions doesn't help.

I have exactly the same situation. Did you manage to solve it?

[chanonroy]

My case,
If I remove react-native-svg, I got an error complaining there is no react-native-svg,
If I include I got 'register two views with the same name RNSVGPath' error.
npm-force-resolutions doesn't help.

I have exactly the same situation. Did you manage to solve it?

@Egizas, try installing using expo install react-native-svg and then reference it as seen here

[daihovey]

This issue is back in 1.6.5

"dependencies": {
    ...
    "react-native-svg": "9.6.4",
    ...
  },

[dcsan]

I have a similar issue.

if i remove it from package.json the app will complain it doesn't exist
if i add it, i get the duplication error

$ yarn why react-native-svg   
yarn why v1.22.19
warning ../../../../package.json: No license field
[1/4] 🤔  Why do we have the module "react-native-svg"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "react-native-svg@12.3.0"
info Has been hoisted to "react-native-svg"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "18.59MB"
info Disk size with unique dependencies: "20.15MB"
info Disk size with transitive dependencies: "22.29MB"
info Number of shared dependencies: 3
=> Found "@walletconnect/react-native-dapp#react-native-svg@9.6.4"
info This module exists because "@walletconnect#react-native-dapp" depends on it.
info Disk size without dependencies: "1.54MB"
info Disk size with unique dependencies: "1.54MB"
info Disk size with transitive dependencies: "1.54MB"
info Number of shared dependencies: 0
✨  Done in 0.34s.

so there are two versions, the peer dep of another package is using an older version.
if i install that version at the top level it now works:

yarn add react-native-svg@9.6.4

✅ ok from then

[R-Art-project]

moving react-native-svg towards the peerDependencies solved this problem for me.

"peerDependencies": {
"react-native-svg": "13.8.0"
},

[AftabUfaq]

this issue is basically due to the different react-native-svg dependencies. for example I was using a package react-native-cool-speedometer it was using a different version 12.x.x and I was using 13.5.0 after upgrading the react-native-coolspeedometer it was going

[Aswanth-c]

I had the same issue.
I had to uninstall the react-native-svg package using the npm command
but at the same time, it caused another issue, which is
"Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager."
then I did an expo install react-native-svg instead of npm install react-native-svg
Which fixes the issue

[mad-dogy]

Make sure you set the width and height for the svg icon

I had the same issue and it helps me :)