1

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?

TheSnake
  • 200
  • 1
  • 1
  • 7

0 Answers0