How to Use SVGs in React Native

React Native provides support for integrating SVGs seamlessly into your mobile apps. In this article, we will explore how to use SVGs in a React Native application.

What is SVG?

SVG, which stands for Scalable Vector Graphics, is an XML-based markup language for describing two-dimensional vector graphics.

Unlike other graphic formats, which are based on a grid of pixels, SVGs use math to define paths, shapes, and text for smooth and sharp rendering at any screen size.

Key features and advantages of SVGs

Scalability

One of the most significant advantages of SVGs is their scalability. Because SVGs are based on math rather than fixed pixels, they can be resized without losing quality.

Vector-based

SVGs are vector-based graphics, meaning they are composed of paths defined by math formulas rather than pixels. This vector-based approach allows SVGs to maintain their clarity and sharpness regardless of how much they are scaled or transformed.

Lightweight

Compared to raster images, which can be large in file size, SVGs are generally smaller and more efficient. This leads to faster loading times and reduced bandwidth usage, making SVGs a preferred choice mobile applications.

Support for Interactivity and Animation

SVGs support a wide range of interactive and animated features, such as hover effects, transitions, and transformations. Developers can create dynamic and engaging user experiences using SVGs, adding a layer of interactivity to boring static graphics.

Accessibility

SVGs can include text elements, making them accessible to screen readers and assistive technologies.

Prerequisites

If you are starting a new project, you can set up your React Native environment with the following commands:

npx react-native init MySvgApp

For those who have an existing project, ensure it’s updated and ready for integration.

Installation

React Native doesn’t have built-in support for SVGs, so we will use a third-party package called react-native-svg. This library offers a full set of SVG components, making it easier for React Native developers to create and manipulate SVG elements directly within their React Native apps.

To install it, run:

npm install react-native-svg

Or, if you are using yarn package manager:

yarn add react-native-svg

Key features of the react-native-svg library include:

• Wide Range of SVG Components: The library provides a variety of SVG components such as Svg, Circle, Rect, Path, Line, and more, allowing for complex and detailed SVG graphics.
• CSS-like Styling: react-native-svg supports CSS-like styling and properties, enabling developers to apply styles to SVG elements using familiar CSS syntax.
• Accessibility: The library ensures that SVG-based content remains accessible to all users, including those using assistive technologies, by supporting text elements and other accessibility features.

Using SVGs in React Native

Integrating SVGs into a React Native application involves importing SVG components from the react-native-svg library and using them to render SVG elements within your React Native components.

In this section, we’ll walk through the process of importing SVG components, rendering SVG elements, and displaying the SVG component in your main application.

Importing and Rendering SVG Elements

Before you can use SVG components in your React Native application, you need to import them from the react-native-svg library.

Below is an example of a simple React Native component that renders a Circle and a Rect using SVG components:

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

export default function Example() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Svg height="400" width="400">
        <Circle cx="100" cy="100" r="80" fill="blue" />
        <Rect x="200" y="200" width="160" height="160" fill="red" />
      </Svg>
    </View>
  )
}

In the above code:

• Inside the component, we use the Svg component to create an SVG container with a height and width of 400 units.
• We use the Circle component to draw a blue circle with a center at (100, 100) and a radius of 80 units.
• We use the Rect component to draw a red rectangle with coordinates (200, 200) and dimensions width="160" and height="160" units.
• The fill attribute sets the color for the SVG elements.

Explanation of SVG attributes used in the example:

• cx and cy: Center coordinates of the Circle.
• r: Radius of the Circle.
• x and y: Coordinates of the top-left corner of the Rect.
• width and height: Dimensions of the Rect.
• fill: Color of the SVG elements.

LinearGradient

In addition to basic shapes like circles and rectangles you can also apply gradients to SVG elements in React Native using the LinearGradient component.

Below is an example of how to use LinearGradient for background:

import React from 'react';
import { View } from 'react-native';
import Svg, { Circle, Rect, LinearGradient, Stop } from 'react-native-svg';

