Importing SVG Files in React Native Projects: A Comprehensive Guide

Using SVG files in your React Native projects can be as straightforward as using them in web applications. The react-native-svg-transformer library makes this possible by transforming your imported SVG images into React components. This guide will walk you through the installation, configuration, and usage of react-native-svg-transformer in your React Native projects.

Benefits

• Consistency: Use the same SVG files for both React Native and web projects.
• Flexibility: Easily import and use SVG files as React components.

Step-by-Step Installation and Configuration

Step 1: Install react-native-svg Library

First, ensure you have the react-native-svg library installed. This library provides the necessary components to render SVG images in React Native.

To install, run:

npm install react-native-svg

or

yarn add react-native-svg

For detailed installation instructions, refer to the react-native-svg GitHub page.

Step 2: Install react-native-svg-transformer Library

Next, install the react-native-svg-transformer library, which will transform your SVG files into React components.

To install, run:

npm install --save-dev react-native-svg-transformer

or

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

Step 3: Configure the React Native Packager

Depending on your setup (Expo or React Native CLI), the configuration will differ. Below are the configurations for different environments:

For Expo SDK v41.0.0 or Newer

Create or update your metro.config.js file with the following configuration:

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/expo")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

For React Native v0.72.1 or Newer

Create or update your metro.config.js file with the following configuration:

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

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

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-svg-transformer/react-native"
    )
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

For React Native v0.59 or Newer

Create or update your metro.config.js file with the following configuration:

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

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

React Native Projects Using Expo Modules

For projects using Expo modules without expo-cli, you may need to adjust the transformer path to correctly use React Native's transformer:

-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/react-native")

Alternatively, force Expo's transformer to always be used:

-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/expo")

Using TypeScript

If your project uses TypeScript, you need to declare the module for SVG files. Add the following to your declarations.d.ts file (create it if it doesn't exist):

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

Usage

After installation and configuration, you can import and use SVG files in your React components just like any other component.

Example:

1. Import the SVG file:
   

   import Logo from "./logo.svg";
   

2. Use the SVG as a component:
   

   <Logo width={120} height={40} />
   

Additional Resources

• Demo Projects:
  • react-native-svg-example
  • react-native-svg-expo-example

By following this guide, you should be able to seamlessly integrate SVG files into your React Native projects, enhancing your development workflow and maintaining consistency across different platforms.

Follow me for more articles!