89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
import type { PropsWithChildren, ReactElement } from 'react';
|
|
import { StyleSheet } from 'react-native';
|
|
import Animated, {
|
|
interpolate,
|
|
useAnimatedRef,
|
|
useAnimatedStyle,
|
|
useScrollViewOffset,
|
|
} from 'react-native-reanimated';
|
|
import { ThemedView } from '@/components/theme/Theme';
|
|
import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
|
|
const HEADER_HEIGHT = 250;
|
|
|
|
type Props = PropsWithChildren<{
|
|
headerImage: ReactElement;
|
|
headerBackgroundColor: { dark: string; light: string };
|
|
headerHeight?: number;
|
|
}>;
|
|
|
|
const ParallaxScrollView = ({
|
|
children,
|
|
headerImage,
|
|
headerBackgroundColor,
|
|
headerHeight = HEADER_HEIGHT,
|
|
}: Props) => {
|
|
const scheme = useColorScheme() ?? 'dark';
|
|
const scrollRef = useAnimatedRef<Animated.ScrollView>();
|
|
const scrollOffset = useScrollViewOffset(scrollRef);
|
|
const bottom = useBottomTabOverflow();
|
|
const headerAnimatedStyle = useAnimatedStyle(() => {
|
|
return {
|
|
transform: [
|
|
{
|
|
translateY: interpolate(
|
|
scrollOffset.value,
|
|
[-headerHeight, 0, headerHeight],
|
|
[-headerHeight / 2, 0, headerHeight * 0.75],
|
|
),
|
|
},
|
|
{
|
|
scale: interpolate(scrollOffset.value, [-headerHeight, 0, headerHeight], [2, 1, 1]),
|
|
},
|
|
],
|
|
};
|
|
});
|
|
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<Animated.ScrollView
|
|
ref={scrollRef}
|
|
scrollEventThrottle={16}
|
|
scrollIndicatorInsets={{ bottom }}
|
|
contentContainerStyle={{ paddingBottom: bottom }}
|
|
>
|
|
<Animated.View
|
|
style={[
|
|
styles.header,
|
|
{
|
|
backgroundColor: headerBackgroundColor[scheme],
|
|
height: headerHeight,
|
|
},
|
|
headerAnimatedStyle,
|
|
]}
|
|
>
|
|
{headerImage}
|
|
</Animated.View>
|
|
<ThemedView style={styles.content}>{children}</ThemedView>
|
|
</Animated.ScrollView>
|
|
</ThemedView>
|
|
);
|
|
};
|
|
export default ParallaxScrollView;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
header: {
|
|
overflow: 'hidden',
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
padding: 32,
|
|
gap: 16,
|
|
overflow: 'hidden',
|
|
},
|
|
});
|