Home > database >  Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UI
Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UI

Time:12-02

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

  1. I removed the node modules and ran yarn again ← didn't work
  2. 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
  3. 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
  4. 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...

CodePudding user response:

SVG rendering requires this module

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

CodePudding user response:

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.

  • Related