react-native-svg: Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager
Project:
"d3-shape": "^1.2.2",
"fbjs": "^1.0.0",
"native-base": "^2.8.1",
"react": "16.6.0-alpha.8af6728",
"react-native": "0.57.4",
"react-native-circular-progress": "^1.0.1",
"react-native-firebase": "^5.0.0",
"react-native-svg": "^8.0.8",
"react-native-svg-charts": "^5.2.0",
"react-navigation": "^2.18.2"
Printscreen:

Error details:
Invariant Violation: Invariant Violation: Invariant Violation: requireNativeComponent: “RNSVGPath” was not found in the UIManager.
This error is located at: in RNSVGPath (at Path.js:17) in Path (at animated-path.js:72) in AnimatedPath (at progress-circle.js:108) in RNSVGGroup (at G.js:23) in G (at progress-circle.js:94) in RNSVGGroup (at G.js:23) in G (at Svg.js:109) in RNSVGSvgView (at Svg.js:90) in Svg (at progress-circle.js:92) in RCTView (at View.js:44) in ProgressCircle (at Main.js:61) in RCTView (at View.js:44) in Card (at connectStyle.js:384) in Styled(Card) (at Main.js:48) in RCTView (at View.js:44) in AnimatedComponent (at DeckSwiper.js:300) in RCTView (at View.js:44) in RCTView (at View.js:44) in DeckSwiper (at connectStyle.js:384) in Styled(DeckSwiper) (at Main.js:45) in RCTView (at View.js:44) in Form (at connectStyle.js:384) in Styled(Form) (at Main.js:43) in RCTView (at View.js:44) in Container (at connectStyle.js:384) in Styled(Container) (at Main.js:40) in Main (at SceneView.js:9) in SceneView (at StackViewLayout.js:478) in RCTView (at View.js:44) in RCTView (at View.js:44) in RCTView (at View.js:44) in AnimatedComponent (at screens.native.js:58) in Screen (at StackViewCard.js:42) in Card (at createPointerEventsContainer.js:26) in Container (at StackViewLayout.js:507) in RCTView (at View.js:44) in ScreenContainer (at StackViewLayout.js:401) in RCTView (at View.js:44) in StackViewLayout (at withOrientation.js:30) in withOrientation (at StackView.js:49) in RCTView (at View.js:44) in Transitioner (at StackView.js:19) in StackView (at createNavigator.js:57) in Navigator (at createKeyboardAwareNavigator.js:11) in KeyboardAwareNavigator (at createNavigationContainer.js:376) in NavigationContainer (at SceneView.js:9) in SceneView (at SwitchView.js:12) in SwitchView (at createNavigator.js:57) in Navigator (at createNavigationContainer.js:376) in NavigationContainer (at app/index.js:22) in RCTView (at View.js:44) in App (at renderApplication.js:34) in RCTView (at View.js:44) in RCTView (at View.js:44) in AppContainer (at renderApplication.js:33)
This error is located at: in NavigationContainer (at SceneView.js:9) in SceneView (at SwitchView.js:12) in SwitchView (at createNavigator.js:57) in Navigator (at createNavigationContainer.js:376) in NavigationContainer (at app/index.js:22) in RCTView (at View.js:44) in App (at renderApplication.js:34) in RCTView (at View.js:44) in RCTView (at View.js:44) in AppContainer (at renderApplication.js:33)
This error is located at: in NavigationContainer (at app/index.js:22) in RCTView (at View.js:44) in App (at renderApplication.js:34) in RCTView (at View.js:44) in RCTView (at View.js:44) in AppContainer (at renderApplication.js:33) getNativeComponentAttributes getNativeComponentAttributes.js:29:4 <unknown> requireNativeComponent.js:26:33 get ReactNativeViewConfigRegistry.js:104:25 createInstance ReactNativeRenderer-dev.js:4019:53 completeWork ReactNativeRenderer-dev.js:12051:12 completeUnitOfWork ReactNativeRenderer-dev.js:14179:10 performUnitOfWork ReactNativeRenderer-dev.js:14383:30 workLoop ReactNativeRenderer-dev.js:14395:41 renderRoot ReactNativeRenderer-dev.js:14492:15 performWorkOnRoot ReactNativeRenderer-dev.js:15450:17 performWork ReactNativeRenderer-dev.js:15347:24 performSyncWork ReactNativeRenderer-dev.js:15304:14 batchedUpdates$1 ReactNativeRenderer-dev.js:15572:21 batchedUpdates ReactNativeRenderer-dev.js:2675:31 _receiveRootNodeIDEvent ReactNativeRenderer-dev.js:2770:17 receiveEvent ReactNativeRenderer-dev.js:2790:26 __callFunction MessageQueue.js:349:47 <unknown> MessageQueue.js:106:26 __guard MessageQueue.js:297:10 callFunctionReturnFlushedQueue MessageQueue.js:105:17
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 3
- Comments: 44
1.Install react-native-svg and react-native-svg-transformer. 2.Uninstall your app from mobile. 3.react-native run-android. 4.yarn start If linking required then react-native link react-native-svg. Then again follow step 2 to 4.
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.
this is a bug and need to be fixed.
my MainApplication.java has the line new SvgPackage() but still getting the same error
Android Fix
If running this on iOS
Check your Podfile and Pods directory, my pods weren’t installing after doing an npm install.
The following steps fixed it for me:
pod installThis fixed the problem for me.
In iOS this bug appeared in 7.0.2. To fix, in xcode go to Your_Project / Build Phases / Link Binary With Libraries and add “libRNSVG.a”
Getting the same error…
packages.add(New SvgPackage())didn’t work;same here
I’m using expo dev-client so in my case, this approach worked:
Install
“react-native-svg”: “13.4.0”, “react-native-svg-transformer”: “^1.0.0”,
Build a new “expo go” app with eas eas build --profile development --platform android (ios should also work)
Install the new app And it work 😄
I solved the issue on mine by adding packages.add(new SvgPackage());
TO => …android\app\src\main\java\com\ramesh2\MainApplication.java react-native version: 0.60.0
Instead of adding packages.add(new SvgPackage());
Tried as mentioned here
Finally got expected output
Fixed issue by adding in MainApplicatio.java file:
What if you’re using Expo to run your project?
I have RN 0.70.6, 13.x works on iOS but breaks on Android. Downgrading
react-native-svgto12.4.4works for mesometimes it error show, because we don’t type yarn android only yarn start. Everytime when install a new natives libs we need type yarn android.
Have similar problem on my Windows machine. Gettings "requireNativeComponent: RNSVGPath was not found in the UIManager. Here are the versions of the packages I’m using:
“react-native-svg”: “^12.1.1”, “react-native-svg-transformer”: “^0.14.3”,
Installing/Uninstalling/Linking doesn’t help at all. Does anyone have experience with running react-native on Windows machine?
This works, thanks man
Any one solved this issue. I am using it with react-native-svg-transformer to work with image. packges.add(new …); also throws the error
“react-native-svg”: “^9.13.3”, “react-native”: “^0.61.5”, “react-native-svg-transformer”: “^0.14.3”,
“react-native”: “0.60.4”, “react-native-svg”: “^9.6.2”,
not working on android
I guess I forgot to add the version of react-native-svg that I installed.
Before installation kindly go through the version list and which react-native versions they Can be compatible with.
I installed mine using this command.
npm install react-native-svg@9 Which is compatible with my react native v 0.60
Hope this solves your problems.
Thank you very much for your help. It worked for me. First I uninstalled the app from the phone, then I Installed react-native-svg only and them restarted the simulator (iOS)
Getting the same error after updating to react-native 0.60.4 while everything was fine with version 0.59.10. I haven’t found a fix yet.
I think the answers on here solve the issue for everyone but just in case somebody needs this: For phosphor icons with the phosphor-react-native package, I
uninstalled the appfrom my phone (android 13 pixel 7 pro) like I would uninstall any regular app, then I rannpm start, which threw an error about port 8081 alr being in use, but that is fine, then I didnpm run androidand when it reinstalled the app it worked first try. I did not need to mess around with the Application java files in the android dir or anything, all I did to make it work was to do what I just said 👍@lePoissonier replace react-native-svg on your package.json with
react-native-svg": "12.3.0"and run yarn/npm install thencd iosandpod install.Comment on closing: I linked the dependency as requested in README.md and recompiled the application and the error stopped happening.