diff options
author | polwex <polwex@sortug.com> | 2025-07-15 17:20:58 +0700 |
---|---|---|
committer | polwex <polwex@sortug.com> | 2025-07-15 17:20:58 +0700 |
commit | a528bd94a6e8e25010ae26a305550b211df0ddc6 (patch) | |
tree | 887425ddc3160ae023292dfefc49d77c2eb8dcec /components/HelloWave.tsx |
Initial commit
Generated by create-expo 3.4.3.
Diffstat (limited to 'components/HelloWave.tsx')
-rw-r--r-- | components/HelloWave.tsx | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/components/HelloWave.tsx b/components/HelloWave.tsx new file mode 100644 index 0000000..eb6ea61 --- /dev/null +++ b/components/HelloWave.tsx @@ -0,0 +1,40 @@ +import { useEffect } from 'react'; +import { StyleSheet } from 'react-native'; +import Animated, { + useAnimatedStyle, + useSharedValue, + withRepeat, + withSequence, + withTiming, +} from 'react-native-reanimated'; + +import { ThemedText } from '@/components/ThemedText'; + +export function HelloWave() { + const rotationAnimation = useSharedValue(0); + + useEffect(() => { + rotationAnimation.value = withRepeat( + withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })), + 4 // Run the animation 4 times + ); + }, [rotationAnimation]); + + 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, + }, +}); |