LinearGradient in react-native-svg not working - react-native

Question

I am trying to use SVG in my react native project. This is the code for my component:
<Svg xmlns="http://www.w3.org/2000/svg" width="100%" height="507" viewBox="0 0 375 507" style={{position:'absolute', bottom:0}}>
<Defs>
<ClipPath id="a">
<Rect class="a" fill='#fff' stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/>
</ClipPath>
<LinearGradient id="b" clipPath='url(#a)' x1="0.5" x2="-0.031" y2="1.477" gradientUnits="objectBoundingBox">
<Stop offset="0" stopColor="rgb(76,209,149)" />
<Stop offset="1" stopColor="rgb(170,221,100)" />
</LinearGradient>
</Defs>
<G class="b" transform="translate(0 -160)">
<Circle class="c" cx="334.249" cy="334.249" r="334.249" transform="translate(-146.354 164.646)" fill='url(#b)' />
</G>
</Svg>
The Output I'm getting is:
https://i.stack.imgur.com/mGaBg.png

Answer 1

I think #enxaneta is right, clip-path seems to not exist on react-native-svg please refer to the documentation, you may find on the docs here react-native-svg #LinearGradient
I think you should have to reference it like this:
<Rect class="a" fill="url(#yourGradientId)" stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/>
where fill should be reference to your gradient id i.e. fill=url(#b)
I've used <Path> to achieve the results below
Note: I have achieve this by using two shapes on top of each other:
A component with background gradient using react-native-linear-gradient
And the LinearGradient from react-native-linear-gradient
Please refer to the codes below.
Code of example above
import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
import Gradient from 'react-native-linear-gradient'
const { width, height } = Dimensions.get('window')
<Gradient style={{height: height * .25,}}
colors={ ['#FFD080', 'red'] }
start={{ x: 0, y: 0}}
end={{ x:1, y: 1}}
locations={[0.18, 1, 1]}>
<Svg
height={height * .44}
width={width}
viewBox="0 0 1440 320"
style={{ position: 'relative', top: height * .069 }}
>
<Defs>
<LinearGradient id="path" x1="0" y1="0" x2="1" y2="1">
<Stop offset="0" stopColor="#FFD080" stopOpacity="1" />
<Stop offset="1" stopColor="red" stopOpacity="1" />
</LinearGradient>
</Defs>
<Path fill="url(#path)"
d="M0,96L48,133.3C96,171,192,245,288,229.3C384,213,480,107,576,74.7C672,43,768,85,864,133.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"/>
</Svg>
</Gradient>

Answer 2

I found a solution that instead of using the svgs having gradient,I converted the SVG into a Lottie file. that works great and as an extra advantage, we can transform the SVG into a simple animation :)