CODEWITHSUNDEEP
react-nativereact-native-reanimated
Eric Ahn
Eric Ahn

Reputation: 401

React Native using Animated to hide Header (leaves blank space after TransformY)

I have implemented hiding header while scrolling in React native using Animated. Here is the 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 (
    <SafeAreaView style={{flex: 1}}>
      <Animated.View
        style={{
          height: HEADER_HEIGHT,
          width: '100%',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 2,
          backgroundColor: 'lightblue',
          transform: [{translateY: translateY}],
        }}
      />
      <AnimatedWebView
        source={{
          uri: 'https://www.stackoverflow.com',
        }}
        originWhitelist={['*']}
        containerStyle={{paddingTop: 60}}
        bounces={false}
        onScroll={Animated.event([{nativeEvent: {contentOffset: {y: y}}}])}
      />
    </SafeAreaView>
  );
}

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:

Before hiding the Header

After hiding the Header

Above is image before & 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.

Any help appreciated! Thanks

Upvotes: 2

Views: 3205

Answers (1)

Minh Dao
Minh Dao

Reputation: 837

When you using translateY, it means you're moving your header away from its current position, not the place it holds. And the blank space you saw is kind of an anchor of the header (open your debugger, you will see your header component is just still in old position). In order to move your webview, just bind your webview's translateY along with your header, and you will have perfect animation.

<AnimatedWebView
    source={{
      uri: 'https://www.stackoverflow.com',
    }}
    originWhitelist={['*']}
    containerStyle={{paddingTop: 60}}
    bounces={false}
    onScroll={Animated.event([{nativeEvent: {contentOffset: {y: y}}}])}
    style={{
        transform: [{translateY: translateY}]
    }}
/>

Edit 1

I'm thinking of 3 solutions:

  1. You will change the height of the webview along with its position. Check this out: Increase width height of view using animation.
  2. Make your webview's height greater than its default height. So when you translate the webview, the redundant space will cover your blank space. In this case, you have to calculate the height of your webview using React Native Dimension
  3. There is a transform's property, called scale. You can use it to stretch your webview, but I don't know if it will stretch your webview's content or not.

Upvotes: 3

Related Questions