How to show local SVG image in Image component of react-native - react-native

Question

I am developing a react-native app. I have a bunch of SVG files locally in my project. I would like to use my custom component to render Text and SVG image.
Here is my custom component which is supposed to render a Text and a Image for static SVG file:
import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
export default MyComponent = ({svgFile, text}) => {
return (<View style={styles.line}>
<Image source={svgFile} />
<Text>{text}</Text>
</View>)
}
In my screen I try to show several MyComponent each renders a specific SVG image:
<View>
<MyComponent
svgFile={require('../assets/images/tiger.svg')}
text="tiger"
/>
<MyComponent
svgFile={require('../assets/images/elephant.svg')}
text="elephant"
/>
...
</View>
But only text is shown, the image is not shown. How to show a SVG file with a Image component ? I need to have it work on both Android and iOS.

Answer 1

The Image component in React Native doesn't support SVG rendering. I would suggest utilizing react-native-svg to render your SVGs in your custom component. Import your svg file into the component, and render it using <SvgXml />:
export default MyComponent = ({svgFile, text}) => {
return (<View style={styles.line}>
<SvgXml xml={svgFile} />
<Text>{text}</Text>
</View>)
}