Detect ScrollView has reached the end - react-native

Question

I have a Text with long text inside a ScrollView and I want to detect when the user has scrolled to the end of the text so I can enable a button.
I've been debugging the event object from the onScroll event but there doesn't seem any value I can use.

Answer 1

I did it like this:
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;
I wanted to add paddingToBottom because usually it is not needed that ScrollView is scrolled to the bottom till last pixel. But if you want that set paddingToBottom to zero.

Answer 2

As people helped here I will add the simple code they write to make reached to top and reached to bottom event and I did a little illustration to make things simpler
<ScrollView
onScroll={({nativeEvent})=>{
if(isCloseToTop(nativeEvent)){
//do something
}
if(isCloseToBottom(nativeEvent)){
//do something
}
}}
>
...contents
</ScrollView>
isCloseToBottom({layoutMeasurement, contentOffset, contentSize}){
return layoutMeasurement.height + contentOffset.y >= contentSize.height - 20;
}
ifCloseToTop({layoutMeasurement, contentOffset, contentSize}){
return contentOffset.y == 0;
}

Answer 3

<... onScroll={(e) => {
let paddingToBottom = 10;
paddingToBottom += e.nativeEvent.layoutMeasurement.height;
if(e.nativeEvent.contentOffset.y >= e.nativeEvent.contentSize.height - paddingToBottom) {
// make something...
}
}}>...
like this react-native 0.44

Answer 4

For Horizontal ScrollView (e.g. Carousels) replace isCloseToBottom function with isCloseToRight
isCloseToRight = ({ layoutMeasurement, contentOffset, contentSize }) => {
const paddingToRight = 20;
return layoutMeasurement.width + contentOffset.x >= contentSize.width - paddingToRight;
};

Answer 5

Another solution could be to use a ListView with a single row (your text) which has onEndReached method. See the documentation here

Answer 6

#Henrik R's right.
But you should use Math.ceil() too.
function handleInfinityScroll(event) {
let mHeight = event.nativeEvent.layoutMeasurement.height;
let cSize = event.nativeEvent.contentSize.height;
let Y = event.nativeEvent.contentOffset.y;
if(Math.ceil(mHeight + Y) >= cSize) return true;
return false;
}

Answer 7

As an addition to the answer of Henrik R:
If you need to know wether the user has reached the end of the content at mount time (if the content may or may not be too long, depending on device size) - here is my solution:
<ScrollView
onLayout={this.onLayoutScrollView}
onScroll={this.onScroll}>
<View onLayout={this.onLayoutScrollContent}>
{/*...*/}
</View>
</ScrollView>
in combination with
onLayout(wrapper, { nativeEvent }) {
if (wrapper) {
this.setState({
wrapperHeight: nativeEvent.layout.height,
});
} else {
this.setState({
contentHeight: nativeEvent.layout.height,
isCloseToBottom:
this.state.wrapperHeight - nativeEvent.layout.height >= 0,
});
}
}

Answer 8

const isCloseToBottom = async ({ layoutMeasurement, contentOffset, contentSize }) => {
const paddingToBottom = 120
return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom}
<ScrollView
onMomentumScrollEnd={({ nativeEvent }) => {
if (isCloseToBottom(nativeEvent)) {
loadMoreData()
}
}}
scrollEventThrottle={1}
>
Above answer is correct but to callback on reaching the end in scrollView use onMomentumScrollEnd not onScroll

Answer 9

I use ScrollView and this worked for me
Here is my solution:
I passed onMomentumScrollEnd prop to scrollView and on the basis event.nativeEvent I achieved onEndReached functionality in ScrollView
onMomentumScrollEnd={(event) => {
if (isCloseToBottom(event.nativeEvent)) {
LoadMoreRandomData()
}
}
}}
const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
const paddingToBottom = 20;
return layoutMeasurement.height + contentOffset.y >=
contentSize.height - paddingToBottom;
};

Answer 10

you can use this function onMomentumScrollEnd to know scroll information (event)
<ScrollView onMomentumScrollEnd={({ nativeEvent }) => {
handleScroll(nativeEvent)
}}>
and with these measure (layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom)
you can know if the scroll is at the end
const handleScroll = ({ layoutMeasurement, contentOffset, contentSize }) => {
const paddingToBottom = 20;
if (layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom) {
...
}
};

Answer 11

disregard all convoluted answers above. this works.
import React, { useState } from 'react';
import { ScrollView } from 'react-native';
function Component() {
const [momentum, setMomentum] = useState(false)
return (
<ScrollView
onMomentumScrollBegin={() => setMomentum(true)}
onEndReached={momentum === true ? console.log('end reached.') : null}
onEndReachedThreshold={0}
>
<Text>Filler Text 01</Text>
<Text>Filler Text 02</Text>
<Text>Filler Text 03</Text>
<Text>Filler Text 04</Text>
<Text>Filler Text 05</Text>
</ScrollView>
)
}