Using SVG’s in React Native.

React native by default doesn’t support svg we have to use PNG to use graphics in the apps. But we can use react-native-svg package to enable using svg in react native.

react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web.

import * as React from 'react';

import { SvgUri } from 'react-native-svg';

export default () => (

  <SvgUri

    width="100%"

    height="100%"

    uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"

  />

);

metro.config.js:

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"]

    }

  };

})();  

My monorepo metro.config.js using with mono Repo tools. Dont forget write () at the end of the function to make it self executing.

Resources for reference:

https://www.npmjs.com/package/react-native-svg