How to show gradient SVG image in React Native - react-native

Question

I tried the lib react-native-svg-uri to show my gradient SVG but its background was black in screen as attached picture.
Anything is wrong with my code below while I follow guide in this link: https://www.npmjs.com/package/react-native-svg
const iconSvg = require('../images/home_option2/bao_cao.svg')
<SvgUri height={96} width={96} source={iconSvg}/>
Here is SVG code:
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<defs>
<linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#68B9FE"/>
<stop offset="100%" stop-color="#627CFF"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<rect width="48" height="48" fill="url(#a)" rx="24"/>
<path fill="#FFF" d="M17.02 14.692v17.03c0 .406-.334.74-.741.74a.743.743 0 0 1-.74-.74V16.384h-.847A1.69 1.69 0 0 0 13 18.077v15.23A1.69 1.69 0 0 0 14.692 35h18.674c.899 0 1.634-.73 1.634-1.634V14.692A1.69 1.69 0 0 0 33.308 13l-14.702.106c-.936 0-1.587.65-1.587 1.586zm3.49 1.693h4.442c.407 0 .74.333.74.74s-.333.74-.74.74H20.51a.743.743 0 0 1-.74-.74c0-.407.332-.74.74-.74zm0 8.461h7.827c.407 0 .74.333.74.74 0 .408-.333.74-.74.74H20.51a.743.743 0 0 1-.74-.74c0-.407.332-.74.74-.74zm10.365 5.712H20.51a.743.743 0 0 1-.74-.74c0-.408.332-.741.74-.741h10.365c.407 0 .74.333.74.74 0 .408-.333.74-.74.74zm0-8.462H20.51a.743.743 0 0 1-.74-.74c0-.407.332-.74.74-.74h10.365c.407 0 .74.333.74.74s-.333.74-.74.74z"/>
</g>
</svg>
Anyone can help, please!

Answer 1

The problem lies in your .svg file. You are probably using an older svg standard. I transformed your .svg file and with the new one it works.
New SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><path d="M48,24c0,-13.246 -10.754,-24 -24,-24c-13.246,0 -24,10.754 -24,24c0,13.246 10.754,24 24,24c13.246,0 24,-10.754 24,-24Z" style="fill:url(#_Linear1);"/><path d="M17.02,14.692l0,17.03c0,0.406 -0.334,0.74 -0.741,0.74c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74l0,-15.338l-0.847,0c-0.001,0 -0.001,0 -0.002,0c-0.927,0 -1.69,0.763 -1.69,1.69c0,0.001 0,0.002 0,0.003l0,15.23c0,0.001 0,0.002 0,0.003c0,0.927 0.763,1.69 1.69,1.69c0.001,0 0.001,0 0.002,0l18.674,0c0.899,0 1.634,-0.73 1.634,-1.634l0,-18.674c0,-0.001 0,-0.001 0,-0.002c0,-0.927 -0.763,-1.69 -1.69,-1.69c-0.001,0 -0.001,0 -0.002,0l-14.702,0.106c-0.936,0 -1.587,0.65 -1.587,1.586l0.001,0Zm3.49,1.693l4.442,0c0.407,0 0.74,0.333 0.74,0.74c0,0.407 -0.333,0.74 -0.74,0.74l-4.442,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.407 0.332,-0.74 0.74,-0.74Zm0,8.461l7.827,0c0.407,0 0.74,0.333 0.74,0.74c0,0.408 -0.333,0.74 -0.74,0.74l-7.827,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.407 0.332,-0.74 0.74,-0.74Zm10.365,5.712l-10.365,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.408 0.332,-0.741 0.74,-0.741l10.365,0c0.407,0 0.74,0.333 0.74,0.74c0,0.408 -0.333,0.74 -0.74,0.74l0,0.001Zm0,-8.462l-10.365,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.407 0.332,-0.74 0.74,-0.74l10.365,0c0.407,0 0.74,0.333 0.74,0.74c0,0.407 -0.333,0.74 -0.74,0.74Z" style="fill:#fff;"/></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.93915e-15,48,-48,2.93915e-15,24,0)"><stop offset="0" style="stop-color:#68b9fe;stop-opacity:1"/><stop offset="1" style="stop-color:#627cff;stop-opacity:1"/></linearGradient></defs></svg>
Demo:
import SvgUri from 'react-native-svg-uri';
import img from './test2.svg'; // import .svg file
<SvgUri
width="200"
height="200"
source={img}
/>
Result: