Get current scroll position of ScrollView in React Native

Question

Is it possible to get the current scroll position, or the current page of a component in React Native?

So something like:

<         


        

Answer 1

The above answers tell how to get the position using different API, onScroll, onMomentumScrollEnd etc; If you want to know the page index, you can calculate it using the offset value.

 
    {pages}
  

  _onMomentumScrollEnd = ({ nativeEvent }: any) => {
   // the current offset, {x: number, y: number} 
   const position = nativeEvent.contentOffset; 
   // page index 
   const index = Math.round(nativeEvent.contentOffset.x / PAGE_WIDTH);

   if (index !== this.state.currentIndex) {
     // onPageDidChanged
   }
 };

In iOS, the relationship between ScrollView and the visible region is as follow:

ref: https://www.objc.io/issues/3-views/scroll-view/