react-native-svg: Invariant Violation: requireNtiveComponent: "RNSVGRect" was not found in the UIManager

Hello.

react-native link react-native-svg - done. react-native link - done. yarn cache clean - done. reinstalling of react-native-svg - done. react-native run-ios after every action - done.

Manual linking:

To install react-native-svg on iOS visit the link referenced above or do the following:

Open your project in XCode and drag the RNSVG.xcodeproj file (located in …/node_modules/react-native-svg/ios) into the Libraries directory shown in XCode. Expand the RNSVG.xcodeproj file you just added to XCode until you see: libRNSVG.a (located in RNSVG.xcodeproj > Products ) Drag libRNSVG.a into the Link Binary With Libraries section (located in Build Phases which may be found at the top of the XCode window)

DONE.

scr

Versions:

“react-native-svg”: “^6.5.1”, “react-native”: “0.56.0”,

Code block that causes error:

<Svg height={this.state.maskedElHeight} width={this.state.maskedElWidth} style={{ position: "absolute", top: 0, left: 0, }}>

   <Defs>

       <ClipPath id="clip">

           <Rect x="0" y="0" width="100%" height="100%" />
           <Polygon x="0" y="0" points={`
               ${Math.round(this.state.maskedElWidth / 2)},0 
               0,${Math.round(this.state.maskedElHeight * 0.25)}
               0,${Math.round(this.state.maskedElHeight * 0.75)} 
               ${Math.round(this.state.maskedElWidth / 2)},${Math.round(this.state.maskedElHeight)} 
               ${Math.round(this.state.maskedElWidth)},${Math.round(this.state.maskedElHeight * 0.75)} 
               ${Math.round(this.state.maskedElWidth)},${Math.round(this.state.maskedElHeight * 0.25)} 
               `} 
           />
       </ClipPath>

   </Defs>

   <Rect
       x="0"
       y="0"
       width="100%"
       height="50%"
       fill="#FF187C"
       opacity="1"
       clipPath="url(#clip)"
   />

   <Rect
       x="0"
       y="50%"
       width="100%"
       height="50%"
       fill="white"
       opacity="1"
       clipPath="url(#clip)"
   />
   
</Svg>

Android is ok, but iOS shows me the error.

scr2

Update: When running project via xcode, I get:

err

What’s happening?

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 8
Comments: 18

Most upvoted comments

react-native link is missing the last step. it is not adding “new SvgPackage()”

Open up `android/app/src/main/java/[…]/MainApplication.java Add new SvgPackage() to the list returned by the getPackages() method. Add a comma to the previous item if there’s already something there.

i think this is a bug and need to be fixed.

+24

creative-git on Nov 23, 2018

and remember to kill your metro server and rebuild the project

+14

CyrusZei on Nov 19, 2019

it supports autolink now just cd ios and do pod install

+13

aiden0w0 on Aug 5, 2019

@berpcor I just ran into the same issue with the LinearGradient.

UPDATE: Manual linking resolved this for me.

AndrewHenderson on Aug 1, 2018

Only restart metro bundler is not enough. You should rebuild app.

Delete App and run react-native run-ios to reinstall worked fine for me. Thanks

pxl-live on Feb 13, 2021

Only restart metro bundler is not enough. You should rebuild app.

cyb3rsalih on Feb 18, 2020

it supports autolink now just cd ios and do pod install

On ios 11.4.1 installing pods works smoothly. Make sure you restart metro and build again.

wulcat on Apr 23, 2020

Had this issue for iOS, managed to “fix” it by unlinking react-native-svg and removing it from my dependencies and then subsequently adding it again as a dependency and re-linking it. 😬

tomfinney on Apr 8, 2019

Android， I had added new SvgPackage(),same error. Any other solutions？

IOS is ok.

is this solved?

ThakurKarthik on Mar 16, 2019

Android， I had added new SvgPackage(),same error. Any other solutions？

IOS is ok.

zhangwen9229 on Nov 27, 2018

Yes, 1.5hrs and solved for me too. Nothing was told in manual linking section of manual (here - https://github.com/react-native-community/react-native-svg#ios) about $(SRCROOT)/../node_modules/react-native-svg/ios in “Header Search Paths”. It helped. This comment helped - https://github.com/react-native-community/react-native-svg/issues/79#issuecomment-267239296 P.S. As I am new to react native and using native code there, it was not so obvious for me. It would be good if info above would be added to readme to save other people’s time.

berpcor on Aug 1, 2018

it supports autolink now just cd ios and do pod install

🤦 Forgot to run pod install after installing the packages. Thanks @aiden0w0

ardentcricket on Aug 16, 2023

cd ios pod install

does the trick for me. remember from your root folder you have to go through above commands.

sabaoonbedar on Nov 23, 2020

ejected from expo sdk 36 to bare workflow. sdk 36 is based on react native 0.61. Still had to manually do react-native link react-native-svg to fix this issue on android and iOS. I am using react-native-svg 9.13.3

sushrut-desora on Feb 12, 2020