gapur / react-native-scrollable-animated-header Goto Github PK

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>
  );
}