simple collapsible header

collapsible-header.ts

import { View } from 'react-native';
import Animated, {
  Extrapolation,
  interpolate,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';
import { Text, Image } from 'native-base';

const H_MAX_HEIGHT = 170;
const H_MIN_HEIGHT = 75;
const H_SCROLL_DISTANCE = H_MAX_HEIGHT - H_MIN_HEIGHT;

const SandboxScreen = () => {
  const y = useSharedValue(0);
  
  const headerScrollHeight = useAnimatedStyle(() => {
    return {
      height: interpolate(
        y.value,
        [0, H_SCROLL_DISTANCE],
        [H_MAX_HEIGHT, H_MIN_HEIGHT],
        Extrapolation.CLAMP,
      ),
    };
  });
  
  
  const scrollHandler = useAnimatedScrollHandler((event) => {
    y.value = event.contentOffset.y;
  });
  
  return (
    <Animated.View style={{ flex: 1 }}>
      <Animated.ScrollView
        onScroll={scrollHandler}
        scrollEventThrottle={16}
      >
        <View style={{ paddingTop: H_MAX_HEIGHT, height: 900, backgroundColor: 'green' }}>
          <Text>algo here</Text>
        </View>
      </Animated.ScrollView>
      <Animated.View
        style={[{
          position: "absolute",
          left: 0,
          right: 0,
          top: 0,
          width: "100%",
          overflow: "hidden",
          zIndex: 999,
          // STYLE
          borderBottomColor: "#EFEFF4",
          borderBottomWidth: 2,
          padding: 10,
          backgroundColor: "blue"
        }, headerScrollHeight]}
      >
        <Image
          source={{ uri: "https://via.placeholder.com/300" }}
          style={{ flex: 1 }}
          resizeMode={"contain"}
          alt="something"
        />
      </Animated.View>
    </Animated.View>
  );
}

export default SandboxScreen;