React-native-svg: 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
https://github.com/invertase/react-native-firebase/commit/54c92d0640e8765e4ab3d624dc1577bcc4ed7bfa

[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.

https://github.com/vjsingh/react-native-svg-charts/commit/298f3718b147358a68f07a1104d657ab1540bf86

[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: https://github.com/zeit/next.js/issues/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.

[tinmar33]

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 [email protected] and [email protected]

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 [email protected]
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