react-native - transform header

import { Box, ScrollView } from 'native-base';
import type { IScrollViewProps } from 'native-base';
import { SafeAreaView } from 'react-native-safe-area-context';
import Header from './Header';
import Footer from './Footer';
import { useRef, useState } from 'react';
import { Animated } from 'react-native';

const Layout = ({ children, ...otherProps }: IScrollViewProps) => {
  const scrollOffsetY = useRef(new Animated.Value(0)).current;
  const [height, setHeight] = useState(0);

  const headerScrollY = scrollOffsetY.interpolate({
    inputRange: [0, height],
    outputRange: [0, height],
    extrapolate: 'identity',
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Box flex={1} bg="muted.50">
        <ScrollView
          {...otherProps}
          onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }], {
            useNativeDriver: true,
          })}
          onLayout={(ev) => {
            setHeight(ev.nativeEvent.layout.height);
          }}
          scrollEventThrottle={1}
        >
          <Animated.View
            style={{
              transform: [{ translateY: headerScrollY }],
              width: '100%',
              zIndex: 999,
            }}
          >
            <Header />
          </Animated.View>
          {children}
          <Footer />
        </ScrollView>
      </Box>
    </SafeAreaView>
  );
};

export default Layout;