react-native-gifted-charts: Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager.
I am getting this "Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager"
wherever I am using the chart.
This is my code
import React, { useEffect } from 'react';
import { useState } from 'react';
import { Text, View} from 'react-native';
import { BarChart, LineChart, PieChart } from "react-native-gifted-charts";
import { TouchableOpacity, StyleSheet, Pressable, ActivityIndicator, Alert } from 'react-native';
import { SafeAreaView, ScrollView, } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
export default function GraphArea ( { symbol, startDate, endDate, active } ) {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
const thedata=[ {value:50}, {value:80}, {value:90}, {value:70} ]
const getResults = async () => {
try {
const json = await response.json();
setData(thedata));
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
useEffect(() => {
getResults();
}, []);
return (
<View style={{ flex: 1, padding: 24 }}>
{ isLoading ? <ActivityIndicator/> : (
<LineChart
initialSpacing={0}
isAnimated
thickness={3}
color="#07BAD1"
noOfSections={6}
pressEnabled={true}
onPress={(item, index) => {
Alert.alert(item.value)
}}
showDataPointOnPress={true}
stepValue
animateOnDataChange
animationDuration={1000}
onDataChangeAnimationDuration={300}
areaChart
yAxisTextStyle={{color: 'lightgray'}}
data={data}
hideDataPoints
startFillColor={'rgb(84,219,234)'}
endFillColor={'rgb(84,219,234)'}
startOpacity={0.4}
endOpacity={0.1}
rulesColor="gray"
rulesType="solid"
yAxisColor="lightgray"
xAxisColor="lightgray"/>
)}
</View>
);
}`
In the pacakage.json file for the react-native-gifted-charts, it has this version of react-native-svg
I have tried uninstalling the react-native-svg in the app package.json to match the one there, but it hasn’t made a difference. I’ve downgraded, still no difference.
I’ve tried even adding a resolution like so:
"resolutions": { "react-native-svg": "13.4.0" }
But still, I get the same error. What is causing this?
I am using Expo React Native, Android. Expo version: “expo”: “^47.0.0”
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 2
- Comments: 20 (1 by maintainers)
I ended up using Victory-Native. I’d prefer this one though but, for now I will work with Victory.
This happened because the latest library version internally uses
"react-native-svg": "13.6.0"
which does not work in android at the moment. For me downgrading to
"react-native-gifted-charts": "1.2.41"
worked which uses
"react-native-svg": "12.1.0"
@DonUggioni, thank you for mentioning this. I didn’t come across Victory before b/c their React Native directory entry description doesn’t contain keywords like graph and chart but it’s there if you specifically search for victory:
https://reactnative.directory/?search=victory
Their homepage mentions React.js but with some digging around, here are their React Native docs:
I tried this a lot of other things but nothing helped. I ended up using another library. Which is a shame, this one is pretty good.
Still having this issus. Even downgrading to 1.2.41 didn’t, I get the java.lang.Double error.
@ErangaD thanks, I tried that, but then I’m getting this “java lang double” error here: