(react-native-svg Error) "Tried to register two views with the same name RNSVGRect"

Question

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";

Answer 1

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.

Answer 2

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

Answer 3

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"  
},

Answer 4

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