React Native ScrollView Animated header

Lets try to achive collapsible scrollview header as shown below.

Dependencies

npm install react-native-reanimated
react-native link react-native-reanimated
npm install react-native-gesture-handler

import React from 'react';
import {Text, View, StyleSheet, ScrollView, Image} from 'react-native';

import {Images} from './image';
import Animated from 'react-native-reanimated';

const ImageList = [
  {id: 1, uri: Images.one},
  {id: 2, uri: Images.two},
  {id: 3, uri: Images.thre},
  {id: 4, uri: Images.four},
  {id: 5, uri: Images.fiv},
];

const HEADER_HEIGHT = 70;
const componentName = ({params}) => {
  const scrollY = new Animated.Value(0);
  const clampDiff = new Animated.diffClamp(scrollY, 0, HEADER_HEIGHT);
  const headery = Animated.interpolate(clampDiff, {
    inputRange: [0, HEADER_HEIGHT],
    outputRange: [0, -HEADER_HEIGHT],
  });

  return (
    <View style={{flex: 1}}>
      <Animated.View
        style={{
          position: 'absolute',
          left: 0,
          right: 0,
          top: 0,
          height: HEADER_HEIGHT,
          backgroundColor: 'pink',
          zIndex: 10,
          transform: [{translateY: headery}],
        }}></Animated.View>
      <Animated.ScrollView
        scrollEventThrottle={16}
        onScroll={Animated.event([
          {
            nativeEvent: {
              contentOffset: {y: scrollY},
            },
          },
        ])}>
        {ImageList.map(i => (
          <View style={{height: 400, margin: 20}} key={i.id}>
            <Image
              source={i.uri}
              style={{flex: 1, height: null, width: null}}
            />
          </View>
        ))}
      </Animated.ScrollView>
    </View>
  );
};

export default componentName;

const styles = StyleSheet.create({});

Conclusion:
You have made your first animation with the reanimated API by making the collapsible header scrollview animation.

Please feel free to post comments.