Answer a question

Example 1

Example 2

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

Answers

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.