Configuration

Step 1 Install packages npm i react-native-svg-transformer react-native-svg

Step 2 Change your metro.config.js

For Expo SDK v41.0.0 or newer

Merge the contents from your project's metro.config.js file with this config (create the file if it does not exist already).

metro.config.js:

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

For React Native v0.72.1 or newer:

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;


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

module.exports = mergeConfig(defaultConfig, config);

For React Native v0.59 or newer

Merge the contents from your project's metro.config.js file with this config (create the file if it does not exist already).

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

Using TypeScript

If you are using TypeScript, you need to add this to your declarations.d.ts file (create one if you don't have one already):

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

Props |Name| Type ==================== | is required |Default| |--|--|--|--| | bgColor| string | false | colors.gray for dark mode device and colors.light_gray for light mode | textColor | string | false | colors.white for dark mode and colors.black for light mode | |error|string | false | "" | |placeholder | string | false | undefined | | placeholderTextColor | string | false | colors.light_gray for darks mode and colors.gray for light mode | | cursorColor | string | false | colors.sky | onFocus | () => void | false| undefined | |onChangeText | (text: string) => void | false | undefined| | value| string | false | ""| | dialCode| string | false | undefined | setDialCode| (dialCode: string) => void | true | N/A