132 lines
3.8 KiB
TypeScript
132 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, View, Animated, Dimensions, ImageSourcePropType } from 'react-native';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import { theme } from '../styles/theme';
|
|
|
|
const { width } = Dimensions.get('window');
|
|
const HEADER_HEIGHT = 300;
|
|
|
|
interface ParallaxScrollViewProps {
|
|
children: React.ReactNode;
|
|
headerImage?: ImageSourcePropType;
|
|
headerBackgroundColor?: string;
|
|
headerContent?: React.ReactNode;
|
|
}
|
|
|
|
export function ParallaxScrollView({
|
|
children,
|
|
headerImage,
|
|
headerBackgroundColor = theme.colors.primary,
|
|
headerContent,
|
|
}: ParallaxScrollViewProps) {
|
|
const scrollY = React.useRef(new Animated.Value(0)).current;
|
|
|
|
const headerTranslateY = scrollY.interpolate({
|
|
inputRange: [0, HEADER_HEIGHT],
|
|
outputRange: [0, -HEADER_HEIGHT / 2],
|
|
extrapolate: 'clamp',
|
|
});
|
|
|
|
const imageScale = scrollY.interpolate({
|
|
inputRange: [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
|
|
outputRange: [2, 1, 1],
|
|
extrapolate: 'clamp',
|
|
});
|
|
|
|
const headerOpacity = scrollY.interpolate({
|
|
inputRange: [0, HEADER_HEIGHT / 2],
|
|
outputRange: [1, 0],
|
|
extrapolate: 'clamp',
|
|
});
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Animated.ScrollView
|
|
contentContainerStyle={styles.scrollContent}
|
|
onScroll={Animated.event(
|
|
[{ nativeEvent: { contentOffset: { y: scrollY } } }],
|
|
{ useNativeDriver: true }
|
|
)}
|
|
scrollEventThrottle={16}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<View style={styles.contentContainer}>{children}</View>
|
|
</Animated.ScrollView>
|
|
|
|
<Animated.View
|
|
style={[
|
|
styles.header,
|
|
{
|
|
transform: [{ translateY: headerTranslateY }],
|
|
},
|
|
]}
|
|
>
|
|
<Animated.View
|
|
style={[
|
|
StyleSheet.absoluteFill,
|
|
{
|
|
transform: [{ scale: imageScale }],
|
|
},
|
|
]}
|
|
>
|
|
<LinearGradient
|
|
colors={theme.gradients.primary}
|
|
style={StyleSheet.absoluteFill}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
/>
|
|
{headerImage && (
|
|
<Animated.Image
|
|
source={headerImage}
|
|
style={[styles.headerImage, { opacity: 0.5 }]}
|
|
/>
|
|
)}
|
|
</Animated.View>
|
|
|
|
<Animated.View style={[styles.headerContent, { opacity: headerOpacity }]}>
|
|
{headerContent}
|
|
</Animated.View>
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.colors.background,
|
|
},
|
|
scrollContent: {
|
|
paddingTop: HEADER_HEIGHT,
|
|
},
|
|
contentContainer: {
|
|
backgroundColor: theme.colors.background,
|
|
borderTopLeftRadius: 32,
|
|
borderTopRightRadius: 32,
|
|
marginTop: -32,
|
|
paddingTop: 32,
|
|
minHeight: 800,
|
|
},
|
|
header: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: HEADER_HEIGHT,
|
|
overflow: 'hidden',
|
|
zIndex: 1,
|
|
},
|
|
headerImage: {
|
|
...StyleSheet.absoluteFillObject,
|
|
width: undefined,
|
|
height: undefined,
|
|
resizeMode: 'cover',
|
|
},
|
|
headerContent: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingBottom: 32,
|
|
},
|
|
});
|