Gradient SVG render on web but not on mobile - reactjs

Question

I'm using react-native-svg to render a chart, which contain a gradient, work perfectly on web, but when use the same code on react-native it won't work
Here is the react-native code
const data = [
{x: new Date(2000, 3, 2), y: 100},
{x: new Date(2003, 4, 3), y: 120},
{x: new Date(2002, 5, 4), y: 140},
{x: new Date(2005, 6, 5), y: 150},
{x: new Date(2006, 7, 6), y: 130},
{x: new Date(2007, 8, 7), y: 120},
{x: new Date(2008, 9, 8), y: 150},
];
export default function Chart4() {
const dateData = data.map(i => i.x);
return (
<Svg>
<Defs>
<LinearGradient id="myGradient" x1="0" y1="0" x2="0" y2="1.3">
<Stop offset="0%" stopColor="#86CD9B" stop-opacity={1} />
<Stop offset="100%" stopColor="white" stop-opacity={1} />
</LinearGradient>
</Defs>
<VictoryChart scale={{x: 'time', y: 'linear'}}>
<VictoryAxis dependentAxis />
<VictoryAxis
tickValues={dateData}
tickFormat={x => {
return x.toLocaleString('vn-vn', {
month: 'short',
day: 'numeric',
});
}}
/>
<VictoryArea
data={data}
style={{
data: {fill: 'url(#myGradient)'},
}}
/>
<VictoryScatter
data={data}
style={{
data: {
stroke: '#86CD9B',
fill: 'white',
strokeWidth: 1,
fillOpacity: 1,
},
}}
labels={({datum}) =>
`x: ${datum.x.toLocaleString('vn-vn', {
month: 'short',
day: 'numeric',
})} \n y:${datum.y}`
}
labelComponent={
<VictoryTooltip
renderInPortal={false}
dy={0}
centerOffset={{x: 25}}
/>
}
/>
</VictoryChart>
</Svg>
);
}
And it show nothing
But on web ( react ) , it work perfectly, here is codesanbbox for that https://codesandbox.io/s/chart-blood-glucose-031dn?file=/src/App.js
What going on, please help, thank a lots