Skip to content

Instantly share code, notes, and snippets.

@rvibit
Created August 4, 2024 11:20
Show Gist options
  • Save rvibit/4a5e2b5399b6726403ae6e2c248770db to your computer and use it in GitHub Desktop.
Save rvibit/4a5e2b5399b6726403ae6e2c248770db to your computer and use it in GitHub Desktop.
React Native Flatlist/Flashlist Reverse Page counter based on scroll position
const PER_PAGE = 30;
const [current_page,setPage] = useState(0);
const ITEM_HEIGHT = 55; //each item height including vertical padding/margin
const calculatePage = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
const cPage = Math.floor(e.nativeEvent.contentOffset.y / (ITEM_HEIGHT * (current_page + 1 * PER_PAGE)));
console.log(cPage);
return cPage;
};
<FlashList
keyExtractor={keyExtractor}
removeClippedSubviews
estimatedItemSize={55}
data={data}
renderItem={_renderItem}
onEndReached={setPage}
onEndReachedThreshold={0.5}
scrollEventThrottle={200}
onScroll={calculatePage}
/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment