React Native - Show View while Scrolling in Flatlist

Question

I need to SHOW a view when scroll is started and HIDE a view when scroll is stopped.

To detect the scroll movement, there is two ways:

Called when the user begins to drag the scroll view.

onScrollBeginDrag={this.showView}
onScrollEndDrag={this.hideView}

Called when the momentum scroll starts and Ends

onMomentumScrollBegin={this.showView}
onMomentumScrollEnd={this.hideView}

Exptected Behaviour:

If continues scroll is happening, it should not hide the view even onScrollEndDrag is called and still show the view until onMomentumScrollEnd.

If continues scroll is not active, its should hide when onScrollEndDrag called

Actual Behaviour:

If continues scroll is happening, its hide the view when onScrollEndDrag is called and shows the view again until onMomentumScrollEnd. So in between view is disappeared and then its appears when drag released.

I think you only need to use onScrollBeginDrag (to show the view) and onMomentumScrollEnd (to hide the view) — dentemm, May 19 '18 at 07:58
@dentemm But if onMomentumScrollBegin is not active, its should hide when onScrollEndDrag called. — Balasubramanian, May 19 '18 at 08:06
Okay, you could also use onScroll() in combination with onScrollEventThrottle and a timer. If onScroll() has not been called for x milliseconds you could hide the view — dentemm, May 19 '18 at 08:18

score 1 · Answer 1 · answered May 19 '18 at 11:23

Call a debounced function in onScroll.

Debouncing will mean it is called at the end (or start) of a bunch of events. More Info

// Debounce
this.ViewVisibility = lodash.debounce(this.ViewVisibility, 100);

onScroll={() => {
  this.ViewVisibility();
}}

ViewVisibility = () => {
  console.log('Debouncing');
  this.hideView();
}

React Native - Show View while Scrolling in Flatlist

1 Answers1