How to show SVG files in react-native - react-native

Question

I want to render images from SVG files generated by illustrator, I am using react-native 0.59, react-native-svg and react-native-svg-uri,
Here's my jsx:
<View style={styles.aboutSection}>
<SvgUri
width="150"
height="150"
source={require('../../assets/images/logo_blue.svg')}
/>
</View>
and my SVG file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-574 823.3 20 14" style="enable-background:new -574 823.3 20 14;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2A327B;}
</style>
<g>
<g transform="translate(-320.000000, -1983.000000)">
<g transform="translate(40.000000, 1680.000000)">
<path class="st0" d="M-284,1140.3c-7.4,0-10-7-10-7s3.4-7,10-7c6.7,0,10,7,10,7S-277.3,1140.3-284,1140.3L-284,1140.3z
M-284,1129.3c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S-281.8,1129.3-284,1129.3L-284,1129.3z M-284,1135.3c-1.1,0-2-0.9-2-2
s0.9-2,2-2s2,0.9,2,2S-282.9,1135.3-284,1135.3L-284,1135.3z"/>
</g>
</g>
</g>
</svg>
And is not showing when I debug, what I am missing and is there a better way to show images from SVG files?
Is converting them to jsx using SVGR is a better approach or there are other ways to do so.

Answer 1

Since the package seems to be no more maintained, after a good time of searching around, I’ve eventually ended up with using custom web fonts with the help of react-native-icons:
(Optional) Minimizing the size of SVG, I used for this purpose SVG minizer
Convert fonts using icomoon
Add generated font to assets/fonts folder in your root (or any other path)
Add a linker in your packages.json
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
And link it using react-native link
To create a custom icon component I’ve used react-native-icons, it
has a createIconSetFromIcoMoon function to render font generated from IcoMoon, and also a one generated from Fontello
In my custom component MyIcon.js, I also add the selection.json generated.
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import MyIconConfig from '../../../selection.json';
const MyIcon = createIconSetFromIcoMoon(MyIconConfig, 'MyIcon-icons', 'MyIcon-icons.ttf');
//name of font I used in the website to generate font and name of ttf files generated
export default MyIcon;
I use it in my component, I the names of icons I've found them in demo.html:
<MyIcon
style={styles.customStyle}
name="previous"
size={18}
color=’red’
/>
Note: Make sure you use version >6.3.0 of react-native-icons, and link your assets by running:
react-native link ./assets/fonts/