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:

image

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

Most upvoted comments

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

  1. Uninstall App
  2. Remove node_modules
  3. Rebuild App from Android Studio
  4. Reset Metro Server

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:

  1. cd into ios directory in your application and run pod install
  2. cd back to root of your app
  3. react-native run-ios

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

my MainApplication.java has the line new SvgPackage() but still getting the same error

same here

I’m using expo dev-client so in my case, this approach worked:

  1. Install
    “react-native-svg”: “13.4.0”, “react-native-svg-transformer”: “^1.0.0”,

  2. Build a new “expo go” app with eas eas build --profile development --platform android (ios should also work)

  3. 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

image

Instead of adding packages.add(new SvgPackage());

Tried as mentioned here

npm install react-native-svg --save //(again) react-native link react-native-svg //(again) rm -rf node_modules/ && yarn cache clean && yarn

Then in another terminal/restart terminal

yarn android

Finally got expected output

Fixed issue by adding in MainApplicatio.java file:

import com.horcrux.svg.SvgPackage;
return Arrays.<ReactPackage>asList(
      new SvgPackage()
      // eg. new VectorIconsPackage()                
);

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.

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-svg to 12.4.4 works for me

sometimes 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?

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.

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.

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.

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 app from my phone (android 13 pixel 7 pro) like I would uninstall any regular app, then I ran npm start, which threw an error about port 8081 alr being in use, but that is fine, then I did npm run android and 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 then cd ios and pod install.

Comment on closing: I linked the dependency as requested in README.md and recompiled the application and the error stopped happening.