The react-native-scrollable-animated-header's discuss from gapur

react-native-scrollable-animated-header's Issues

How to Animate the header again when we scroll upside

Hey, your repository helped me a lot and I am able to implement the animation.
Thank you very much.
But now the problem is I want to show/animate the header back when we scroll up.
The current behaviour is when the user scrolls down Header just translate to -HEADER_MAX_HEIGHT.
Here is my code
App.js

import React, {Component, useRef} from 'react';
import {Text, View, FlatList, Animated} from 'react-native';
import TestView from './TestView';
import Header from './Header';

const HEADER_MAX_HEIGHT = 55;
const HEADER_MIN_HEIGHT = 10;
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

export default function CollapsableHeader(props) {
  const [array, setArray] = React.useState(new Array(200).fill(10));

  const scrollY = useRef(new Animated.Value(0)).current;

  const headerTranslateY = scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE],
    outputRange: [0, -HEADER_SCROLL_DISTANCE],
    extrapolate: 'clamp',
  });
  return (
    <View style={{flex: 1}}>
      <Animated.FlatList
        style={{flex: 1, paddingTop: HEADER_MAX_HEIGHT}}
        onScroll={Animated.event(
          [{nativeEvent: {contentOffset: {y: scrollY}}}],
          {useNativeDriver: true},
        )}
     
        data={array}
        renderItem={({item}) => <TestView key={item} />}
        keyExtractor={(item, index) => String(index)}
      />
      <Animated.View
        style={[
          {
            height: HEADER_MAX_HEIGHT,
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            backgroundColor: '#62d1bc',
            overflow: 'hidden',
            height: HEADER_MAX_HEIGHT,
          },
          {
            transform: [{translateY: headerTranslateY}],
          },
        ]}>
        <Text style={{textAlign: 'center', fontSize: 20}}>
          CollapsableHeader
        </Text>
      </Animated.View>
    </View>
  );
}

Can you guide me on how can I achieve this behaviour?

Recommend Projects