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  lt ScrollView gt  component in React Native   So something like    lt ScrollView   horizontal  true    pagingEnabled  true    onScrollAnimationEnd       gt              get this scrollview s current page or x y scroll position      gt    this state data map function e  i            lt ImageCt key  i  gt  lt  ImageCt gt         lt  ScrollView gt

User · Answer

Use  lt ScrollView   onMomentumScrollEnd   event    gt  this getscrollposition event     scrollEventThrottle  16  gt   Show Position getscrollposition e   console log  scroll y    e nativeEvent contentOffset y

User · Answer

I believe contentOffset will give you an object containing the top-left scroll offset   http   facebook github io react-native docs scrollview html contentoffset

User · Answer

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      lt ScrollView      pagingEnabled  true      onMomentumScrollEnd  this  onMomentumScrollEnd  gt       pages    lt  ScrollView gt       onMomentumScrollEnd      nativeEvent    any    gt          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

User · Answer

Brad Oyler s answer is correct  But you will only receive one event  If you need to get constant updates of the scroll position  you should set the scrollEventThrottle prop  like so    lt ScrollView onScroll  this handleScroll  scrollEventThrottle  16   gt     lt Text gt      Be like water my friend        lt  Text gt   lt  ScrollView gt    And the event handler   handleScroll  function event  Object      console log event nativeEvent contentOffset y        Be aware that you might run into performance issues  Adjust the throttle accordingly  16 gives you the most updates  0 only one

User · Answer

Disclaimer  what follows is primarily the result of my own experimentation in React Native 0 50  The ScrollView documentation is currently missing a lot of the information covered below  for instance onScrollEndDrag is completely undocumented  Since everything here relies upon undocumented behaviour  I can unfortunately make no promises that this information will remain correct a year or even a month from now   Also  everything below assumes a purely vertical scrollview whose y offset we are interested in  translating to x offsets  if needed  is hopefully an easy exercise for the reader     Various event handlers on a ScrollView take an event and let you get the current scroll position via event nativeEvent contentOffset y  Some of these handlers have slightly different behaviour between Android and iOS  as detailed below   onScroll  On Android  Fires every frame while the user is scrolling  on every frame while the scroll view is gliding after the user releases it  on the final frame when the scroll view comes to rest  and also whenever the scroll view s offset changes as a result of its frame changing  e g  due to rotation from landscape to portrait    On iOS  Fires while the user is dragging or while the scroll view is gliding  at some frequency determined by scrollEventThrottle and at most once per frame when scrollEventThrottle  16   If the user releases the scroll view while it has enough momentum to glide  the onScroll handler will also fire when it comes to rest after gliding  However  if the user drags and then releases the scroll view while it is stationary  onScroll is not guaranteed to fire for the final position unless scrollEventThrottle has been set such that onScroll fires every frame of scrolling   There is a performance cost to setting scrollEventThrottle  16  that can be reduced by setting it to a larger number  However  this means that onScroll will not fire every frame   onMomentumScrollEnd  Fires when the scroll view comes to a stop after gliding  Does not fire at all if the user releases the scroll view while it is stationary such that it does not glide   onScrollEndDrag  Fires when the user stops dragging the scroll view - regardless of whether the scroll view is left stationary or begins to glide       Given these differences in behaviour  the best way to keep track of the offset depends upon your precise circumstances  In the most complicated case  you need to support Android and iOS  including handling changes in the ScrollView s frame due to rotation  and you don t want to accept the performance penalty on Android from setting scrollEventThrottle to 16   and you need to handle changes to the content in the scroll view too  then it s a right damn mess   The simplest case is if you only need to handle Android  just use onScroll      lt ScrollView   onScroll  event   gt         this yOffset   event nativeEvent contentOffset y       gt    To additionally support iOS  if you re happy to fire the onScroll handler every frame and accept the performance implications of that  and if you don t need to handle frame changes  then it s only a little bit more complicated    lt ScrollView   onScroll  event   gt         this yOffset   event nativeEvent contentOffset y        scrollEventThrottle  16   gt    To reduce the performance overhead on iOS while still guaranteeing that we record any position that the scroll view settles on  we can increase scrollEventThrottle and additionally provide an onScrollEndDrag handler    lt ScrollView   onScroll  event   gt         this yOffset   event nativeEvent contentOffset y        onScrollEndDrag  event   gt         this yOffset   event nativeEvent contentOffset y        scrollEventThrottle  160   gt    But if we want to handle frame changes  e g  because we allow the device to be rotated  changing the available height for the scroll view s frame  and or content changes  then we must additionally implement both onContentSizeChange and onLayout to keep track of the height of both the scroll view s frame and its contents  and thereby continually calculate the maximum possible offset and infer when the offset has been automatically reduced due to a frame or content size change    lt ScrollView   onLayout  event   gt        this frameHeight   event nativeEvent layout height      const maxOffset   this contentHeight - this frameHeight      if  maxOffset  lt  this yOffset          this yOffset   maxOffset               onContentSizeChange   contentWidth  contentHeight    gt        this contentHeight   contentHeight      const maxOffset   this contentHeight - this frameHeight      if  maxOffset  lt  this yOffset          this yOffset   maxOffset               onScroll  event   gt         this yOffset   event nativeEvent contentOffset y         onScrollEndDrag  event   gt         this yOffset   event nativeEvent contentOffset y         scrollEventThrottle  160   gt    Yeah  it s pretty horrifying  I m also not 100  certain that it ll always work right in cases where you simultaneously change the size of both the frame and content of the scroll view  But it s the best I can come up with  and until this feature gets added within the framework itself  I think this is the best that anyone can do

User · Answer

If you wish to simply get the current position  e g  when some button is pressed  rather than tracking it whenever the user scrolls  then invoking an onScroll listener is going to cause performance issues  Currently the most performant way to simply get current scroll position is using react-native-invoke package  There is an example for this exact thing  but the package does multiple other things   Read about it here  https   medium com  talkol invoke-any-native-api-directly-from-pure-javascript-in-react-native-1fb6afcdf57d  68ls1sopd

User · Answer

As for the page  I m working on a higher order component that uses basically the above methods to do exactly this  It actually takes just a bit of time when you get down to the subtleties like initial layout and content changes  I won t claim to have done it  correctly   but in some sense I d consider the correct answer to use component that does this carefully and consistently   See  react-native-paged-scroll-view  Would love feedback  even if it s that I ve done it all wrong

User · Answer

This is how ended up getting the current scroll position live from the view  All I am doing is using the on scroll event listener and the scrollEventThrottle  I am then passing it as an event to handle scroll function I made and updating my props     export default class Anim extends React Component             constructor props                 super props                this state                    yPos  0                                        handleScroll event               this setState                 yPos   event nativeEvent contentOffset y                                    render                 return              lt ScrollView onScroll  this handleScroll bind this   scrollEventThrottle  16    gt

User · Answer

use of onScroll enters infinite loop  onMomentumScrollEnd or onScrollEndDrag can be used instead

User · Answer

To get the x y after scroll ended as the original questions was requesting  the easiest way is probably this    lt ScrollView    horizontal  true     pagingEnabled  true     onMomentumScrollEnd   event    gt              scroll animation ended       console log e nativeEvent contentOffset x         console log e nativeEvent contentOffset y         gt        content  lt  ScrollView gt

User · Answer

Try    lt ScrollView onScroll  this handleScroll    gt    And then    handleScroll  function event  Object     console log event nativeEvent contentOffset y

[ios] Get current scroll position of ScrollView in React Native

Examples related to ios

Examples related to reactjs

Examples related to react-native