Add onScroll prop

package.json

@@ -67,11 +67,13 @@
     "react": "18.2.0",
     "react-native": "0.73.4",
     "react-native-builder-bob": "^0.20.0",
+    "react-native-reanimated": "^3.17.5",
     "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-reanimated": "*"
   },
   "workspaces": [
     "example"
@@ -130,4 +132,4 @@
   "directories": {
     "example": "example"
   }
-}
+}

src/responsive-grid/index.tsx

@@ -2,11 +2,12 @@
 /* eslint-disable react-native/no-inline-styles */
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ScrollView, View } from 'react-native';
+import { View } from 'react-native';
 import type { ResponsiveGridProps, TileItem } from './types';
 import { calcResponsiveGrid } from './calc-responsive-grid';
 import type { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
 import useThrottle from '../hooks/use-throttle';
+import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';
 import { renderPropComponent } from '../libs/render-prop-component';
 
 export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
@@ -21,6 +22,7 @@
   style = {},
   itemContainerStyle = {},
   itemUnitHeight,
+  onScroll: onScrollProp,
   onEndReached,
   onEndReachedThreshold = 0.5, // default to 50% of the container height
   keyExtractor = (_, index) => String(index), // default to item index if no keyExtractor is provided
@@ -83,8 +85,7 @@
     scrollEventInterval
   );
 
-  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const currentScrollY = event.nativeEvent.contentOffset.y;
+  const throttledOnScroll = useThrottle((currentScrollY: number) => {
     scrollYPosition.current = currentScrollY;
 
     // Calculate the position to check against the threshold
@@ -110,7 +111,15 @@
     if (virtualization) {
       throttledUpdateVisibleItems();
     }
-  };
+  }, 32);
+
+  const onScroll = useAnimatedScrollHandler((event) => {
+    if (onScrollProp) {
+      onScrollProp(event);
+    }
+
+    throttledOnScroll(event.contentOffset.y);
+  });
 
   useEffect(() => {
     if (virtualization) {
@@ -143,9 +152,8 @@
         setContainerSize({ width, height });
       }}
     >
-      <ScrollView
+      <Animated.ScrollView
         onScroll={onScroll}
-        scrollEventThrottle={32}
         contentContainerStyle={{
           height: sumScrollViewHeight || '100%',
           width: containerSize.width,
@@ -184,7 +192,7 @@
         >
           {renderPropComponent(FooterComponent)}
         </View>
-      </ScrollView>
+      </Animated.ScrollView>
     </View>
   );
 };

src/responsive-grid/types.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
 
 interface RenderItemProps {
   item: any;
@@ -49,6 +50,9 @@ export interface ResponsiveGridProps {
   /** Defines the base unit height for items within the grid. If not provided, it's calculated based on container width and maxItemsPerColumn. */
   itemUnitHeight?: number;
 
+  /** Callback function triggered when the scroll view is scrolled. */
+  onScroll?: (event: ReanimatedScrollEvent) => void;
+
   /** Callback function triggered when the scroll reaches near the end of the scrollable grid. */
   onEndReached?: () => void;