react-native: Fade ScrollView bottom

Question

I'm trying to implement a ScrollView list that fades out the bottom items in the list. This is achievable by monitoring the scroll position, determining the layout of each item and then adding opacity to each item ~ Even then, it won't achieve a smooth fade as each item will have a fixed opacity.

I'm wondering if there is a more graceful and cleaner way to achieve this?

Answer 1

1. Use LinearGradient from expo to render a smooth fadeout.

2. If ScrollView has touchable item, add prop 'pointerEvents={'none'}' to LinearGradient. It can bypass touch events to ScrollView.

   import {LinearGradient} from 'expo';
   
   <View style={{width:100, height:100, backgroundColor:'#fff'}}>
     <ScrollView />
     <LinearGradient
       style={{position:'absolute', bottom:0, width:100, height:20}}
       colors={['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.8)']}
       pointerEvents={'none'}
     />
   </View>
   

edit:

3. If it is dynamic images, maybe you can try the backgroundColor of image's parent. The following example is black, so use black LinearGradient.

   <View style={{flex:1, backgroundColor:'#000'}}>
     <ImageBackground
       style={{flex:1}}
       source={{uri:'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&dl=beauty-bloom-blue-67636.jpg&fm=jpg'}}
     >
       <LinearGradient
         style={{flex:1}}
         locations={[0.7, 0.9, 1]}
         colors={['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.5)']}
         pointerEvents={'none'}
       />
     </ImageBackground>
   </View>
   

Answer 2

There is package for achieving fade effects in ScrollView.

rn-faded-scrollview does work good.

 <RNFadedScrollView
    allowStartFade={true}
    allowEndFade={true}
    bounces={false}
    horizontal={true}
     >
 </RNFadedScrollView>

Hope this helps.