I got a Header background style from Figma that contains 2 linear-gradient. One is the main color lime-ish, and the second one is faded, they are on top of each other.
background: linear-gradient(180deg, rgba(252, 252, 252, 0) 64.44%, rgba(252, 252, 252, 0.591614) 74.39%, #FCFCFC 87.18%), linear-gradient(247.04deg, #FFFB7D 6.76%, #46FFA1 87.98%, rgba(47, 217, 219, 0.93) 102.14%);
I tried to connect two linear-gradient together but with no success. And putting in location's props higher than 1 makes it crash.
<LinearGradient
colors={[
'rgba(252, 252, 252, 0)',
'rgba(252, 252, 252, 0.591614)',
'#FCFCFC',
]}
useAngle={true}
locations={[0.6444, 0.7439, 0.8718]} // 1.0214
angle={180}>
<LinearGradient
colors={[
'#FFFB7D',
'#46FFA1',
'rgba(47, 217, 219, 0.93)',
]}
useAngle={true}
locations={[0.0676, 0.8798, 1.0214]} // 1.0214
angle={247.04}
/>
</LinearGradient>
This will work you need to add start and end props
<LinearGradient
start={{x: 1, y: 0}} end={{x: 0, y: 0}}
colors={['#FFFB7D', '#46FFA1','rgba(47, 217, 219, 0.93)']}
style={{
height: 300,
width:300
}}
>
<LinearGradient
colors={['rgba(252, 252, 252, 0)', 'rgba(252, 252, 252, 0.591614)','#FCFCFC']}
style={{
height: 300,
width:300
}}
/>
</LinearGradient>