fix: api and allow for onScrollBeginDrag, onScrollEndDrag and more to be supplied

Author: e-younan

src/components/containers/FlatList.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { View, FlatList, FlatListProps, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, {
   useAnimatedRef,
   useScrollViewOffset,
   AnimateProps,
 } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
 import FadingView from '../containers/FadingView';
-import type { SharedScrollContainerProps } from './types';
 import { useScrollContainerLogic } from './useScrollContainerLogic';
+import type { SharedScrollContainerProps } from './types';
 
 type AnimatedFlatListType<ItemT = any> = React.ComponentClass<
   AnimateProps<FlatListProps<ItemT>>,
@@ -21,13 +22,16 @@ type AnimatedFlatListProps<ItemT> = AnimatedFlatListBaseProps<ItemT> & {
 const AnimatedFlatList: AnimatedFlatListType = Animated.createAnimatedComponent(FlatList);
 
 const AnimatedFlatListWithHeaders = <ItemT extends unknown>({
-  data,
-  renderItem,
   largeHeaderShown,
   containerStyle,
   LargeHeaderComponent,
   largeHeaderContainerStyle,
   HeaderComponent,
+  onLargeHeaderLayout,
+  onScrollBeginDrag,
+  onScrollEndDrag,
+  onMomentumScrollBegin,
+  onMomentumScrollEnd,
   ignoreLeftSafeArea,
   ignoreRightSafeArea,
   ...rest
@@ -58,18 +62,31 @@ const AnimatedFlatListWithHeaders = <ItemT extends unknown>({
       <AnimatedFlatList
         ref={scrollRef}
         scrollEventThrottle={16}
-        overScrollMode={'auto'}
+        overScrollMode="auto"
         automaticallyAdjustContentInsets={false}
-        onScrollBeginDrag={debouncedFixScroll.cancel}
-        onScrollEndDrag={debouncedFixScroll}
-        onMomentumScrollBegin={debouncedFixScroll.cancel}
-        onMomentumScrollEnd={debouncedFixScroll}
-        showsVerticalScrollIndicator={true}
+        onScrollBeginDrag={(e) => {
+          debouncedFixScroll.cancel();
+          if (onScrollBeginDrag) onScrollBeginDrag(e);
+        }}
+        onScrollEndDrag={(e) => {
+          debouncedFixScroll();
+          if (onScrollEndDrag) onScrollEndDrag(e);
+        }}
+        onMomentumScrollBegin={(e) => {
+          debouncedFixScroll.cancel();
+          if (onMomentumScrollBegin) onMomentumScrollBegin(e);
+        }}
+        onMomentumScrollEnd={(e) => {
+          debouncedFixScroll();
+          if (onMomentumScrollEnd) onMomentumScrollEnd(e);
+        }}
         ListHeaderComponent={
           LargeHeaderComponent ? (
             <View
               onLayout={(e) => {
                 largeHeaderHeight.value = e.nativeEvent.layout.height;
+
+                if (onLargeHeaderLayout) onLargeHeaderLayout(e.nativeEvent.layout);
               }}
             >
               <FadingView opacity={largeHeaderOpacity} style={largeHeaderContainerStyle}>
@@ -78,8 +95,6 @@ const AnimatedFlatListWithHeaders = <ItemT extends unknown>({
             </View>
           ) : undefined
         }
-        data={data}
-        renderItem={renderItem}
         {...rest}
       />
     </View>

src/components/containers/ScrollView.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import Animated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Animated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
 
 import FadingView from './FadingView';
-import type { SharedScrollContainerProps } from './types';
 import { useScrollContainerLogic } from './useScrollContainerLogic';
+import type { SharedScrollContainerProps } from './types';
 
 type AnimatedScrollViewProps = React.ComponentProps<typeof Animated.ScrollView> & {
   children?: React.ReactNode;
@@ -22,6 +22,10 @@ const AnimatedScrollViewWithHeaders: React.FC<
   onLargeHeaderLayout,
   ignoreLeftSafeArea,
   ignoreRightSafeArea,
+  onScrollBeginDrag,
+  onScrollEndDrag,
+  onMomentumScrollBegin,
+  onMomentumScrollEnd,
   children,
   ...rest
 }) => {
@@ -50,13 +54,24 @@ const AnimatedScrollViewWithHeaders: React.FC<
       <Animated.ScrollView
         ref={scrollRef}
         scrollEventThrottle={16}
-        overScrollMode={'auto'}
+        overScrollMode="auto"
         automaticallyAdjustContentInsets={false}
-        onScrollBeginDrag={debouncedFixScroll.cancel}
-        onScrollEndDrag={debouncedFixScroll}
-        onMomentumScrollBegin={debouncedFixScroll.cancel}
-        onMomentumScrollEnd={debouncedFixScroll}
-        showsVerticalScrollIndicator={true}
+        onScrollBeginDrag={(e) => {
+          debouncedFixScroll.cancel();
+          if (onScrollBeginDrag) onScrollBeginDrag(e);
+        }}
+        onScrollEndDrag={(e) => {
+          debouncedFixScroll();
+          if (onScrollEndDrag) onScrollEndDrag(e);
+        }}
+        onMomentumScrollBegin={(e) => {
+          debouncedFixScroll.cancel();
+          if (onMomentumScrollBegin) onMomentumScrollBegin(e);
+        }}
+        onMomentumScrollEnd={(e) => {
+          debouncedFixScroll();
+          if (onMomentumScrollEnd) onMomentumScrollEnd(e);
+        }}
         {...rest}
       >
         {LargeHeaderComponent ? (

src/components/containers/types.ts

@@ -1,4 +1,10 @@
-import type { LayoutRectangle, StyleProp, ViewStyle } from 'react-native';
+import type {
+  LayoutRectangle,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import type Animated from 'react-native-reanimated';
 
 /**
@@ -84,4 +90,28 @@ export type SharedScrollContainerProps = {
    * mode on iOS where devices have a notch/status bar on the right side.
    */
   ignoreRightSafeArea?: boolean;
+  /**
+   * Fires if a user initiates a scroll gesture.
+   *
+   * @param {NativeSyntheticEvent<NativeScrollEvent>} event
+   */
+  onScrollBeginDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  /**
+   * Fires when a user has finished scrolling.
+   *
+   * @param {NativeSyntheticEvent<NativeScrollEvent>} event
+   */
+  onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  /**
+   * Fires when scroll view has begun moving.
+   *
+   * @param {NativeSyntheticEvent<NativeScrollEvent>} event
+   */
+  onMomentumScrollBegin?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  /**
+   * Fires when scroll view has finished moving.
+   *
+   * @param {NativeSyntheticEvent<NativeScrollEvent>} event
+   */
+  onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };