summaryrefslogtreecommitdiff
path: root/components/ParallaxScrollView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/ParallaxScrollView.tsx')
-rw-r--r--components/ParallaxScrollView.tsx47
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',