Using SVG Images in React Native and Expo with react-native-svg-transformer

📅

loading..🐩🐩🐩🐩

Before We Begin 🔗

This guide assumes you already have a basic Expo project. To create one, see the guides for Windows and Mac.

Why Use SVG Images? 🔗

SVG images scale without losing sharpness. On the web, you can style them with CSS, and their small file sizes can improve site performance. React Native can also display SVGs. This guide shows how to use them in an Expo project.

Install react-native-svg 🔗

👨‍💻

This library is included in Expo Go, so you do not need to install it separately to use it there.

In a React Native project without Expo, install react-native-svg with the following command.

npm install react-native-svg

The library lets you use interactive and animated SVGs in your app.

Use an SVG Image 🔗

Start by downloading an SVG image. Open the file and copy its markup. This example uses the SVG circle and line elements.

/assets/image/example.svg (예시 svg 파일)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
	<circle cx="12" cy="12" r="10"/>
	<line x1="12" y1="8" x2="12" y2="16"/>
	<line x1="8" y1="12" x2="16" y2="12"/>
</svg>

Example SVG image

Use the Svg component to render the copied SVG. The Svg component comes from react-native-svg. Convert the markup to React Native by placing the Circle and Line components inside Svg, as shown below.

/assets/image/example.tsx

import Svg, { Circle, Line } from 'react-native-svg';
 
export default function SvgComponent() {
	return (
		<Svg width="100" height="100" viewBox="0 0 24 24">
			<Circle cx="12" cy="12" r="10" fill="none" stroke="black" strokeWidth="2"/>
			<Line x1="12" y1="8" x2="12" y2="16" stroke="black" strokeWidth="2"/>
			<Line x1="8" y1="12" x2="16" y2="12" stroke="black" strokeWidth="2"/>
		</Svg>
	);
}

You can now render the image on screen with SvgComponent.

/app/index.tsx

import React from 'react';
import { View } from 'react-native';
import SvgComponent from './example';
 
export default function App() {
	return (
		<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
			<SvgComponent />
		</View>
	);
}

Convert SVG with React SVGR 🔗

You can also use the React SVGR playground↗ to convert SVG images to React components. Paste your SVG markup and the playground generates the component for you. Here's what it produces for the example above.

/assets/image/example-svgr.tsx

import * as React from "react"
import Svg, { SvgProps, Circle, Path } from "react-native-svg"
const SvgComponent = (props: SvgProps) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    stroke="currentColor"
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth={2}
    viewBox="0 0 24 24"
    {...props}
  >
    <Circle cx={12} cy={12} r={10} />
    <Path d="M12 8v8M8 12h8" />
  </Svg>
)
export default SvgComponent

The result looks a little different from the manual conversion. In particular, it uses SvgProps so you can pass props through. That's why I recommend using the playground when converting an SVG to a component.

Use react-native-svg-transformer 🔗

Converting each SVG manually can get tedious, especially when you have to change file extensions. The react-native-svg-transformer library converts SVG files into components automatically.

Installation and Configuration 🔗

Install the Library 🔗

Install react-native-svg-transformer.

npm install --save-dev react-native-svg-transformer
 
  # yarn add --dev react-native-svg-transformer

Configure metro.config.js 🔗

Add the configuration to metro.config.js in the project root. A plain React Native project might not have a metro.config.js file yet. If it doesn't, create metro.config.js in the root and add the configuration below. Include the code that sets module.exports.

metro.config.js (Expo 프로젝트 기준)

/* eslint-env node */
const { getDefaultConfig } = require('expo/metro-config');
 
/** @type {import('expo/metro-config').MetroConfig} */
 
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;
})();

metro.config.js (React Native 프로젝트 기준)

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);

Configure TypeScript 🔗

If you use TypeScript, add the following declaration to declarations.d.ts so TypeScript recognizes SVG files as modules. If the file doesn't exist, create declarations.d.ts in the project root.

declarations.d.ts

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

Render the SVG Image 🔗

You can now import an SVG directly. Add the SVG file to the assets folder and load its path with require when using it, as in this example.

/app/index.tsx

import React from 'react';
import { View } from 'react-native';
import SvgComponent from '@/assets/image/example.svg';
 
export default function App() {
	return (
		<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
			<SvgComponent />
		</View>
	);
}

Pass SVG Attributes as Props 🔗

Style an SVG by passing attributes such as fill, stroke, and strokeWidth as props. In this example, the SVG's fill attribute takes the fill prop, and its stroke attribute takes the stroke prop. Use “currentColor” when you want to supply a variable color.

/assets/image/example.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
	<circle cx="12" cy="12" r="10"/>
	<line x1="12" y1="8" x2="12" y2="16"/>
	<line x1="8" y1="12" x2="16" y2="12"/>
</svg>

Then pass those props when rendering the SVG.

/app/index.tsx

import { View } from 'react-native';
import SvgComponent from '@/assets/image/example.svg';
 
export default function App() {
	return (
		<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
			<SvgComponent fill={'blue'} stroke={'green'} width={100} height={100} />
		</View>
	);
}

Changing the fill and stroke attributes

You can also pass attributes such as width, height, and viewBox as props.

Conclusion 🔗

Further Considerations 🔗

What are the benefits and drawbacks of using SVG images?

References 🔗

Using SVG Images in React Native and Expo with react-native-svg-transformer | PromleeBlog