66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
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';
|
|
import { responsiveFontSize } from 'react-native-responsive-dimensions';
|
|
|
|
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: responsiveFontSize(2.5),
|
|
fontWeight: 'bold',
|
|
marginBottom: 10,
|
|
},
|
|
subtitle: {
|
|
fontSize: responsiveFontSize(1.8),
|
|
color: '#666',
|
|
},
|
|
text: {
|
|
textAlign: 'center',
|
|
},
|
|
});
|