`onEndReached` section-list mode sometimes not called as expected, resulting our pagination not running well.

[aqigif]

Current behavior

onEndReached sometimes not called as expected, resulting our pagination not running well.

Screen.Recording.2025-03-18.at.15.22.39.mov

here's my preview implementation code :

    const handleEndReached = useCallback(() => {
      console.log('end reached');
      if (!isLoading) {
          console.log('page change', filters.page + 1)
          onFilterChange('page', filters.page + 1);
      }
    }, [onPageChange, shouldShowSectionPlaceholder]);
   
    return ( <View style={{ height: '100%' }}>
        {/** header sticky component */}
        <View style={{ height: '100%' }}>
            <FlastList
                ...
                onEndReachedThreshold={0.5}
                onEndReached={handleEndReached}
            />
        </View>
    </View>)

i already follow this documentation https://shopify.github.io/flash-list/docs/guides/section-list/ for section-list implementation btw

Expected behavior

onEndReached should be always called consistently

To Reproduce

Platform:

• iOS
• Android

Environment

• @shopify/flash-list: 1.7.2
• React Native: 0.72.6
• System:
  • OS: macOS 15.1
  • CPU: (8) arm64 Apple M3
  • Memory: 149.38 MB / 16.00 GB
  • Shell: zsh 5.9
• Binaries:
  • Node: 18.20.5
  • Yarn: 1.22.22
  • npm: 10.8.2
  • Watchman: 2024.11.25.00
• IDEs:
  • Xcode: 16.1/16B40

[FabioRocha462]

same problem hare too

[aqigif]

same problem hare too

just curious, did u found the issue on flash-list's section-list as well? @FabioRocha462

[aqigif]

i found and hacky way solution by utilizing onScroll in temporary, might be not the best solution, but u could use the same approach.

import { useRef } from 'react';
import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';

interface Props {
  threshold: number;
  onEndReached?: () => void;
}

export const useFlashlistCustomEndReach = ({
  threshold,
  onEndReached,
}: Props) => {
  const scrollPositionRef = useRef(0);
  const contentSizeRef = useRef(0);

  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;

    // Update refs with current scroll position and content size
    scrollPositionRef.current = contentOffset.y;
    contentSizeRef.current = contentSize.height;

    // Calculate if the user has scrolled to the end
    const isEndReached =
      contentOffset.y + layoutMeasurement.height >=
      contentSize.height - threshold;

    if (isEndReached) {
      // Trigger the pagination logic
      onEndReached?.();

      // Reset the refs to avoid multiple triggers
      scrollPositionRef.current = 0;
      contentSizeRef.current = 0;
    }
  };

  return { handleScroll, scrollPositionRef, contentSizeRef };
};

usage :

const { handleScroll } = useFlashlistCustomEndReach({
  threshold,
  onEndReached: handleEndReached,
});

return (
  <FlastList
      ...
      onScroll={handleScroll}
  />
)

just a tip, makesure handleEndReached has state to prevent a lot of multiple calls, in my case looks like this (has isLoading state) :

  const handleEndReached = useCallback(() => {
    if (!isLoading) {
      onPageChange();
    }
  }, [isLoading, onPageChange]);

[Hos1g4k1]

I have the same issue. Here is the code

return (
    <View style={flex: 1}>
      {isLoading ? (
        <ContentLoader />
      ) : (
        <View style={{ flex: 1 }}>
          <ActiveFilters />
          <View style={{ flex: 1 }}>
            <FlashList
              data={feedData}
              renderItem={renderCatchItem}
              estimatedItemSize={500}
              keyExtractor={(item, index) => `${item.id}-${index}`}
              showsVerticalScrollIndicator={false}
              onEndReachedThreshold={0.5}
              onEndReached={() => {
                fetchNextPage();
                console.log('Test');
              }}
            />
          </View>
        </View>
      )}
</View>

This approach with onScroll works, of course. But, it would be great to enable this again as it worked before. I will be more than happy to provide anything which can speed up the process.

FlashList version: 1.8.0
React Native version: 0.74.7