Get current scroll position of ScrollView in React Native

ghz 7months ago ⋅ 166 views

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

So something like:

<ScrollView
  horizontal={true}
  pagingEnabled={true}
  onScrollAnimationEnd={() => { 
      // get this scrollview's current page or x/y scroll position
  }}>
  this.state.data.map(function(e, i) { 
      <ImageCt key={i}></ImageCt> 
  })
</ScrollView>

Answers

Yes, it's possible to get the current scroll position or the current page of a ScrollView component in React Native. You can achieve this by using the onScroll event and accessing the contentOffset property of the event object.

Here's how you can modify your code to achieve this:

<ScrollView
  horizontal={true}
  pagingEnabled={true}
  onScroll={(event) => {
    // Get the current scroll position
    const scrollPositionX = event.nativeEvent.contentOffset.x;
    const scrollPositionY = event.nativeEvent.contentOffset.y;

    // Calculate the current page based on the scroll position
    const currentPage = Math.floor(scrollPositionX / scrollViewWidth); // Assuming scrollViewWidth is the width of your ScrollView component

    console.log('Current scroll position X:', scrollPositionX);
    console.log('Current scroll position Y:', scrollPositionY);
    console.log('Current page:', currentPage);
  }}>
  {this.state.data.map((e, i) => (
    <ImageCt key={i}></ImageCt> 
  ))}
</ScrollView>

In this code:

  • We're using the onScroll event to listen for scroll events on the ScrollView component.
  • When the ScrollView is scrolled, the onScroll event is triggered, and we can access the contentOffset property of the nativeEvent object of the event parameter.
  • The contentOffset property contains the current scroll position (x and y coordinates) of the ScrollView.
  • We can then use the scroll position to calculate the current page based on the width of the ScrollView (assuming horizontal scrolling). The current page is calculated by dividing the scroll position by the width of the ScrollView.
  • Finally, we log the current scroll position (both x and y), as well as the current page to the console for debugging purposes. You can remove these logs in your actual implementation.
#ios