export default function Example() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Svg height="400" width="400">
        <Circle cx="100" cy="100" r="80" fill="url(#linear_1)" />
        <Rect x="200" y="200" width="160" height="160" fill="url(#linear_1)" />

        <LinearGradient
          id="linear_1"
          x1="0"
          y1="0"
          x2="400"
          y2="400"
          gradientUnits="userSpaceOnUse">
          <Stop stopColor="rgb(0, 255, 135)" />
          <Stop offset="1" stopColor="rgb(96, 239, 255)" stopOpacity="1" />
        </LinearGradient>
      </Svg>
    </View>
  )
}

SvgXml

Since SVG is based on XML, you can also directly include SVG code within your React Native components.

This can be useful when you have a bit more complex SVG graphics or just want to reuse the existing SVG code.

import React from "react";
import { View } from "react-native";
import { SvgXml } from "react-native-svg";

const xml = `
<svg viewBox="0 0 133 89">
  <defs>
    <polygon id="path-1" points="8.40684451e-05 0.437359162 132.216628 0.437359162 132.216628 88.94 8.40684451e-05 88.94"></polygon>
  </defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Group-3">
      <mask id="mask-2" fill="white">
        <use xlink:href="#path-1"></use>
      </mask>
      <g id="Clip-2"></g>
      <path d="M66.208,44.247 C66.667,43.978 66.978,43.822 67.261,43.626 C85.526,30.962 103.769,18.266 122.083,5.673 C123.947,4.391 126.327,4.044 128.636,4.337 C129.222,4.412 129.843,4.967 130.259,5.461 C131.397,6.811 132.018,8.414 132.04,10.192 C132.116,16.351 132.211,22.509 132.215,28.667 C132.224,40.506 132.196,52.346 132.123,64.185 C132.113,65.68 131.829,67.193 131.502,68.661 C131.236,69.855 130.315,70.538 129.08,70.286 C127.772,70.02 126.375,69.749 125.258,69.078 C121.458,66.793 117.75,64.354 114.042,61.918 C113.299,61.43 112.805,61.404 112.053,61.926 C99.944,70.349 87.814,78.743 75.676,87.125 C74.827,87.712 73.932,88.291 72.975,88.651 C69.849,89.827 66.678,87.92 66.222,84.607 C66.054,83.386 66.041,82.137 66.04,80.901 C66.035,69.301 66.048,57.703 66.053,46.103 C66.054,45.828 66.023,45.551 65.994,45.051 C64.711,45.856 63.511,46.543 62.378,47.329 C44.933,59.422 27.502,71.535 10.047,83.616 C8.943,84.379 7.748,85.14 6.48,85.516 C2.996,86.547 0.09,84.181 0.043,80.349 C-0.016,75.549 0.003,70.75 0.003,65.95 C0.004,51.75 0.01,37.551 0.026,23.352 C0.027,22.597 0.058,21.825 0.211,21.09 C0.641,19.03 2.152,18.156 4.149,18.797 C4.75,18.99 5.338,19.281 5.87,19.624 C9.229,21.788 12.592,23.946 15.91,26.172 C18.322,27.79 19.502,27.842 21.9,26.173 C32.99,18.454 44.075,10.728 55.174,3.023 C56.286,2.251 57.427,1.47 58.659,0.935 C62.144,-0.58 65.765,1.504 65.972,5.291 C66.202,9.519 66.121,13.764 66.128,18.002 C66.144,26.441 66.128,34.881 66.128,43.321 C66.128,43.557 66.167,43.792 66.208,44.247" id="Fill-1" fill="#0469FF" mask="url(#mask-2)"></path>
    </g>
  </g>
</svg>
`;

export default function Example() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <SvgXml xml={xml} height="150" width="150" />
    </View>
  );
}

Conclusion

As you continue to explore the capabilities of SVGs and the react-native-svg library, you’ll discover a wealth of features and functionalities that can help you create dynamic and interactive user interfaces for your mobile applications.

We encourage you to delve deeper into SVG documentation and experiment with different SVG components and attributes to unlock the full potential of SVGs in your React Native applications.

Integrating SVGs into a React Native app is a straightforward process that offers numerous benefits, such as scalability, performance optimization, and enhanced visual quality. By following the steps outlined in this article, you can easily incorporate SVG graphics into your React Native projects.