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

5 years later and this has really helped my project, thank you!

Great work!

Thank you!! This is especially useful when using 2 FlatLists inside a ScrollView and trying to update them both.

May you live long... This is the only valid way up to 0.72

thank. It's work

Still works on react native 0.72.6

This is not working for some of the screen sizes for Android

Allah razı olsun çok uğraştım ama oldu sonunda. God bless you bro!

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