useCollapsibleHeader

import Animated from "react-native-reanimated";
import { useCollapsibleHeader } from "@/hooks/use-collapsible-header";

function Inbox() {
	const header = useCollapsibleHeader({
		expandedHeight: 96,
		collapsedHeight: 44,
	});

	return (
		<View style={{ flex: 1 }}>
			<Animated.FlatList
				data={messages}
				renderItem={renderMessage}
				{...header.scrollProps}
			/>
			<AppBar
				variant="large"
				collapseProgress={header.progress}
				style={styles.overlay}
			>
				<AppBar.Title>Inbox</AppBar.Title>
			</AppBar>
		</View>
	);
}

function ProfileHeader({ header }: { header: CollapsibleHeader }) {
	const container = useAnimatedStyle(() => ({ height: header.height.value }));

	const coverStyle = useAnimatedStyle(() => ({
		opacity: interpolate(header.progress.value, [0, 0.7], [1, 0], "clamp"),
		transform: [
			{
				scale: interpolate(
					header.offset.value,
					[-80, 0],
					[1.3, 1],
					"clamp",
				),
			},
		],
	}));

	const title = useAnimatedStyle(() => ({
		opacity: interpolate(header.progress.value, [0.6, 1], [0, 1], "clamp"),
	}));

	return (
		<Animated.View style={[styles.header, container]}>
			<Animated.Image
				source={coverImage}
				style={[StyleSheet.absoluteFill, coverStyle]}
			/>
			<Animated.Text style={[styles.compactTitle, title]}>
				Grace Hopper
			</Animated.Text>
		</Animated.View>
	);
}