React native tabview scroll tabbar with inside scroll

Question

I am building a react native app like social platform. In that app, I have used the tab navigation from the react-navigation package. and inside the tab on one of the screen, I have used another tab view from react-native-tab-view. In that tab view, I wanted that when I scroll the inside content then the tab bar, the bar should get hide/show or it can scroll with the content of the tab view. for now, the content is scrolling fine but when I provide the tab view a parent with Scrollview then it only scroll to some part not shows my full content.

In that screen, there is two tab one is world feed and another is connection feed.

export class FeedTab extends PureComponent {

  constructor(props) {
    super(props);
    this.da = data.getTopics();
    this.state = {
      index: 0,
      routes: [
        { key: '1', title: 'World' },
        { key: '2', title: 'Connections'},
      ],
    };
    this.data = data.getArticles('post');
  }



  _keyExtractor(post, index) {
    return post.id;
  }

  renderOpenFeedView(info, navi){
    return(
      content....
    )
  }

  renderConnectionFeedView(info, navi){
    return(
      content....
    )
  }

  renderOpenFeed(){
    return(
        <FlatList data={this.data}
          extraData={this.props}
          renderItem={item =>     this.renderOpenFeedView(item, this.props.navigation)}
          keyExtractor={this._keyExtractor}
          style={feedStyles.container}/>
    )
  }

  renderConnectionFeed(){
    return(
      <FlatList data={this.data}
        extraData={this.props}
        renderItem={item => this.renderConnectionFeedView(item, this.props.navigation)}
        keyExtractor={this._keyExtractor}
        style={feedStyles.container}/>
    )
  }

  _handleIndexChange = index => this.setState({ index });

  _renderHeader = props => <TabBar
                              {...props}
                              style = {{backgroundColor:RkTheme.current.colors.inverse,elevation: 3, borderBottomWidth: 0.4,borderColor: RkTheme.current.colors.grey}}
                              labelStyle = {{color:RkTheme.current.colors.text.tabLabel, fontFamily: RkTheme.current.fonts.bold, fontSize:12}}
                              tabStyle = {{width:responsiveWidth(50)}}
                              scrollEnabled = {true}
                              indicatorStyle = {{backgroundColor: RkTheme.current.colors.primary}} />;


  _renderScene = SceneMap({
    '1': this.renderOpenFeed.bind(this),
    '2': this.renderConnectionFeed.bind(this),
  });

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

const styles = StyleSheet.create({
  container: {
    width:responsiveWidth(100),
    height:responsiveHeight(99),
    backgroundColor: RkTheme.current.colors.screen.scroll,
  },
});

this is the feed tab component which I have rendered in feed view like this.

<FeedTab navigation = {this.props.navigation} />

now the scrolling is good and i wanted that when i scroll the content then the tab bar should also be scrolled with that or can hide/show with scroll down/up.

If Anyone knows please help.

Thanks in advance.