How to add SVG in react native

React Native is a popular framework for building mobile applications using JavaScript and React. One common requirement in mobile app development is the use of Scalable Vector Graphics (SVG) for icons, illustrations, and other graphical elements. SVGs are resolution-independent and can scale without losing quality, making them ideal for mobile applications with varying screen sizes and resolutions.

In this blog, we will guide you through the steps to add SVG support in a React Native project using the react-native-svg library. We will also configure the necessary settings in the metro.config.js file to ensure proper handling of SVG files.

Step 1: Install the Required Packages
First, you need to install the react-native-svg library and the react-native-svg-transformer package. These packages will allow you to use SVGs in your React Native project and transform them appropriately.

Run the following command to install these packages:

npm install react-native-svg react-native-svg-transformer

or if you are using yarn:

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

Step 2: Configure Metro Bundler
The next step is to configure the Metro bundler to handle SVG files correctly. You need to modify the metro.config.js file in the root directory of your project.

If you don't have a metro.config.js file already, create one and add the following code:

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

const defaultConfig = getDefaultConfig(__dirname);

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

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

This configuration does the following:

Uses react-native-svg-transformer as the Babel transformer for SVG files.
Updates the resolver settings to ensure SVG files are treated as source files rather than assets.
Step 3: Use SVG in Your React Native Component
Now that you have configured your project to support SVGs, you can start using them in your React Native components.

First, create an SVG file (e.g., logo.svg) and place it in your project's directory.

Next, import the SVG file in your component and use it as a React component:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Logo from './path/to/logo.svg'; // Adjust the path accordingly

const App = () => {
  return (
    <View style={styles.container}>
      <Logo width={200} height={200} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

In this example, the Logo component represents your SVG file. You can adjust the width and height properties to scale the SVG as needed.

Conclusion
Adding SVG support in a React Native project is straightforward with the help of react-native-svg and react-native-svg-transformer. By following the steps outlined in this blog, you can easily integrate SVGs into your React Native applications, ensuring your graphics look sharp on all devices.

Happy coding!