react-native-svg-uri
Render SVG images in React Native from an URL or a static fileThis was tested with RN 0.33 and react-native-svg 4.3.1 (depends on this library) react-native-svg
Not all the svgs can be rendered, if you find problems fill an issue or a PR in order to contemplate all the cases
Install library from
npm
npm install react-native-svg-uri --save
Link library react-native-svg
react-native link react-native-svg # not react-native-svg-uri !!!
Props
| Prop | Type | Default | Note | |---|---|---|---| |source
| ImageSource
| | Same kind of source
prop that <Image />
component has
| svgXmlData
| String
| | You can pass the SVG as String directly
| fill
| Color
| | Overrides all fill attributes of the svg fileKnown Bugs
- ANDROID There is a problem with static SVG file on Android,
Usage
Here's a simple example:import SvgUri from 'react-native-svg-uri';
const TestSvgUri = () => (
<View style={styles.container}>
<SvgUri
width="200"
height="200"
source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
/>
</View>
);
or a static file
<SvgUri width="200" height="200" source={require('./img/homer.svg')} />
This will render:
Testing
- Make sure you have installed dependencies with
npm i
- Run tests with
npm test