Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager

Question

I am having a headache with the error mentioned in the title. I am using react-native-gifted-charts (https://www.npmjs.com/package/react-native-gifted-charts/v/1.0.3) The charts works perfectly in ios but in Android it keeps crushing and throwing "Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager." First I thought it was a problem of my code as it worked for Android before,but even I reverse the code the error continues. I am using using yarn as a pack manager and Expo Managed Workflow. The dependencies are the following.

"react-native": "0.70.5",
"react-native-gifted-charts": "^1.2.42",
"react-native-linear-gradient": "2.6.2",
"react-native-svg": "12.1.0",

■Things I tried

I removed the node modules and ran yarn again ← didn't work
I changed the versions of react-native-svg as I read in the article below sometimes this kind of errors happens beacause of the missmatch of the versions.← didn't work https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/263
I removed react-native-gifted-charts react-native-linear-gradient react-native-svg and yarn added again to see if it solves the problem. ← didn't work
At the end, to confirm my code is not the problem I deleted all the code and made a simple barChart example to see if it works (sample code below) ← didn't work

import React, { useState } from "react";
import { View, StyleSheet, Text, TouchableOpacity, ScrollView } from "react-native";
import type { NativeStackScreenProps } from "@react-navigation/native-stack";
import { MainStackParamList } from "../types/navigation";
import dayjs from "dayjs";
import { BarChart, LineChart, PieChart } from "react-native-gifted-charts";
import { useSelector } from "react-redux";
import { RootState } from "../store";

export const StatisticsScreen: React.FC<Props> = () => {
  const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
  return (
    <BarChart
      data={data}
    />
  );
};

P.S I also ran yarn cache clean hoping it was the cache but didn't help...

Note: `react-native-gifted-charts` includes native code that is not part of the Expo SDK and is therefore not built into Expo Go. When the JavaScript parts of Gifted Charts try to access the native code, they will fail because it is missing. You will need to create a [Development build](https://docs.expo.dev/development/introduction/) and use that instead of Expo Go. — Wodin, Dec 28 '22 at 11:40

score 47 · Answer 1 · answered Dec 02 '22 at 08:28

47

I also got the same problem when trying to use react-native-heroicons which required me to install react-native-svg but when I ran npx expo install react-native-svg, it worked.

answered Dec 02 '22 at 08:28

Asifiwe Ebenezer

479
3
3

This approach worked to me, thanks! – anti-duhring Dec 03 '22 at 06:46
Also when running `expo start`, expo will notify you need to install specific version. Like this `Your project may not work correctly until you install the correct versions of the packages. Install individual packages by running npx expo install react-native-svg@13.4.0` – tnemele12 Mar 27 '23 at 18:35
Exactly! It worked by npx expo install react-native-svg, was throwing error by npm i – Rohit Parte Apr 16 '23 at 18:20
1

did not work for me, something might have recently changed /: – John Miller Jun 06 '23 at 14:16

score 14 · Answer 2 · answered Dec 17 '22 at 17:57

14

I got the error when I used "react-native-svg": "13.6.0", downgrading to "react-native-svg": "13.4.0" solved the issue.

So maybe you can try to upgrade to the 13.4.0 version?

answered Dec 17 '22 at 17:57

Nikita Chernenko

346
2
6

I had the same issue and changing version to 13.4.0 worked in development build, but the problem is that the expo doctor is throwing error that "react-native-svg" needs to be at 13.9.0. Any solution for this ? – Kazim Homayee Aug 24 '23 at 10:02
@KazimHomayee, I don't think it's possible, expo-doctor doesn't seem to have any configurations. Also, it's been a year, and maybe react-native-svg version 13.13.0 doesn't have the issue, have you tried it? – Nikita Chernenko Aug 25 '23 at 11:35
just tried version 13.13.0, expo-doctor still saying it's not compatible and it needs 13.9.0 which doesn't work. – Kazim Homayee Aug 29 '23 at 13:12

score 7 · Answer 3 · answered Dec 25 '22 at 20:59

7

Expo works with 13.4.0 version of react-native-svg but react-native-gifted-charts requires 13.6.0. So I installed react-native-svg with expo install and override nested dependencies to use 13.4.0 version also by adding

  "resolutions": {
    "react-native-svg": "13.4.0"
  }

to my package.json. Solved my issue

answered Dec 25 '22 at 20:59

Nemanja Pavlović

89
2

Yep, 13.6.0 is inop on Android. – Michel Floyd Jan 05 '23 at 23:22
did not work for me – John Miller Jun 06 '23 at 14:37
@Nemanja Pavlović Hey can you post your package json ? this isn't working for me – Erick Adam Jun 26 '23 at 18:34
@ErickAdam It looked something like this: `{ ... "dependencies": { ... "expo": "^47.0.0", "react-native": "0.71.3", "react-native-gifted-charts": "^1.2.42", "react-native-svg": "13.4.0", ... }, "resolutions": { "react-native-svg": "13.4.0" } }` – Nemanja Pavlović Jun 27 '23 at 22:31
@NemanjaPavlović are you using expo dev client? – Erick Adam Aug 10 '23 at 18:18
@ErickAdam Not really – Nemanja Pavlović Aug 15 '23 at 21:14

score 2 · Answer 4 · answered Apr 19 '23 at 02:41

Expo uses yarn behind the scenes when using npx expo install [dependency], which is a little awkward, considering their initialization script (i.e., npx create-expo-app my-app) installs the package dependencies using npm.

So if you use

npx expo install react-native-svg

to install the react-native-svg package, just be sure to remove your package-lock.json file, and run

yarn install

so you don't have multiple package managers in your project (it can cause havock for your dependencies).

Mitya Tabik · Answer 5 · 2022-12-27T10:19:27.003

0

npx expo install react-native-svg

it's work for me with fontawesome 6 pro i have react-native-svg version 13.6.0 but

npx expo install

fix it to version 13.4.0

edited Dec 27 '22 at 10:19

answered Dec 14 '22 at 06:50

Mitya Tabik

1
5

score 0 · Answer 6 · answered Jan 28 '23 at 16:36

This happened because the latest library version internally uses

"react-native-svg": "13.6.0"

check this commit

so even though we install a different version of

"react-native-svg"

it uses version "13.6.0" which does not work in android at the moment. For me downgrading to

"react-native-gifted-charts": "1.2.41"

worked.

score 0 · Answer 7 · answered May 20 '23 at 07:09

0

Install this version. npx expo install react-native-svg@13.4.0

answered May 20 '23 at 07:09

Ravisa Dilanka

9
2

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 20 '23 at 10:03

Berkay Nayman · Answer 8 · 2023-08-12T09:10:07.070

0

i using expo at my android device. running app with qr code.

i take the error ->

Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager

because i was "react-native-svg": "13.6.0",

if you want solve the error you need the downstrain

npx expo install react-native-svg@13.4.0`

please check package.json at here

https://github.com/berkaynayman/e-commerce-mobile-app

edited Aug 12 '23 at 09:10

answered Jun 03 '23 at 19:12

Berkay Nayman

187
6

Which version of expo, and which version of react-native-gifted-charts are you using? Also, are you using Expo dev-client? – Erick Adam Aug 10 '23 at 18:19
Hi Erick, i edited my answer. – Berkay Nayman Aug 12 '23 at 09:10

score -1 · Answer 9 · answered Dec 02 '22 at 08:09

-1

SVG rendering requires this module

npm install react-native-svg-transformer --save

answered Dec 02 '22 at 08:09

JSONCMD

79
3

Thanks for the advice! I ran the command you recommend and now the error message changed to "java.lang.Double cannot be cast to com.facebook.react.bridge.ReadableMap" which brings me to the very first error I had. I checked this ticket in Gihub hoping that matching the versions of react-native-svg and react-native-linear-gradient would solve the problem but it didn't.... https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/263 – peruvian66 Dec 02 '22 at 09:22
You don't need this to use RN Gifted Charts – Wodin Dec 28 '22 at 11:41

Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager

9 Answers9

Linked