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\

Answer 1

Try positioning LinearGradient absolute adding style to LinearGradient

 <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>

styles.linearGradient = {
 ...,
 position:'absolute',
 width:'100%',
 height:'100%'
}

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:

Answer 3

Just set opacity: 0.5 for styles.linearGradient