How to Add SVGs to Your React Native App: A Quick and Simple Guide

SVGs (Scalable Vector Graphics) are a fantastic way to add crisp, scalable graphics to your React Native app. They’re perfect for icons, logos, and illustrations because they look sharp at any size. Here’s a quick and easy guide to help you get started with SVGs in React Native.

Step 1: Install the Necessary Packages
To use SVGs in React Native, you need the react-native-svg library. If you’re using Expo, you’re already set! For React Native CLI users, follow these steps:

Open your terminal.

Run the following command:

npm install react-native-svg

or

yarn add react-native-svg

For React Native versions 0.60 and above, this library will be automatically linked. For older versions, you might need to link it manually:

react-native link react-native-svg

Step 2: Import SVG Components
In your React Native component, import Svg and other components from react-native-svg. Here’s how you do it:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Path } from 'react-native-svg';

Step 3: Add Your SVG Code
You can write SVG code directly in your component or use an SVG file. Here’s a simple inline SVG example:

const MySVGIcon = () => (
  <Svg width="100" height="100" viewBox="0 0 100 100">
    <Path
      d="M50 0 L100 50 L50 100 L0 50 Z"
      fill="blue"
    />
  </Svg>
);

Step 4: Use SVG Files (Optional)

If you prefer using SVG files, you can use react-native-svg-transformer.

Install the transformer:

npm install react-native-svg-transformer

or

yarn add react-native-svg-transformer

Create or update your metro.config.js file with:

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

const defaultConfig = getDefaultConfig(__dirname);

const {
  resolver: { sourceExts, assetExts },
} = defaultConfig;

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
};

module.exports = mergeConfig(defaultConfig, config);

Import your SVG file like this:

import React from 'react';
import { View } from 'react-native';
import MyIcon from './path/to/icon.svg'; // Your SVG file path

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <MyIcon width={100} height={100} />
  </View>
);

export default App;

Step 5: Customize and Enjoy!
You can customize your SVGs by adjusting their size and colors:

const MySVGIcon = ({ width = 100, height = 100, color = 'blue' }) => (
  <Svg width={width} height={height} viewBox="0 0 100 100">
    <Path
      d="M50 0 L100 50 L50 100 L0 50 Z"
      fill={color}
    />
  </Svg>
);

Wrapping Up
Adding SVGs to your React Native app is a breeze and adds a polished look to your user interface. Whether you choose to use inline SVG code or import SVG files, you’ll have sharp, scalable graphics that enhance your app's design.

Dive into your project and start integrating those SVGs today. Happy coding!

-Abhishek