React Native – How to display local svg file?

Solution 1

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

const svgFile = '<svg width="199" height="55" ...><rect .../>...</svg>'

<SvgXml xml={svgFile} width={w} height={h} />

Solution 2

Install dependencies

yarn add react-native-svg

yarn add react-native-svg-transformer --dev

Configure metro to transform svg file to jsx

• Create 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"]
    }
  };
})();

Usage

import TestSvg from 'assets/image.svg';

<TestSvg width={'100%'} height={'100%'} />

Fill color for svg file (optional)

Foe example, you want to change filled color from “#000” to a custom color

• Make sure your svg file has fill=”#000″
  If not open your svg file, replace “white” to “#000”

• Create .svgrrc.js

module.exports = {
  "replaceAttrValues": {
    "#000": "{props.fill}"
  }
}

• Usage

<TestSvg width={'100%'} height={'100%'} fill={'red'} />