0

I am using https://facebook.github.io/react-native/docs/scrollview.html, which has a handy onScroll prop, but how do I get when the user has stopped scrolling?

Basically, I'd like to hide a button when the user is scrolling, show it when they aren't.

atkayla
  • 8,143
  • 17
  • 72
  • 132
  • read this document (https://facebook.github.io/react-native/docs/gesture-responder-system.html) nativeEvent elements may help you – Burak Karasoy Oct 11 '16 at 06:08

1 Answers1

1

In your component state, store the last time at which you've received a scroll event. In your render method, check when the last scroll event happened and decide whether your button should become visible again or not.

Rough example:

// Observe the scroll events.
<ScrollView onScroll={(e) => {
    this.setState({lastScroll: new Date()})
}} />

// Check if the last scroll happened later than 300ms ago.
if (this.state.lastScroll.getTime() < (new Date()).getTime() - 300) {
    // Render the button.
}
FMCorz
  • 2,586
  • 1
  • 21
  • 18
  • Brilliant idea. – atkayla Oct 11 '16 at 16:29
  • I tried this out and it turns out that while this makes the button disappear 300ms after scroll, there's no logic to bring it back i.e. the timer doesn't reset after you stop scrolling to make the button appear again. Do you have any suggestions for this? – atkayla Oct 14 '16 at 04:41
  • In this case I would suggest to use `setTimeout` which after 300ms will `setState({displayButton: true})`, and everytime you receive a scroll event you cancel the timeout, and immediately reinitialise it. You'll have to add some logic to initially display the button and hide it on the first scroll. – FMCorz Oct 14 '16 at 09:09