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

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>

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.

You can wrap your view in something like

<BackgroundContainer>
  <LinearGradient>
    <UserList>
  </LinearGradient>
</BackgroundContainer>

from https://github.com/react-native-community/react-native-linear-gradient

then use alpha channels (rgba()) to get the transparency effect you're looking for.