Build For Scale: How to Use SVGs in React Native

Build For Scale: How to Use SVGs in React Native

Introduction

This series of build for scale: Is About the advanced way to use React native app.

I will talk about methods, best practices, how-to use guides, and advanced approaches on how to use the most used tools, and packages. Taking into account how to structure it in your app, how to architect the solution, and advanced approaches for a performant, secure, and scalable app.

This series is perfect for React Native developers of all levels who want to take their skills to the next level and build apps that stand the test of time. Whether you’re a seasoned professional or just starting, you’ll find invaluable knowledge and practical guidance to transform your React Native development journey I explained in the previous article how to optimise

As I already talked about using Images in your React native, I talked about ideas on how to optimize the usage of images. We have two types: images and icons.
For images, the best approach is to use Webp type, with React native fast image. For Icons, we use SVG. I will explain in this guide how to use SVG in the React native app.

How to use SVG in your React Native app?

1- Use React native Svg package:

https://github.com/software-mansion/react-native-svg

Insights:

1. Image Caching
2. Cross-platform compatibility
3. To add animation, you need to use a package such as React native reanimated or create your animation.

How to use it?

1. Install the necessary dependencies: You’ll need a library react-native-svg to handle SVG rendering in React Native. You can install it using npm or yarn:

npm install react-native-svg 
// or
yarn add react-native-svg

2. Link the native dependencies: For iOS, run:

npx pod-install

For Android, no additional linking steps are required.

3. Import and use the SVG component in your React Native code

• We extend properties from SvgProps to use it inside our component if needed ( SOLID principles)
• destruct the Icon props object, and define default values such as color, width, and height.
• change svg to Svg, pathto Path.

example of using BlockIcon in React Native

4. Customize and style your SVG: You can use various SVG elements like Circle, Rect, Path, etc., to create shapes. Customize attributes like cx, cy, r for circles, x, y, width, height for rectangles, and so on to define the shape and position of your SVG elements. Additionally, you can apply styles like stroke, strokeWidth, and fill to modify the appearance of the shapes. You can use https://react-svgr.com/playground/?native=true to change the Svg web to Svg React native to work on your app ( don’t forget to enable React native in the left menu).

Example of using the Icon in our code base.

check this guide for more details on how to use the package: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

Usage of SVG icon in React Native

2- Use React native Svg Transformer:

https://github.com/kristerkari/react-native-svg-transformer

Insight

• react-native-svg-transformer is a useful tool for integrating SVG files into your React Native project.
• By default, React Native doesn’t support importing SVG files directly. Instead, it requires SVG files to be converted to React Native components before they can be used.
• react-native-svg-transformer simplifies this process by automatically transforming SVG files into React Native components during the build process.
• This allows you to use SVG files directly in your React Native code, making it easier to work with vector graphics in your app.
• Animation is exported with the SVG, no need to use other libraries ( From design to developer)

How to use react-native-svg-transformer:

1. Install the package:

npm install --save-dev react-native-svg-transformer
// or 
yarn add --dev react-native-svg-transformer

2. Configure Metro bundler to use the transformer:

• For React Native versions 0.60 and above, the transformer should be automatically applied. If not, you can manually configure it in your metro.config.js file:

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

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

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

TIP For Typescript:

1. To make it work for Typescript, create a file in the @types folder( where you put your global types) called declarations.d.ts , and add the following:

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

2. create an .svgrrc in-root folder. and add the following:

{}

Example of usage:

copy and paste the icon into your assets/icon folder:

Import it and update the properties that need to be updated ( fill, height, width, or stroke for example)

The use of SVG icons in the app

Conclusion:

Always take the business case into account, if for example you have mostly icons without animation, using a design tool like figma to export. the first method is better for you. If there are different animations with icons, and complicated icons, the second approach is better. But both works fine if you have the skills needed in your team.

I share insights about React Native, React, and Typescript. Follow me on Linkedin or Medium