react-native-action-button hide/show view on scroll down/scroll up

hideOnScroll.js

// 1. Define a state variable for showing/hiding the action-button 
state = {
  shouldShow: false,
}

// 2. Define a variable that will keep track of the current scroll position
_scrollOffset = 0

// 3. Add an onScroll listener to your listview/scrollview
<ScrollView
  ...
  onScroll={this.handleScroll}
  ...
/>

// 3. Add some logic in the scroll listener for hiding the action button when scrolling down
handleScroll = (event) => {
  const CustomLayoutLinear = {
    duration: 100,
    create: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity },
    update: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity },
    delete: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity }
  }

  const currentOffset = event.nativeEvent.contentOffset.y
  let shouldShow

  if (currentOffset > this._scrollOffset || currentOffset === 0) {
    // scroll down or on top of ScrollView
    shouldShow = false
  } else {
    // scroll up
    shouldShow = true
  }

  if (shouldShow !== this.state.shouldShow && (!shouldShow || currentOffset > 250)) {
    LayoutAnimation.configureNext(CustomLayoutLinear)
    this._scrollOffset = currentOffset
    this.setState({ shouldShow })
  }

  this._scrollOffset = currentOffset
}

// 4. In you render show you action-button only if state.isActionButtonVisible === true
<ScrollView>
  {this.state.shouldShow ? <View /> : null}
</ScrollView>