title: React Native using Animated to hide Header (leaves blank space after TransformY)
body: <p>I have implemented hiding header while scrolling in React native using Animated. 
  Here is the code: </p>
  
  <pre><code>const y = new Animated.Value(0);
  const AnimatedWebView = Animated.createAnimatedComponent(WebView);
  const HEADER_HEIGHT = 60;
  const {diffClamp} = Animated;
  
  function WebPage({route}) {
    const diffClampY = diffClamp(y, 0, HEADER_HEIGHT);
    const translateY = diffClampY.interpolate({
      inputRange: [0, HEADER_HEIGHT],
      outputRange: [0, -HEADER_HEIGHT],
    });
    return (
      &lt;SafeAreaView style={{flex: 1}}&gt;
        &lt;Animated.View
          style={{
            height: HEADER_HEIGHT,
            width: '100%',
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            zIndex: 2,
            backgroundColor: 'lightblue',
            transform: [{translateY: translateY}],
          }}
        /&gt;
        &lt;AnimatedWebView
          source={{
            uri: 'https://www.stackoverflow.com',
          }}
          originWhitelist={['*']}
          containerStyle={{paddingTop: 60}}
          bounces={false}
          onScroll={Animated.event([{nativeEvent: {contentOffset: {y: y}}}])}
        /&gt;
      &lt;/SafeAreaView&gt;
    );
  }
  
  </code></pre>
  
  <p>Since Header is positioned absolute to stick to the top, I have given paddingTop(same as height of the header) to avoid header overlapping the contents of the WebView initially. Now because of this, when I scroll, as header disappears, it leaves blank space as shown:</p>
  
  <p><a href="https://i.stack.imgur.com/dsQsU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dsQsU.png" alt="Before hiding the Header"></a></p>
  
  <p><a href="https://i.stack.imgur.com/VNtLS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VNtLS.png" alt="After hiding the Header"></a></p>
  
  <p>Above is image before &amp; after hiding the Header. Blank space is left where header is used to be. How should I dynamically change the padding so that as header disappears, there is no blank space left? I have tried without absolutely positioning the header and giving no paddingTop to the Webview, but still blank space.</p>
  
  <p>Any help appreciated! Thanks</p>