diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/HelloWave.tsx | 37 | ||||
| -rw-r--r-- | components/ParallaxScrollView.tsx | 47 | 
2 files changed, 15 insertions, 69 deletions
diff --git a/components/HelloWave.tsx b/components/HelloWave.tsx deleted file mode 100644 index f4b6ea5..0000000 --- a/components/HelloWave.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { StyleSheet } from 'react-native'; -import Animated, { -  useSharedValue, -  useAnimatedStyle, -  withTiming, -  withRepeat, -  withSequence, -} from 'react-native-reanimated'; - -import { ThemedText } from '@/components/ThemedText'; - -export function HelloWave() { -  const rotationAnimation = useSharedValue(0); - -  rotationAnimation.value = withRepeat( -    withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })), -    4 // Run the animation 4 times -  ); - -  const animatedStyle = useAnimatedStyle(() => ({ -    transform: [{ rotate: `${rotationAnimation.value}deg` }], -  })); - -  return ( -    <Animated.View style={animatedStyle}> -      <ThemedText style={styles.text}>👋</ThemedText> -    </Animated.View> -  ); -} - -const styles = StyleSheet.create({ -  text: { -    fontSize: 28, -    lineHeight: 32, -    marginTop: -6, -  }, -}); 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',  |