react-native-svg: Error - No component found for view with the name "RNSVGRect"

I’m just starting to use the library and started by simply pasting the bit of code given in the example, but although I’ve installed and imported all the elements as indicated, I get this error message… Am I missing something obvious ?

The bit of code :

   <Svg height="100" width="100">
      <Rect x="0" y="0" width="100" height="100" fill="black" />
      <Circle cx="50" cy="50" r="30" fill="yellow" />
      <Circle cx="40" cy="40" r="4" fill="black" />
      <Circle cx="60" cy="40" r="4" fill="black" />
      <Path d="M 40 60 A 10 10 0 0 0 60 60" stroke="black" />
    </Svg>;

The imports: import { Svg, Circle, Line, Rect, Path, } from 'react-native-svg';

And the error message :

screen shot 2016-07-19 at 16 04 52

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 15

Most upvoted comments

It seems like you havent link the native code for the project. Run react-native link react-native-svgorrnpm link react-native-svg`

After doing rpm link, you need to re-run the app by executing react-native run-ios or react-native run-android depending on the platform you’re using.

I fixed, follows this: Checked your Xcode project 1、RNSVG.xcodeproj in “Libraries” 2、libRNSVG.a in “Link Binary With Libraries” 3、$(SRCROOT)/…/node_modules/react-native-svg/ios in “Header Search Paths”

re-run is work.

This still seems to be an issue. Anyone struggling with this can follow FB’s docs of manually linking: https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking

It worked for me after unlinking libRNSVG-tvOS.a.

Following @timothystewart6 suggestion and just adding libRNSVG.a (not libRNSVG-tvOS.a), it works! 1- Add Files to Libraries Folder screen shot 2017-12-20 at 16 38 57

2- Add …/node_modules/react-native-svg/ios/RNSVG.xcodeproj

3- Drag and drop screen shot 2017-12-20 at 16 39 51 " libRNSVG.a" to “Link Binary With Libraries”

And it should work.