Use SVGs in React Native — A Beginner’s Guide

This article is part of a series that document my first react native project. They encompass a variety of topics, and come in different shapes and flavours — some are hands-on notes, some are best practices (learn-and-think products by me), and some are an endeavour to get an in-depth understanding of the underlying mechanisms of how React / React Native works.

Library Dependencies

In order to use SVGs in React Native as React Components, you need to install two libraries:

react-native-svg
react-native-svg-transformer

Modify metro.config.js

For React Native v0.59 or newer, merge the contents from your project’s metro.config.js file with this config (create the file if it does not exist already).

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"]
    }
  }
})()

Implementation

Basic implementation is to import SVG files and store them under your app folders. Then you have two options here: either use it directly as a React Element in your code, or if you are developing with a team of developers and you like to standardise the usage of SVGs throughout the app, you can opt for using a “processor” for the SVG files (you will understand what it means instantly by looking at the code).

Vòlia! There you have it!