skip to Main Content

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…

7

Answers


  1. SVG rendering requires this module

    npm install react-native-svg-transformer --save 
    
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
  4. 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?

    Login or Signup to reply.
  5. 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

    Login or Signup to reply.
  6. 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.

    Login or Signup to reply.
  7. 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).

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search