How we can hide the tabbar on scroll down event in react native

Question

I'm using react-native-tab-view module to implement tabs in my app. The tabs are working fine but I want when user scroll down the list the tab bar should be hidden with animation.

the module link that I'm using i.e., https://github.com/react-native-community/react-native-tab-view

Here is my code:-

import React, { Component } from 'react';
import { View, Text, ScrollView, ActivityIndicator } from 'react-native';
import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';

import styles from './Styles';

// First tab component
const FirstRoute = () => (
  <ScrollView>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
  </ScrollView>
);

export default class BookingDetail extends Component {

  // default states
  state = {
    index: 0,
    routes: [
      { key: '1', title: 'Booking Detail' },
      { key: '2', title: 'Checklist' }
    ],
  };

  // handeler for index change
  _handleIndexChange = index => this.setState({ index });

  // handler for render header
  _renderHeader = props => <TabBar {...props} indicatorStyle={styles.indicatorStyle} tabStyle={styles.tabStyle} style={styles.tabBarContainer} labelStyle={styles.labelStyle} />;

  // render each scene
  _renderScene = SceneMap({
    '1': FirstRoute,
    '2': FirstRoute
  });

  render() {
    return (
      <TabViewAnimated
        style={styles.container}
        navigationState={this.state}
        renderScene={this._renderScene}
        renderHeader={this._renderHeader}
        onIndexChange={this._handleIndexChange}
      />
    );
  }
}