I am trying to make some nice UI combining linear gradient, radial gradient and blur radius in react native. This is CSS style I want to convert in rn:

border-radius: 7px;
background: var(--Menu-background, radial-gradient(82.95% 91.79% at 50% 2.24%, rgba(199, 95, 216, 0.30) 0%, rgba(199, 95, 216, 0.00) 100%), linear-gradient(0deg, var(--components-menu-menu-bg-tertiary, rgba(28, 27, 32, 0.60)) 0%, var(--components-menu-menu-bg-tertiary, rgba(28, 27, 32, 0.60)) 100%), linear-gradient(180deg, rgba(28, 27, 32, 0.05) 0%, rgba(18, 5, 21, 0.50) 100%));
/* Background Blur */
box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.25) inset;
backdrop-filter: blur(4px);

I tried to do it with react-native-skia. But if i for example create something like this:

<Canvas
      style={{
        width: Dimensions.get('window').width,
        height: 400,
      }}>
      <Rect x={0} y={0} width={Dimensions.get('window').width} height={256}>
        <LinearGradient
          start={vec(0, 0)}
          end={vec(Dimensions.get('window').width, 256)}
          colors={['green', 'red']}
        />
        <RadialGradient c={vec(0, 0)} r={128} colors={['blue', 'yellow']} />
      </Rect>
    </Canvas>

I will get only last one applied and it is radial gradient. Not sure what is best way to apply it and combine those two.