React Native: Detect ScrollView has reached the end

detect-scroll.js

import React from 'react';
import {ScrollView, Text} from 'react-native';

const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = 20;
  return layoutMeasurement.height + contentOffset.y >=
    contentSize.height - paddingToBottom;
};

const MyCoolScrollViewComponent = ({enableSomeButton}) => (
  <ScrollView
    onScroll={({nativeEvent}) => {
      if (isCloseToBottom(nativeEvent)) {
        enableSomeButton();
      }
    }}
    scrollEventThrottle={400}
  >
    <Text>Here is very long lorem ipsum or something...</Text>
  </ScrollView>
);

export default MyCoolScrollViewComponent;

// via From https://stackoverflow.com/questions/41056761/detect-scrollview-has-reached-the-end

it is still a valuable detection in 2024 <3

great

For people in 2025, please use onScrollEndDrag instead of onScroll so your "enableSomeButton()" would only trigger once instead of twice

For people in 2025, please use onScrollEndDrag instead of onScroll so your "enableSomeButton()" would only trigger once instead of twice

This won't work if your react-native is targeting web too