Tidus Smith Tidus Smith - 1 month ago 8
React JSX Question

How do I check when the user has stopped scrolling?

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.

FMC FMC
Answer

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.
}