Solución:
En iOS, puede utilizar el MaskedViewIOS
componente para crear una máscara alfa transparente para el efecto de desvanecimiento.
Para el degradado de desvanecimiento en sí, puede usar algo como react-native-linear-gradient (que también está integrado en Expo) o una imagen semitransparente (los píxeles negros mostrarán el contenido, los píxeles transparentes bloquearán el contenido enmascarado).
<MaskedViewIOS
maskElement={
<LinearGradient colors={['black', 'transparent']} />
}
>
<YourContent />
</MaskedViewIOS>
Aquí hay un ejemplo de Snack.
Desafortunadamente, MaskedView aún no está implementado en Android. No conozco una forma sencilla de implementar esto, pero estaría feliz de que se demuestre que estoy equivocado.
Puedes envolver tu vista en algo como
<BackgroundContainer>
<LinearGradient>
<UserList>
</LinearGradient>
</BackgroundContainer>
de https://github.com/react-native-community/react-native-linear-gradient
luego use canales alfa (rgba ()) para obtener el efecto de transparencia que está buscando.