themed style

src/components/common/AnimatedText.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withRepeat,
+  withSequence,
+  withDelay,
+  Easing,
+} from 'react-native-reanimated';
+
+const AnimatedText = ({ text, style, delay = 0 }) => {
+  const opacity = useSharedValue(0);
+  const translateY = useSharedValue(20);
+
+  useEffect(() => {
+    opacity.value = withDelay(delay, withTiming(1, { duration: 800 }));
+    translateY.value = withDelay(delay, withTiming(0, { duration: 800 }));
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  return (
+    <Animated.Text style={[styles.text, style, animatedStyle]}>
+      {text}
+    </Animated.Text>
+  );
+};
+
+export default AnimatedText;
+
+// Usage
+const MyComponent = () => {
+  return (
+    <View style={styles.container}>
+      <AnimatedText text="Hello World" style={styles.title} />
+      <AnimatedText text="Welcome to Reanimated" style={styles.subtitle} delay={200} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    marginBottom: 10,
+  },
+  subtitle: {
+    fontSize: 18,
+    color: '#666',
+  },
+  text: {
+    textAlign: 'center',
+  },
+});