When you develop React Native apps, you may be asked to implement ICONS. Now, the easy way is to simply extract the icon’s.png or.jpeg file and use it in the React Native Image component. This will benefit you, but you won’t get sharp quality, and you’ll end up ballooning your app with higher image file sizes, which will increase your app bundle size.

You should not use.png or.jpeg files in your React Native app. Instead, use SVG. SVG is a vector-based format that can be extended indefinitely without compromising quality.

In this tutorial, we will demonstrate how to implement the SVG icon in your React Native application using the React-Native-SVG library.

We will introduce the following with practical examples.

  • What is scalable Vector Graphics (SVG)?
  • Does React Native support SVG?
  • Render SVG shapes in React Native
  • How to render SVG images and ICONS in React Native
  • Render SVG using XML strings

What is scalable Vector Graphics (SVG)?

SVG is an XML-based format for rendering vector images. Vector images can be scaled as much as you want without pixelation, because vector images are driven by mathematical equations and don’t have pixels like other image formats, such as.png and.jpeg.

Due to the vector nature of the SVG format, images are resolution independent. SVG images look sharp on any screen, from the gorgeous 285DPI pixel density screen on new smartphones to the 85DPI screen on standard monitors. SVG files are also small in size compared to other image formats.

If you open an SVG file in a text editor, you’ll see a large XML code with numbers and various nodes. In this tutorial, we will not focus on SVG itself. Instead, we’ll show how to render SVG on a mobile application screen.

Does React Native support SVG?

Rendering SVG in mobile applications is not as easy as it is on the web, where you can use SVG directly as an image source or paste SVG code into your HTML files. This is because there is no built-in React Native component that can render SVG directly.

Since React Native does not provide default support for SVG, we had to install some libraries from the NPM registry. Fortunately, there is a popular NPM package that works well for most uses called React-NATIVE-SVG.

Let’s start by building a React Native project. Run the following command.

npx react-native init SvgDemoApp

Copy the code

To install the react-native-SVG and react-Native-SVG-Transformer packages, go to the project directory and run the following command.

cd SvgDemoApp
npm i react-native-svg
npm i --save-dev react-native-svg-transformer

Copy the code

React – Native-SVG provides SVG support for your React Native projects on Android and iOS platforms. React-native-svg-transformer enables you to import native SVG files in React Native projects, just as you would in Creact React App projects on the network.

If you use the Expo CLI instead of the React Native CLI, you can get started by running the following command.

expo init SvgDemoApp
expo install react-native-svg

Copy the code

Render SVG shapes in React Native

Let’s see how to render SVG in your application using the React-Native-SVG library.

Open the project in your favorite editor and import the SVG and Circle components from React-Native-SVG, as shown below.

import Svg, { Circle } from 'react-native-svg';

Copy the code

The
component is a parent component that is needed to render any Svg shape. It is like a container component for all SVG shapes. If you want to render any SVG shape, such as a circle or a polygon, you must use it as a wrapper component for your SVG component. 

<Svg height="50%" width="50%" viewBox="0 0 100 100" >
       ...
</Svg>

Copy the code

The
component requires three props: height, Width, and viewBox. ViewBox props describe how your SVG is positioned in space. Height and width items are self-explanatory.

Within the
component, render the component as shown below. 

<Svg height="50%" width="50%" viewBox="0 0 100 100" >
    <Circle cx="50" cy="50" r="50" stroke="purple" strokeWidth=".5" fill="violet" />
</Svg>

Copy the code

The

component uses the X and y coordinates as props for Cx and CY, respectively. These coordinates define how and where your SVG components are positioned in the container. If you want to render a different SVG shape, such as a rectangle, you will also use x and y props, respectively.

To describe the radius of the circle, you can pass an integer as a string to the R item. You can set this value to increase or decrease the size of the rendered SVG circle.

