How to handle SVG images in React Native

If you want to start developing right away and not think about adding support for SVG images plus other useful functionalities(navigation, state management, Typescript), you can check out the starter project that I created.

Image file types.

Displaying images in React Native and native mobile development, in general, has always been harder as it should have been. Preparing 3 different image sizes for iOS and 5 for Android is time-consuming. The time that would be better spent elsewhere is now wasted with exporting different image sizes or having a back and forth with a designer. Now all of this hassle can be minimized by just using images that are in the SVG format. Both native Android and iOS have added support in the past couple of years. What about React Native? The process is a bit more complicated than on iOS (where you can drag and drop SVG images into Xcode and the IDE will handle everything) but still straightforward and easy to use once you set everything up.

1. Installing dependencies

Let’s assume you have already set up your project with react-native init or any other way. Now you want to add SVG image support. The first thing to do is to install the required dependencies.

1. Run npm install

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

react-native-svg provides SVG support to React Native on iOS and Android and a compatibility layer for the web.

react-native-svg-transformer allows you to import SVG files in your React Native project the same way that you would in a Web application when using a library like SVGR to transform your imported SVG images into React components.

2. Run pod install

Navigate to your ios folder and install pods.

cd ios && pod install

3. Add metro.config file

Open your metro.config.js file or create one and add support for SVGR.

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

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

4. (Optional) Add support for Typescript

Open your declaration.d.ts file or create it and add support for SVG files. This way you won't get errors when import SVG images into a TypeScript file.

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

These are all the steps that need to be done. As you can see there are not that many steps and generally, once you set it up it works without any issues.

2. Usage

import CarIcon from '../../assets/images/CarIcon.svg'
<View>
  <CarIcon height = {20} width = {20}/>
</View>

3. Final thoughts

As you can see from the tutorial it’s very simple to add support SVG images.

Further reading and useful links:

[1] React Native starter project

[2] React Native SVG (react-native-svg)

[3] React Native SVG Transformer (react-native-svg-transformer)

[4] Talk about using SVG in React Native