Как мы можем скрыть панель вкладок на событие прокрутки в реагировать родной

Question

Я использую модуль response-native-tab-view для реализации вкладок в моем приложении. Вкладки работают нормально, но я хочу, чтобы, когда пользователь прокручивал список вниз, панель вкладок должна была быть скрыта с анимацией.

ссылка на модуль, которую я использую, т.е. https://github.com/react-native-community/react-native-tab-view

Вот мой код:-

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}
      />
    );
  }
}