42 lines
871 B
TypeScript
42 lines
871 B
TypeScript
import React from 'react';
|
|
import { StyleSheet, View, ScrollView } from 'react-native';
|
|
|
|
interface Props {
|
|
children: React.ReactNode;
|
|
headerImage: React.ReactElement;
|
|
headerBackgroundColor: { dark: string; light: string };
|
|
}
|
|
|
|
export default function ParallaxScrollView({
|
|
children,
|
|
headerImage,
|
|
headerBackgroundColor,
|
|
}: Props) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView scrollEventThrottle={16}>
|
|
<View style={[styles.header, { backgroundColor: headerBackgroundColor.light }]}>
|
|
{headerImage}
|
|
</View>
|
|
<View style={styles.content}>{children}</View>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
header: {
|
|
height: 250,
|
|
overflow: 'hidden',
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
padding: 32,
|
|
gap: 16,
|
|
overflow: 'hidden',
|
|
},
|
|
});
|