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…
7
Answers
SVG rendering requires this module
I also got the same problem when trying to use
react-native-heroicons
which required me to installreact-native-svg
but when I rannpx expo install react-native-svg
, it worked.it’s work for me with fontawesome 6 pro
i have react-native-svg version 13.6.0 but
fix it to version 13.4.0
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?Expo works with 13.4.0 version of
react-native-svg
butreact-native-gifted-charts
requires 13.6.0. So I installedreact-native-svg
withexpo install
and override nested dependencies to use 13.4.0 version also by addingto my package.json. Solved my issue
This happened because the latest library version internally uses
check this commit
so even though we install a different version of
it uses version "13.6.0" which does not work in android at the moment. For me downgrading to
worked.
Expo uses
yarn
behind the scenes when usingnpx expo install [dependency]
, which is a little awkward, considering their initialization script (i.e.,npx create-expo-app my-app
) installs the package dependencies usingnpm
.So if you use
to install the
react-native-svg
package, just be sure to remove yourpackage-lock.json
file, and runso you don’t have multiple package managers in your project (it can cause havock for your dependencies).