Faded ScrollView

gistfile1.txt

import { useTheme } from '@stores/theme/ThemeProvider';
import React, { FC, useState } from 'react';
import {
  NativeScrollEvent,
  NativeSyntheticEvent,
  ScrollView,
  ScrollViewProps,
  StyleProp,
  StyleSheet,
  View,
  ViewStyle,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

interface Props extends ScrollViewProps {
  containerStyle?: StyleProp<ViewStyle>;
  linearGradientStyle?: StyleProp<ViewStyle>;
  linearGradientColors?: (string | number)[];
}

const SCROLL_EVENT_THROTTLE = 10;

const BottomFadeScrollView: FC<Props> = ({
  containerStyle,
  linearGradientStyle,
  linearGradientColors,
  ...props
}) => {
  const { theme } = useTheme();
  const [visible, setVisible] = useState(true);

  const reachedBottom = (
    event: NativeSyntheticEvent<NativeScrollEvent>,
  ) => {
    const {
      contentOffset,
      contentSize,
      layoutMeasurement,
    } = event?.nativeEvent;

    const diff = SCROLL_EVENT_THROTTLE;
    const currentScroll = contentOffset?.y;
    const maxScroll =
      contentSize?.height - layoutMeasurement?.height;

    if (currentScroll >= maxScroll - diff) {
      setVisible(false);
    } else {
      setVisible(true);
    }
  };

  return (
    <View style={containerStyle}>
      <ScrollView
        showsVerticalScrollIndicator={false}
        onScroll={reachedBottom}
        scrollEventThrottle={SCROLL_EVENT_THROTTLE}
        {...props}>
        {props.children}
      </ScrollView>
      <LinearGradient
        style={[
          styles.linearGradient,
          { display: visible ? 'flex' : 'none' },
          linearGradientStyle,
        ]}
        colors={
          linearGradientColors ?? [
            theme.secondary.darkWithOpacity(0.1),
            theme.secondary.dark,
          ]
        }
        pointerEvents="none"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  linearGradient: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    height: 20,
  },
});

export default BottomFadeScrollView;