diff options
Diffstat (limited to 'components/ParallaxScrollView.tsx')
-rw-r--r-- | components/ParallaxScrollView.tsx | 47 |
1 files changed, 15 insertions, 32 deletions
diff --git a/components/ParallaxScrollView.tsx b/components/ParallaxScrollView.tsx index 0a35419..c54cbae 100644 --- a/components/ParallaxScrollView.tsx +++ b/components/ParallaxScrollView.tsx @@ -1,5 +1,5 @@ import type { PropsWithChildren, ReactElement } from 'react'; -import { StyleSheet, useColorScheme } from 'react-native'; +import { StyleSheet, Text, View, useColorScheme } from 'react-native'; import Animated, { interpolate, useAnimatedRef, @@ -12,47 +12,19 @@ import { ThemedView } from '@/components/ThemedView'; const HEADER_HEIGHT = 250; type Props = PropsWithChildren<{ - headerImage: ReactElement; - headerBackgroundColor: { dark: string; light: string }; }>; export default function ParallaxScrollView({ children, - headerImage, - headerBackgroundColor, }: Props) { - const colorScheme = useColorScheme() ?? 'light'; const scrollRef = useAnimatedRef<Animated.ScrollView>(); - const scrollOffset = useScrollViewOffset(scrollRef); - - const headerAnimatedStyle = useAnimatedStyle(() => { - return { - transform: [ - { - translateY: interpolate( - scrollOffset.value, - [-HEADER_HEIGHT, 0, HEADER_HEIGHT], - [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75] - ), - }, - { - scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]), - }, - ], - }; - }); return ( <ThemedView style={styles.container}> <Animated.ScrollView ref={scrollRef} scrollEventThrottle={16}> - <Animated.View - style={[ - styles.header, - { backgroundColor: headerBackgroundColor[colorScheme] }, - headerAnimatedStyle, - ]}> - {headerImage} - </Animated.View> + <View style={styles.nav}> + <Text style={styles.navText}>CAS4</Text> + </View> <ThemedView style={styles.content}>{children}</ThemedView> </Animated.ScrollView> </ThemedView> @@ -63,6 +35,17 @@ const styles = StyleSheet.create({ container: { flex: 1, }, + nav: { + backgroundColor: '#fcfcfc', + paddingTop: 50, + padding: 10, + }, + navText: { + textAlign: 'center', + fontFamily: 'SpaceMono', + fontSize: 24, + fontWeight: 'bold' + }, header: { height: 250, overflow: 'hidden', |