How to have a transparent gradient over an Image in React Native iOS?

Question

I have been dealing with the a gradient rectangle over an Image that has a black and a transparent sides, I have been looking about a gradient object in react native and I didn't found, but there is a react-native module that does this, but the problem is that it does work in android the transparency, but in iOS, it doesn't work, it shows white in place of the transparent side

and than I was looking about a native iOS solution, I did but it's a bit complex, and I can't implement in react native this the snippet

CAGradientLayer *gradientMask = [CAGradientLayer layer];
gradientMask.frame = self.imageView.bounds;
gradientMask.colors = @[(id)[UIColor whiteColor].CGColor,
                    (id)[UIColor clearColor].CGColor];
self.imageView.layer.mask = gradientMask; <-- // looking for a way to achieve this in react native 

this is my react native code

    <Image ref={r => this.image = r}  style={styles.container} source={require('../assets/default_profile_picture.jpg')}>
      <LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]}  colors={['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']} style={styles.linearGradient}>
      </LinearGradient>
    </Image>

I don't know how to pass LinearGradient to Image as a mask

Answer 1

Just set opacity: 0.5 for styles.linearGradient

Answer 2

You can use my react-native-image-filter-kit library to achieve this:

import { Image } from 'react-native'
import {
  SrcOverComposition,
  LinearGradient
} from 'react-native-image-filter-kit'

const masked = (
  <SrcOverComposition
    resizeCanvasTo={'dstImage'}
    dstImage={
      <Image
        style={{ width: 320, height: 320 }}
        source={{ uri: 'https://una.im/CSSgram/img/cacti.jpg' }}
      />
    }
    srcResizeMode={{ width: 1, height: 0.5 }}
    srcAnchor={{ y: 0 }}
    srcImage={
      <LinearGradient
        start={{ x: 0, y: 0 }}
        end={{ x: 0, y: '100h' }}
        colors={['rgba(0,0,0,0.80)', 'rgba(0,0,0,0.00)']}
      />
    }
  />
)

Android:

iOS: