diff options
author | Santo Cariotti <santo@dcariotti.me> | 2024-08-29 18:27:23 +0200 |
---|---|---|
committer | Santo Cariotti <santo@dcariotti.me> | 2024-08-29 18:27:23 +0200 |
commit | ae63532503eb0b5c7a60d18ef17504c0632d508d (patch) | |
tree | 832c41d50b2621f5a6ffdc1900eadb10cd652440 /components | |
parent | d8f83a2faa426cc9d83c5a0192b5a007983c916e (diff) |
Login page
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', |