Skip to content

Instantly share code, notes, and snippets.

@jbutko
Created September 10, 2018 06:28
Show Gist options
  • Save jbutko/33832e50f3d95a73842e763b3791f586 to your computer and use it in GitHub Desktop.
Save jbutko/33832e50f3d95a73842e763b3791f586 to your computer and use it in GitHub Desktop.
React Native: Detect ScrollView has reached the end
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
@Shelrothman
Copy link

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

@Joseff361
Copy link

Great work!

@denzariu
Copy link

denzariu commented Oct 7, 2023

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

@Elozino
Copy link

Elozino commented Nov 18, 2023

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

@pdb3616109
Copy link

thank. It's work

@pencilcheck
Copy link

Still works on react native 0.72.6

@lasithalakmal
Copy link

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

@selin33-sl
Copy link

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

@thiennd99
Copy link

it is still a valuable detection in 2024 <3

@AkilUnik
Copy link

great

@shubham-cpp
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment