Animated header on scrollview

Question

I have a scrollview on top of which i display a header. My goal is to animated so that when the user scrolls down, the header collapse and when the view scrolls up, the header expands. I found plenty of exemple where the user has to scroll all the way up for the header to expand. What i'd like is for the header to expand as soon as the scroll view scrolls up.

How can I achieve this?

Here is what I have so far:

type State = { scrollY: Animated.Value };
....

headerHeight = this.state.scrollY.interpolate({ inputRange: [ 0, 60 ], outputRange: [60, 0], extrapolate: "clamp" });

<Animated.View style={{ height: headerHeight, backgroundColor: "#F0f" }}
          >
            <ScreenHeader
              ref={this.screenHeaderRef}
              onTouchAvatar={this.handleOpenProfile}
              onTouchNotifications={this.handleOpenNotification}
              user={currentUser}
              newNotifications={this.props.newNotifications}
            />
          </Animated.View>
          <WrappedComponent
            onScroll={Animated.event([
              {
                nativeEvent: {
                  contentOffset: {
                    y: 
                      this.state.scrollY
                  }
                }
              }
            ])}
            onMomentumScrollEnd={this.handleMomentumScrollEnd}
            {...this.props}
          />

did you achieve the scroll? Just need to fix the header to expand? — Subhendu Kundu, Mar 04 '19 at 15:41
@SubhenduKundu Yes, with the code above, when the view scrolls down, the header collapses and when it scrolls up and reaches the top, the header expands. I need to be able to expand it as soon as the user scrolls up even if the view is not at the top. — otusweb, Mar 05 '19 at 07:58

score 0 · Answer 1 · answered Mar 05 '19 at 19:39

So you are right about the animating the translateY property. So I did it a bit different way for sake of this question (Poorly, sorry about that, you need to play around a bit with this to get the right animation). So try to set the style of the animated view's translateY to 0;

<Animated.View                 
  style={[{
    transform: [
      {
        translateY: this.transform
      }
    ]
  }, {
    backgroundColor: 'red'
  }]}
>

Then on scroll set it to -100 or whatever your header height.

later when the user comes back up, towards the top 0, you set it up to 0. This will do the trick, hopefully. Here's a small example, sorry for getting back late. :) https://snack.expo.io/@subkundu/header-hideshow

Animated header on scrollview

1 Answers1