react native why my svg icon is not showing? - react-native

Question

Why my paypal icon is not showing ?
I have a SVG HTML code and I convert it into react component:
Paypal svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="100.000000pt" height="26.000000pt" viewBox="0 0 100.000000 26.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,26.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M37 253 c-3 -5 -10 -42 -16 -83 -7 -41 -14 -87 -17 -103 -5 -25 -3
-27 24 -27 27 0 31 4 37 40 6 37 9 40 39 40 17 0 43 8 56 17 l25 17 -19 -22
c-11 -12 -26 -22 -35 -23 -11 0 -12 -2 -3 -6 7 -3 23 2 36 10 20 13 23 23 21
64 -2 26 -4 51 -4 54 -3 22 -133 41 -144 22z"/>
<path d="M319 198 c-1 -2 -7 -36 -13 -75 -11 -68 -11 -73 6 -73 11 0 18 7 18
20 0 21 5 24 51 34 32 7 54 49 39 77 -8 14 -21 19 -55 19 -25 0 -45 -1 -46 -2z
m64 -34 c11 -11 -5 -34 -24 -34 -21 0 -22 1 -13 24 6 16 25 21 37 10z"/>
<path d="M711 144 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
<path d="M436 131 c-19 -21 -21 -55 -3 -69 6 -5 31 -10 54 -9 39 0 42 2 48 31
4 17 9 38 11 48 7 24 -88 24 -110 -1z m64 -17 c11 -12 10 -18 -3 -32 -16 -15
-18 -15 -34 0 -13 14 -14 20 -3 32 16 20 24 20 40 0z"/>
<path d="M560 145 c0 -2 7 -23 16 -45 15 -38 15 -42 0 -59 -21 -23 -20 -31 2
-31 24 1 119 140 95 140 -9 0 -27 -12 -39 -27 l-22 -28 -7 28 c-5 17 -14 27
-26 27 -10 0 -19 -2 -19 -5z"/>
<path d="M80 90 c0 -5 7 -7 15 -4 8 4 15 8 15 10 0 2 -7 4 -15 4 -8 0 -15 -4
-15 -10z"/>
<path d="M66 33 c-6 -14 -5 -15 5 -6 7 7 10 15 7 18 -3 3 -9 -2 -12 -12z"/>
</g>
</svg>
https://react-svgr.com/playground/?native=true
I convert it and added it
<Pressable style={s.btn}>
<Text>Paypal</Text>
<Svg
xmlns="http://www.w3.org/2000/svg"
width={133.333}
height={34.667}
viewBox="0 0 100 26"
>
<Path d="M3.7.7c-.3.5-1 4.2-1.6 8.3C1.4 13.1.7 17.7.4 19.3-.1 21.8.1 22 2.8 22c2.7 0 3.1-.4 3.7-4 .6-3.7.9-4 3.9-4 1.7 0 4.3-.8 5.6-1.7l2.5-1.7-1.9 2.2C15.5 14 14 15 13.1 15.1c-1.1 0-1.2.2-.3.6.7.3 2.3-.2 3.6-1 2-1.3 2.3-2.3 2.1-6.4-.2-2.6-.4-5.1-.4-5.4C17.8.7 4.8-1.2 3.7.7zM31.9 6.2c-.1.2-.7 3.6-1.3 7.5-1.1 6.8-1.1 7.3.6 7.3 1.1 0 1.8-.7 1.8-2 0-2.1.5-2.4 5.1-3.4 3.2-.7 5.4-4.9 3.9-7.7-.8-1.4-2.1-1.9-5.5-1.9-2.5 0-4.5.1-4.6.2zm6.4 3.4c1.1 1.1-.5 3.4-2.4 3.4-2.1 0-2.2-.1-1.3-2.4.6-1.6 2.5-2.1 3.7-1zM71.1 11.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM43.6 12.9c-1.9 2.1-2.1 5.5-.3 6.9.6.5 3.1 1 5.4.9 3.9 0 4.2-.2 4.8-3.1.4-1.7.9-3.8 1.1-4.8.7-2.4-8.8-2.4-11 .1zm6.4 1.7c1.1 1.2 1 1.8-.3 3.2-1.6 1.5-1.8 1.5-3.4 0-1.3-1.4-1.4-2-.3-3.2 1.6-2 2.4-2 4 0zM56 11.5c0 .2.7 2.3 1.6 4.5 1.5 3.8 1.5 4.2 0 5.9-2.1 2.3-2 3.1.2 3.1 2.4-.1 11.9-14 9.5-14-.9 0-2.7 1.2-3.9 2.7l-2.2 2.8-.7-2.8C60 12 59.1 11 57.9 11c-1 0-1.9.2-1.9.5z" />
<Path d="M8 17c0 .5.7.7 1.5.4.8-.4 1.5-.8 1.5-1 0-.2-.7-.4-1.5-.4S8 16.4 8 17zM6.6 22.7c-.6 1.4-.5 1.5.5.6.7-.7 1-1.5.7-1.8-.3-.3-.9.2-1.2 1.2z" />
</Svg>
</Pressable>
But I see nothing what I am doing wrong ?

Answer 1

I believe you don't need SVG component to display SVG. You can require it and use it as your Image component source:
const paypal = require('path_to_file/paypal.svg');
Then you should add this to your return:
<Image source={paypal} style={{width: 50px, height: 50px}} />
Don't forget to set width and height, otherwise your image won't display