feat: Add onScroll prop

Author: robgraeber

src/responsive-grid/index.tsx

@@ -21,6 +21,7 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
   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,33 +84,44 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
     scrollEventInterval
   );
 
-  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const currentScrollY = event.nativeEvent.contentOffset.y;
-    scrollYPosition.current = currentScrollY;
-
-    // Calculate the position to check against the threshold
-    const contentHeight = gridViewHeight;
-    const scrollViewHeight = containerSize.height;
-    const threshold = onEndReachedThreshold * scrollViewHeight;
-
-    // Check if we've reached the threshold for calling onEndReached
-    if (
-      !onEndReachedCalled.current &&
-      currentScrollY + scrollViewHeight + threshold >= contentHeight
-    ) {
-      onEndReachedCalled.current = true; // Marked as called to prevent subsequent calls
-      onEndReached?.(); // call the onEndReached function if it exists
-    }
+  const throttledOnScroll = useThrottle(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const currentScrollY = event.nativeEvent.contentOffset.y;
+      scrollYPosition.current = currentScrollY;
+
+      // Calculate the position to check against the threshold
+      const contentHeight = gridViewHeight;
+      const scrollViewHeight = containerSize.height;
+      const threshold = onEndReachedThreshold * scrollViewHeight;
+
+      // Check if we've reached the threshold for calling onEndReached
+      if (
+        !onEndReachedCalled.current &&
+        currentScrollY + scrollViewHeight + threshold >= contentHeight
+      ) {
+        onEndReachedCalled.current = true; // Marked as called to prevent subsequent calls
+        onEndReached?.(); // call the onEndReached function if it exists
+      }
+
+      // Reset the flag when scrolled away from the bottom
+      if (currentScrollY + scrollViewHeight + threshold * 2 < contentHeight) {
+        onEndReachedCalled.current = false;
+      }
+
+      // Update visible items for virtualization
+      if (virtualization) {
+        throttledUpdateVisibleItems();
+      }
+    },
+    32
+  );
 
-    // Reset the flag when scrolled away from the bottom
-    if (currentScrollY + scrollViewHeight + threshold * 2 < contentHeight) {
-      onEndReachedCalled.current = false;
+  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (onScrollProp) {
+      onScrollProp(event);
     }
 
-    // Update visible items for virtualization
-    if (virtualization) {
-      throttledUpdateVisibleItems();
-    }
+    throttledOnScroll(event);
   };
 
   useEffect(() => {
@@ -145,7 +157,6 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
     >
       <ScrollView
         onScroll={onScroll}
-        scrollEventThrottle={32}
         contentContainerStyle={{
           height: sumScrollViewHeight || '100%',
           width: containerSize.width,

src/responsive-grid/types.ts

@@ -1,6 +1,11 @@
 import type React from 'react';
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 interface RenderItemProps {
   item: any;
@@ -49,6 +54,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: NativeSyntheticEvent<NativeScrollEvent>) => void;
+
   /** Callback function triggered when the scroll reaches near the end of the scrollable grid. */
   onEndReached?: () => void;