[Invariant Violation: requireNativeComponent: "RNSVGSvgView" was not found in the UIManager.

[ndpiparava]

Having hard time with react-native-svg in android and it keeps complaining about [Invariant Violation: requireNativeComponent: "RNSVGSvgView" was not found in the UIManager.]

I have followed the installation instruction and still do not work on andorid, works fine in iOS

I am using latest react native version

"react-native": "0.73.5",
"react-native-svg": "^15.0.0",  // should be  > 13.0 as per instruction
"react-native-svg-transformer": "^1.3.0",

Created fresh project and still facing same issues, issue does not appear until you do not use in component. However when you create simple component like below issue start appearing on app launch.

import React from 'react';
import Svg, { G, Path } from 'react-native-svg';
type PropsType = {
  isActive?: boolean;
};
export default function GearIcon({ isActive = false }: PropsType) {
  const strokeColor = isActive ? '#037AFF' : '#C0C0C0';
  return (
    <Svg
      width='40px'
      height='40px'
      viewBox='-5.04 -5.04 34.08 34.08'
      fill='none'
    >
      <G id='SvgRepo_bgCarrier' stroke-width='0' />

      <G
        id='SvgRepo_tracerCarrier'
        stroke-linecap='round'
        stroke-linejoin='round'
      />

      <G id='SvgRepo_iconCarrier'>
        <Path
          d='M20.1 9.2214C18.29 9.2214 17.55 7.9414 18.45 6.3714C18.97 5.4614 18.66 4.3014 17.75 3.7814L16.02 2.7914C15.23 2.3214 14.21 2.6014 13.74 3.3914L13.63 3.5814C12.73 5.1514 11.25 5.1514 10.34 3.5814L10.23 3.3914C9.78 2.6014 8.76 2.3214 7.97 2.7914L6.24 3.7814C5.33 4.3014 5.02 5.4714 5.54 6.3814C6.45 7.9414 5.71 9.2214 3.9 9.2214C2.86 9.2214 2 10.0714 2 11.1214V12.8814C2 13.9214 2.85 14.7814 3.9 14.7814C5.71 14.7814 6.45 16.0614 5.54 17.6314C5.02 18.5414 5.33 19.7014 6.24 20.2214L7.97 21.2114C8.76 21.6814 9.78 21.4014 10.25 20.6114L10.36 20.4214C11.26 18.8514 12.74 18.8514 13.65 20.4214L13.76 20.6114C14.23 21.4014 15.25 21.6814 16.04 21.2114L17.77 20.2214C18.68 19.7014 18.99 18.5314 18.47 17.6314C17.56 16.0614 18.3 14.7814 20.11 14.7814C21.15 14.7814 22.01 13.9314 22.01 12.8814V11.1214C22 10.0814 21.15 9.2214 20.1 9.2214ZM12 15.2514C10.21 15.2514 8.75 13.7914 8.75 12.0014C8.75 10.2114 10.21 8.7514 12 8.7514C13.79 8.7514 15.25 10.2114 15.25 12.0014C15.25 13.7914 13.79 15.2514 12 15.2514Z'
          fill={strokeColor}
        />
      </G>
    </Svg>
  );
}

[GuruReactDev]

Getting same error

[jayweb007]

Any solution to this
Invariant Violation: requireNativeComponent: "RNSVGSvgView" was not found in the UIManager.

[WoLewicki]

Could you provide a minimal reproducible code example? Best would be a simple repository.

[pgeimer]

Getting this error but only on react-native-svg@13.4.0 and only on android. I am not getting this error on other versions or iOS. I discovered this error after installing gluestack-ui because version 13.4.0 is recommended.

[AnkushSarkar10]

same error. Any solution?

[awongCM]

Getting this error but only on react-native-svg@13.4.0 and only on android. I am not getting this error on other versions or iOS. I discovered this error after installing gluestack-ui because version 13.4.0 is recommended.

Same here when I download this plugin along with lucide-react-native icon plugins which is part of sample from https://gluestack.io/ui/docs/components/media-and-icons/icon

When following the same with my own code below.

import { WalletCards } from "lucide-react-native";

const MobileBottomTabs = ({ bottomTabs }) => {
  return (
    <>
      <HStack>
        {bottomTabs.map((tab, index) => (
          <Pressable
            key={tab.label}
            onPress={() => alert(`You clicked on ${tab.label}`)}
            style={{ width: 100 }}
          >
            <Icon as={WalletCards} size="2xs" />
            <Text>{tab.label}</Text>
          </Pressable>
        ))}
      </HStack>
    </>
  );
};
export default MobileBottomTabs;

It breaks on android. But it works fine on ios.

Any help you can provide to resolve this?

[awongCM]

Getting this error but only on react-native-svg@13.4.0 and only on android. I am not getting this error on other versions or iOS. I discovered this error after installing gluestack-ui because version 13.4.0 is recommended.

Same here when I download this plugin along with lucide-react-native icon plugins which is part of sample from https://gluestack.io/ui/docs/components/media-and-icons/icon

When following the same with my own code below.

import { WalletCards } from "lucide-react-native";

const MobileBottomTabs = ({ bottomTabs }) => {
  return (
    <>
      <HStack>
        {bottomTabs.map((tab, index) => (
          <Pressable
            key={tab.label}
            onPress={() => alert(`You clicked on ${tab.label}`)}
            style={{ width: 100 }}
          >
            <Icon as={WalletCards} size="2xs" />
            <Text>{tab.label}</Text>
          </Pressable>
        ))}
      </HStack>
    </>
  );
};
export default MobileBottomTabs;

It breaks on android. But it works fine on ios.

Any help you can provide to resolve this?

I think I may have found the solution to this.

After doing some googling online and using Google Gemini, both led me to this page.

https://github.com/software-mansion/react-native-svg?tab=readme-ov-file#supported-react-native-versions

Essentially in my package.json

"react-native": "0.73.4",
"react-native-safe-area-context": "^4.9.0",
"react-native-screens": "^3.29.0",
"react-native-svg": "^15.1.0", // formerly 13.0

I'm using the latest react native version 0.73.4 that is most compatible with react-native-svg version 15.0 and above.

After swapping from ^13.4.0 to ^15.1.0, reran the build and start the app, I can see the icons being rendered successfully on Android phone.

In spite of what the official gluestack-ui pages advises us to use react-native-svg ^13.4.0, it's apparent to me, there's a conflict on compatibility notes on using latest react-native version to play with gluestack's present recommended react-native-svg version.

I think they should update their readme pages to advise users in taking care of incoporating latest react-native versions to their gluestack-ui framework.