Callback for scrollToEnd in ScrollView-CodePudding

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>

CodePudding user response：

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.