How to covert two linear gradient from CSS to linear gradient in React Native?-CodePudding

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>

CodePudding user response：

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>