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 (
    
      
      
        {ImageList.map(i => (
          
            
          
        ))}
      
    
  );
};

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.