The stroke prop can be used to indicate the color of the border around an SVG element, and strokeWidth to indicate the thickness of that border. Finally, the Fill prop represents the color of the rendered SVG element. These items are similar to attributes on native HTML< SVG > elements and are common to most SVG components.

Take a look at the entire code for rendering an SVG circle on the screen.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Svg, { Circle } from 'react-native-svg';

export default function App() {
  return (
    <View style={styles.container}>
      <Svg height="50%" width="50%" viewBox="0 0 100 100" >
        <Circle cx="50" cy="50" r="50" stroke="purple" strokeWidth=".5" fill="violet" />
      </Svg>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Copy the code

You should see a purple SVG circle, as shown below.

Notice that I wrapped the
component inside a component. You can wrap your SVG components in any generic container component, such as or any other custom wrap component. This way, you can place and position your SVG components anywhere on the screen using Flexbox layout, as demonstrated in the example above.

Similarly, you can render other SVG shapes such as rectangles, polygons, lines, ellipses, etc.

How to render SVG images and ICONS in React Native

Now that you know how to render any SVG using the React-Native-SVG library, let’s explore how to render SVG ICONS and images in your application.

Here, you need to use a different component called SvgUri, so let’s import it from the library.

import { SvgUri } from 'react-native-svg';

Copy the code

The

component accepts width,height, and URI items. You can specify uri prop to point to the URL of SVG. For example, if you want to render this SVG, you can assign the URL to the URI and then to your

component, as shown below.

<SvgUri
    width="100%"
    height="100%"
    uri="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/debian.svg"
/>

Copy the code

SRC This is similar to rendering images in React. You can specify as the URL of the image.

The code above should render SVG on the screen, as shown below.


You can use the props of the width and height components to adjust the width and height of SVG. Unlike rendering SVG shapes, you don’t need a container component.

You may encounter situations where you need to reference native SVG ICONS or images within your project. When setting up the sample project, remember that you also have the react-native SVG-Transformer installed. You can use it to render native SVG ICONS or images in your project.

First, you need to make some configuration changes to your project. Go to the metro.config.js file for your project. If the file does not exist in your project, you need to create it.

Then, add the following code to it.

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'], }, }; }) ();Copy the code

Next, download an SVG and save it in your project, similar to how you download an image that you want to use in your project. Suppose you named your SVG file image.svg. Now you can import this SVG file just like any other component.

import SVGImg from './image.svg';

Copy the code

And render it in any component.

<SVGImg width={200} height={200} />

Copy the code

The code above should render the same SVG on the screen. If your project requires you to render SVG ICONS locally, you can use this method to render different SVG ICONS in your application.

Render SVG using XML strings

In rare cases, if you cannot reference a Native SVG using a

component, you can render SVG in a React Native application using an XML string.

Assume that you have downloaded this SVG file in your project. If you go inside the SVG file, you’ll notice a bunch of XML code with a < SVG > HTML element in it. You can render an SVG directly from its XML code using the

component.

import { SvgXml } from 'react-native-svg';

Copy the code

Copy everything inside the < SVG > element from the XML code of the SVG file and store it in a variable.

Const XML = ` < SVG version = "1.1" id = "Layer_1" XMLNS = "http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"> ... </svg> `;Copy the code

Then, pass the above variables to the XML prop in your

component, as shown below.

<SvgXml xml={xml} width="100%" height="100%" />

Copy the code

And then that’s it! You should now see the SVG above on your screen.

conclusion

SVG is great for rendering images and ICONS that you want to use in React Native apps. You can even use them to create complex shapes and patterns that add even more beauty to the design of your application.

Keep in mind that storing a large number of SVG files locally will still make your application bloated. You should always avoid saving a large number of SVG files in your project and referencing them locally. If you absolutely have to, you can use this handy tool to optimize your SVG files.

I hope this tutorial makes it easier for you to use SVG in your React Native projects. You can also explore and play with the examples illustrated in the official documentation for React-Native-SVG.