ScrollView Detection Ends

Question

I have a Text with long text inside a ScrollView , and I want to determine when the user has scrolled to the end of the text so that I can enable the button.

I was debugging an event object from the onScroll event, but I cannot use any value.

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 required that the ScrollView scroll to the last pixel. But if you want this paddingToBottom set to be zero.

Answer 2

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

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 reactive root 0.44

Answer 4

For horizontal ScrollView (e.g. carousels) replace isCloseToBottom with isCloseToRight

 isCloseToRight = ({ layoutMeasurement, contentOffset, contentSize }) => { const paddingToRight = 20; return layoutMeasurement.width + contentOffset.x >= contentSize.width - paddingToRight; };