title: Hide TabNavigators and Header on Scroll
body: <p>I want to hide the Header and the TabNavigator tabs onScroll. How do I do that? I want to hide them onScroll and show them on ScrollUp. My code: </p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, ScrollView, StyleSheet, TouchableOpacity} from 'react-native';
  
  class ScrollTest extends Component {
  
      render(){
      const { params } = this.props.navigation.state;
  
          return(
              &lt;View style={styles.container}&gt;
  
                 &lt;ScrollView&gt;
                  &lt;View style={{styles.newView}}&gt;&lt;Text&gt;Test&lt;/Text&gt;&lt;/View&gt;
                  &lt;View style={{styles.newView}}&gt;&lt;Text&gt;Test&lt;/Text&gt;&lt;/View&gt;
                  &lt;View style={{styles.newView}}&gt;&lt;Text&gt;Test&lt;/Text&gt;&lt;/View&gt;
                  &lt;View style={{styles.newView}}&gt;&lt;Text&gt;Test&lt;/Text&gt;&lt;/View&gt;
                  &lt;View style={{styles.newView}}&gt;&lt;Text&gt;Test&lt;/Text&gt;&lt;/View&gt;
                  &lt;View style={{styles.newView}}&gt;&lt;Text&gt;Test&lt;/Text&gt;&lt;/View&gt;
                  &lt;View style={{styles.newView}}&gt;&lt;Text&gt;Test&lt;/Text&gt;&lt;/View&gt;
                  &lt;View style={{styles.newView}}&gt;&lt;Text&gt;Test&lt;/Text&gt;&lt;/View&gt;
                 &lt;/ScrollView&gt;
  
              &lt;/View&gt;
          )
      }
  }
  const styles = StyleSheet.create({
    container:{
      flex:1, padding:5 
    },
    newView:{
       height: 200, backgroundColor:'green', margin:10
    }
  })
  export default ScrollTest;
  </code></pre>
  
  <p>I checked <a href="https://medium.com/react-native-training/react-native-animations-using-the-animated-api-ebe8e0669fae" rel="noreferrer">this link</a> for Animated API but not able to figureout how to implement it in onScoll?</p>
  
  <p><a href="https://i.stack.imgur.com/oZlqh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oZlqh.png" alt="enter image description here"></a></p>
  
  <p>So the header <strong>HomeScreen</strong> and the tabs <strong>Tab1</strong> and <strong>Tab2</strong> should hide on scroll and show when scrolled up. How do I do that? </p>
  
  <p>Please help getting started on this.</p>
  
  <p>Many thanks.</p>