Callback for scrollToEnd in ScrollView

Question

I am looking for a way to have a callback called after scrollToEnd has reached the end of my ScrollView. The animated scrolling begins when i click a button and when end is reached i want to call some other actions.

I have looked over the documentation but it seems no callback is implemented by default?

My code below

scrollViewRef.current.scrollToEnd({animated: true});
// WHEN DONE i have some actions here that i want to trigger when animated scroll has reached the end       

<ScrollView ref={scrollViewRef} contentContainerStyle={{ flexGrow: 1 }} >
  //Content here
</ScrollView>

try this: https://stackoverflow.com/questions/41056761/detect-scrollview-has-reached-the-end — Thilina Chamath Hewagama, Jan 17 '23 at 08:59
I found that aswell but i dont want to trigger it everytime the scroll reaches the bottom, only when the animated scroll fires. — Quantal, Jan 17 '23 at 09:31

Jagjeet Singh · Accepted Answer · 2023-01-17T11:00:45.367

You can use a state in onscroll callback for checking is it called by default or its called when you fires the scroll function

const [isScrollByMe,setIsScrollByMe] =  React.useState(false);
const [isScrollViewAtEnd,setIsScrollViewAtEnd] =  React.useState(false);

set state before calling scrollToEnd

if(isScrollViewAtEnd) {
 //perform your action
  
} else {
  setIsScrollByMe(true);
    scrollViewRef.current.scrollToEnd({animated: true});
}

then check the state in onScroll callback

const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = 20;
  return layoutMeasurement.height + contentOffset.y >=
    contentSize.height - paddingToBottom;
};
...
onScroll={({nativeEvent}) => {
      if (isCloseToBottom(nativeEvent)) {
          setIsScrollViewAtEnd(true)
        if(isScrollByMe) {
           setIsScrollByMe(false); // for not calling by default
          //perform your action  
           }
        } else { 
        setIsScrollViewAtEnd(false)               
      } 
}

Check if this solution worked for you.

Amazing! Thanks alot man! Just one thing though. If i am already scrolled to the bottom and click the button it seems that the actions do not fire. Is there any way to check if it is already scrolled to the end and if that is the case just call the actions and dont set the state? — Quantal, Jan 17 '23 at 10:43
Amazing! It really works out of the box! Thanks alot man! :D — Quantal, Jan 17 '23 at 12:30

Callback for scrollToEnd in ScrollView

1 Answers1