How to show SVG file on React Native?
I used the following solution:
- Convert
.svg
image to JSX with https://svg2jsx.herokuapp.com/ - Convert the JSX to
react-native-svg
component with https://svgr.now.sh/ (check the "React Native checkbox)
I posted another solution (react-native-vector-icons) here. This approach use a vector font (from SVG) instead a SVG file.PS: react-native-vector-icons is the best approach to deal with SVG in react-native, it's also works in iOS and android. You will be able to change the color and size of your vector icon.
If you want to insert a svg directly into your app, you can try a 3rd party library : react-native-svg. With more than 3k stars in github it's one of the best approach.
Install any one of these using npm
:
Then link it to native using
react-native link react-native-svg
An example with react-native-svg-uri
:
import * as React from 'react';import SvgUri from 'react-native-svg-uri'; // SVG Packageimport testSvg from './test.svg'; // SVG Fileexport default () => ( <SvgUri width="200" height="200" svgXmlData={testSvg} />);