How to fade the edge of a View in react native?

Question

Example 1

Example 2

How to fade the edge of a View like the above images in react native?

Answer 1

I know this post is old but for anyone looking at this now, you can set a fadingEdgeLength on your ScrollView like this to achieve that effect. Note that it only works for Android though. For example:

<ScrollView fadingEdgeLength={100}>
  ... scroll view content ...
</ScrollView>

Answer 2

On iOS, you can use the MaskedViewIOS component to create an transparent alpha mask for the fading effect.

For the fading gradient itself, you can either use something like react-native-linear-gradient (which is also built into Expo) or a semi-transparent image (black pixels will show content through, transparent pixels will block masked content).

<MaskedViewIOS 
  maskElement={
    <LinearGradient colors={['black', 'transparent']} />
  }
>
  <YourContent />
</MaskedViewIOS>

Here is an example on Snack.

Unfortunately, MaskedView is not yet implemented on Android. I'm not aware of a simple way of implementing this, but would be happy to be proven wrong.