Why is my animation effect not working the first time I click it? Also, can anyone provide an example of using TypeScript with ref binding in React Native for animations?
const Test = () => {
const messRef: any = React.useRef(new Animated.Value(0)).current;
const [show, setShow] = React.useState<boolean>(false);
return (
<View>
<Animated.Text
onPress={() => {
Animated.timing(messRef, {
toValue: show ? 200 : 0,
duration: 1000,
useNativeDriver: false,
}).start();
setShow(!show);
}}
style={{
color: messRef.interpolate({
inputRange: [0, 100],
outputRange: ["orange", "blue"],
}),
}}
>
Everything you do in life stems from either fear or love
</Animated.Text>
</View>
);
};