ListWithHeader.tsx

import React, { useEffect } from 'react';
import type { ScrollViewProps, SectionListProps } from 'react-native';
import { Platform, SectionList, StyleSheet } from 'react-native';
import type { GestureType } from 'react-native-gesture-handler';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
import Animated, {
  runOnJS,
  useAnimatedProps,
  useAnimatedReaction,
  useAnimatedRef,
  useAnimatedStyle,
  useScrollViewOffset,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';

import Header, { HEADER_HEIGHT } from './Header';

const IS_ANDROID = Platform.OS === 'android';

export function ListWithHeader<ItemT, SectionT>({
  scrollViewTestID,
  ...props
}: SectionListProps<ItemT, SectionT> & { scrollViewTestID?: string }) {
  const scrollOffset = useSharedValue(0);
  const scrollEnabled = useSharedValue(true);
  const androidDragDist = useSharedValue(0);

  function enableScroll() {
    scrollEnabled.value = true;
  }

  const dragGesture = Gesture.Pan()
    .onChange((e) => {
      if (!IS_ANDROID) {
        return;
      }

      if (scrollOffset.value <= 0) {
        androidDragDist.value -= e.changeY;
        scrollOffset.value = -Math.pow(
          Math.max(-androidDragDist.value, 0),
          0.85
        );

        if (scrollOffset.value < 0) {
          scrollEnabled.value = false;
        } else {
          runOnJS(enableScroll)();
        }
      } else {
        runOnJS(enableScroll)();
      }
    })
    .onFinalize(() => {
      if (IS_ANDROID && scrollOffset.value <= 0) {
        scrollOffset.value = withSpring(0, { damping: 50, stiffness: 500 });
        runOnJS(enableScroll)();
      }

      androidDragDist.value = 0;
    });

  const containerProps = useAnimatedStyle(() => {
    return {
      paddingTop: IS_ANDROID ? Math.max(-scrollOffset.value, 0) : 0,
    };
  });

  const contentContainerStyle =
    StyleSheet.flatten(props.contentContainerStyle) || {};
  if (typeof contentContainerStyle.paddingTop !== 'number') {
    contentContainerStyle.paddingTop = 0;
    console.error(
      'ListWithHeader: contentContainerStyle.paddingTop should be a number.'
    );
  }

  return (
    <GestureDetector gesture={dragGesture}>
      <Animated.View
        style={[
          { flex: 1, marginTop: contentContainerStyle.paddingTop },
          containerProps,
        ]}>
        <Header scrollOffset={scrollOffset} />
        <SectionList
          {...props}
          renderScrollComponent={(props) => (
            <ScrollComponentWithOffset
              {...props}
              testID={scrollViewTestID}
              scrollOffset={scrollOffset}
              dragGesture={dragGesture}
              animatedScrollEnabled={scrollEnabled}
            />
          )}
        />
      </Animated.View>
    </GestureDetector>
  );
}

interface ScrollComponentWithOffsetProps extends ScrollViewProps {
  scrollOffset: SharedValue<number>;
  animatedScrollEnabled: SharedValue<boolean>;
  dragGesture: GestureType;
  ref?: AnimatedRef<Animated.ScrollView>;
}

const ScrollComponentWithOffset = ({
  ref,
  scrollOffset,
  animatedScrollEnabled,
  dragGesture,
  ...props
}: ScrollComponentWithOffsetProps) => {
  const scrollRef = useAnimatedRef<Animated.ScrollView>();
  const scrollViewOffset = useScrollViewOffset(scrollRef);

  useAnimatedReaction(
    () => {
      return scrollViewOffset.value;
    },
    (offset) => {
      scrollOffset.value = offset;
    }
  );

  useEffect(() => {
    if (ref) {
      ref.current = scrollRef.current;
    }
  }, [ref, scrollRef]);

  const scrollProps = useAnimatedProps(() => {
    return {
      scrollEnabled: animatedScrollEnabled.value,
    };
  });

  const scrollGesture = Gesture.Native()
    .disallowInterruption(true)
    .simultaneousWithExternalGesture(dragGesture);

  return (
    <GestureDetector gesture={scrollGesture}>
      <Animated.ScrollView
        {...props}
        ref={scrollRef}
        contentContainerStyle={[
          props.contentContainerStyle,
          { paddingTop: HEADER_HEIGHT },
        ]}
        scrollEventThrottle={1}
        animatedProps={scrollProps}
      />
    </GestureDetector>
  );
};