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 image

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)

Most upvoted comments

@DonUggioni See if this works: go to package json and change the react native svg to 12.3 : “react-native-svg”: “12.3.0”, then run: expo cli 45

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.

What library did you use?

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"

I ended up using Victory-Native. I’d prefer this one though but, for now I will work with Victory.

@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 image

Their homepage mentions React.js but with some digging around, here are their React Native docs:

@DonUggioni See if this works: go to package json and change the react native svg to 12.3 : “react-native-svg”: “12.3.0”,

then run: expo cli 45

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: