How to have a transparent gradient over an Image in React Native iOS? : <p>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</p>

<p><a href="https://i.stack.imgur.com/mBE9O.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/mBE9O.jpg" alt="transparent gradient"></a> </p>

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

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

<p>this is my react native code</p>

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

<p>I don't know how to pass <code>LinearGradient</code> to <code>Image</code> as a mask</p>
