How to use SVGs in React Native.

#reactnative #react #javascript #mobile

In this post we will see how you can use SVG images in a react native application.

In React Native, normal images can be rendered without any additional changes, rendering an SVG requires additional configurations.

In your react native application, first install the following packages to use SVG images.

npm i react-native-svg
npm i react-native-svg-transformer

Enter into the android folder -> app folder -> build.gradle and add the following line at the end of the file.

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Go inside the iOS folder and run pod install.

After installing the packages and implementing the above steps, enter into this metro.config.js file and copy and paste the below code to make sure SVG files are rendered properly.

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

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();

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

Lets take you have a SVG called logo.svg, what we have to do is we have to import it in your file and use it as a normal tag with height and width as a prop. You can see the code example below.

import {View} from 'react-native';
import React from 'react';
import Logo from './logo.svg';

const App = () => {
  return (
    <View>
      <Logo height={45} width={45} />
    </View>
  );
};

export default App;