How to show SVG file on React Native?

Question

I want to show svg files (I have bunch of svg images) but the thing I couldn\'t find the way to show. I tried to use Image and Use componen

Answer 1

you can do this using a simple way

first, you should take installation,

1. npm install -s react-native-svg
2. react-native link react-native-svg
3. npm install -s react-native-svg-transformer

then, you should add the following code in your metro.config.js file

const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

after that, you should create a new file in your root directory with the name of declarations.d.js with the following code

declare module "*.svg" {
  import { SvgProps } from "react-native-svg";
  const content: React.FC;
  export default content;
}

Finally, This is a import mathod

import USER from "../../assets/icons/user.svg"

and, this is for jsx