diff --git a/src/responsive-grid/index.tsx b/src/responsive-grid/index.tsx index d0b1607..2fe5313 100644 --- a/src/responsive-grid/index.tsx +++ b/src/responsive-grid/index.tsx @@ -21,6 +21,7 @@ export const ResponsiveGrid: React.FC = ({ 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 = ({ scrollEventInterval ); - const onScroll = (event: NativeSyntheticEvent) => { - 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) => { + 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) => { + if (onScrollProp) { + onScrollProp(event); } - // Update visible items for virtualization - if (virtualization) { - throttledUpdateVisibleItems(); - } + throttledOnScroll(event); }; useEffect(() => { @@ -145,7 +157,6 @@ export const ResponsiveGrid: React.FC = ({ > ) => void; + /** Callback function triggered when the scroll reaches near the end of the scrollable grid. */ onEndReached?: () => void;