14

react-native-svg produces error: "Tried to register two views with the same name RNSVGRect"

I have react native projects and I want to use SVGs in them.

I started the projects using EXPO. I am using yarn and npm to add modules.

I get an error message: "Tried to register two views with the same name RNSVGRect" when all I do is try to import Svg from react-native-svg

import React from "react";
import Svg from "react-native-svg";
anthony galligani
  • 386
  • 1
  • 3
  • 16
  • found same issue on my React Native project Android and Ios. I am using clean Script to clear it, inside the package.json --> scripts. "cleanRNSVG": "find ./node_modules -type d -mindepth 2 -name react-native-svg -exec rm -rf {} \\;" – Ajay S Apr 23 '20 at 15:14

5 Answers5

18

In my case the problem was the following:

In my package.json in the root folder there was react-native-svg : 12.12.1.

I got this error message when I tried to use walletConnect Provider component. This library had node_modules/@walletConnect/react-native-dapp/node_modules/package.json. In there there was "react-native-svg": "^9.6.4"

So I just changed the version of my root react-native-svg to the same version as the one from walletConnect. The error message was gone.

Digital Dom
  • 412
  • 5
  • 12
  • Watch out for `node_modules/@walletConnect/react-native-qrcode-svg/node_modules/package.json` too! – Franco Petra Nov 16 '21 at 03:58
  • 1
    Instead of downgrading my own library, I overwrite walletconnect's lib, because you cannot patch lib deps. What I've done was rename `react-native-svg` in package.json file and point it to the last commit: `"react-native-svg-gg": "react-native-svg/react-native-svg#54e40251a491bb1a2d0a75e4748a23ea24fb3f6b"`. After that I overright every library in metro.config.js: `extraNodeModules: { 'react-native-svg': path.resolve( __dirname, './node_modules/react-native-svg-gg' ), },` – monchisan May 21 '22 at 14:57
10

Update:

For Expo 34, 35, 36, 37

Expo managed apps now require you to install react-native-svg using 

expo install react-native-svg

This is then used in the following way:

import * as Svg from 'react-native-svg';

Here is an example

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Circle, Rect } from 'react-native-svg';

export default class SvgExample extends React.Component {
  render() {
    return (
      <View style={[StyleSheet.absoluteFill, { alignItems: 'center', justifyContent: 'center' }]}>
        <Svg height="50%" width="50%" viewBox="0 0 100 100">
          <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
          <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" />
        </Svg>
      </View>
    );
  }
}

It is always best to check the documentation for the correct installation steps as SO questions can go out of date. You can find more about svgs in Expo here.

Previous Answer for older version of Expo

You cannot use react-native-svg with Expo as it requires linking. Expo already includes react-native-svg so by adding it as a dependency and then importing it you are causing it to get confused.

https://docs.expo.io/versions/latest/sdk/svg/

To use svg in expo you can just import it as follows

import { Svg } from 'expo'

You should remove react-native-svg from your package.json and your package-lock.json

You can do this by running npm uninstall —-save react-native-svg

You can see more about uninstalling dependencies here https://stackoverflow.com/a/13066677/5508175

Once you have uninstalled the dependency you should do the following:

  1. Remove the node_modules folder
  2. Close down all windows that are open for expo
  3. Delete the package-lock.json
  4. Run npm i
  5. Restart expo with expo start -c
Andrew
  • 26,706
  • 9
  • 85
  • 101
5

For my Expo managed app, I was able to solve this issue by using yarn resolutions in my package.json.

"resolutions": {
  "react-native-svg": "12.3.0"  
},
thickshake
  • 51
  • 1
  • 2
1

Try running npm dedupe It worked for me

Aakash
  • 11
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 20 '22 at 06:07
1

In my case the problem was the following:

In my package.json in the root folder there was react-native-svg : ^9.6.4.

I got this error message when I tried to use walletConnect Provider component. This library had node_modules/@walletConnect/react-native-dapp/node_modules/package.json. In there there was "react-native-svg": "^9.6.4"

So i just did npm uninstall —-save react-native-svg and than deleted the node_modules after it 1). npm install --legacy-peer-deps 2). npx rn-nodeify --install --hack 3). uninstall the old build 4). npx react-native run-android 5). npm install react-native-svg 6). npx react-native run-android

error was hone

Nazil khan
  • 19
  • 1