I have created a library of components and commands for react-native using "react-native-builder-bob" https://github.com/callstack/react-native-builder-bob. Trying to create an "Icon" component I imported "react-native-svg" and "react-native-svg-transformer" and this is "dependencies" and "devDependencies" in my "package.json" .
"dependencies": {
"react-native-svg": "^13.6.0"
},
"devDependencies": {
"@commitlint/config-conventional": "^17.0.2",
"@react-native-community/eslint-config": "^3.0.2",
"@release-it/conventional-changelog": "^5.0.0",
"@tsconfig/react-native": "^2.0.3",
"@types/jest": "^28.1.2",
"@types/react": "~17.0.21",
"@types/react-native": "0.70.0",
"@typescript-eslint/eslint-plugin": "^5.48.0",
"@typescript-eslint/parser": "^5.48.0",
"commitlint": "^17.0.2",
"del-cli": "^5.0.0",
"eslint": "^8.4.1",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.11",
"jest": "^28.1.1",
"pod-install": "^0.1.0",
"prettier": "^2.0.5",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-builder-bob": "^0.20.0",
"react-native-svg-transformer": "^1.0.0",
"release-it": "^15.0.0",
"typescript": "^4.5.2"
},
In my "Icon.tsx" component I added this code
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Svg, { Circle, SvgUri } from 'react-native-svg';
interface IconInterface {
// varName: type;
// varName: type;
// functionName: () => void;
}
export default function Icon(props: IconInterface) {
return (
<View style={styles.container}>
<SvgUri width="100%" height="100%" uri="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/debian.svg" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
but when I compile the android app it gives me this error "Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager."
How can I fix?