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.
Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
-
npx expo install react-native-svg
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
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>
);
}
Here are some helpful links that will get you moving fast!
viewbox
for best results on Android.