ScrollView fadeingEdgeLength equivalent for iOS in React Native

Question

fadingEdgeLength prop of ScrollView is available only for android. Is there any equivalent for this for iOS or maybe any other way we could do this.

Docs: https://reactnative.dev/docs/scrollview#fadingedgelength-android

PS: I am trying to achieve this UI.

Answer 1

Got this to work with MaskedView and LinearGradient.

https://github.com/react-native-linear-gradient/react-native-linear-gradient https://github.com/react-native-masked-view/masked-view

      <MaskedView
        style={{ flex: 1, flexDirection: 'row', height: '100%' }}
        maskElement={
          <LinearGradient
            style={{
              flex: 1,
              flexDirection: 'row',
              height: '100%',
            }}
            colors={['transparent', 'white', 'white', 'transparent']}
            locations={[0, 0.1, 0.9, 1]}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
          />
        }>
           ...<ScrollView horizontally ... />
     </MaskedView>