This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 51).

A library that allows using SVGs in your app.

This library is listed in the Expo SDK reference because it is included in Expo Go. You may use any library of your choice with development builds.

react-native-svg allows you to use SVGs in your app, with support for interactivity and animation.

Installation

If you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

API

import * as Svg from 'react-native-svg';

Svg

A set of drawing primitives such as Circle, Rect, Path, ClipPath, and Polygon. It supports most SVG elements and properties. The implementation is provided by react-native-svg, and documentation is provided in that repository.

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

export default function SvgComponent(props) {
  return (
    <Svg height="50%" width="50%" viewBox="0 0 100 100" {...props}>
      <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
      <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" />
    </Svg>
  );
}

Pro tips

Here are some helpful links that will get you moving fast!

• Looking for SVGs? Try the noun project.
• Create or modify your own SVGs for free using Figma.
• Optimize your SVG with SVGOMG. This will make the code smaller and easier to work with. Be sure not to remove the viewbox for best results on Android.
• Convert your SVG to an Expo component in the browser using React SVGR.