A library that allows using SVGs in your app.
GitHub
npm
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.
-
npx expo install react-native-svg
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.
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 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.