React Native: How to use the Animated API for a countdown animation?

1import { Animated, Text, StyleSheet } from "react-native";
2
3function Countdown({ from, to, duration }) {
4  const animatedValue = useRef(new Animated.Value(from)).current;
5  const [displayValue, setDisplayValue] = useState(from);
6
7  useEffect(() => {
8    animatedValue.addListener(({ value }) => {
9      setDisplayValue(Math.round(value));
10    });
11
12    Animated.timing(animatedValue, {
13      toValue: to,
14      duration: duration * 1000,
15      useNativeDriver: false,
16    }).start();
17
18    return () => animatedValue.removeAllListeners();
19  }, []);
20
21  const scale = animatedValue.interpolate({
22    inputRange: [to, from],
23    outputRange: [1, 1.5],
24  });
25
26  return (
27    <Animated.Text style={{
28      fontSize: 48,
29      transform: [{ scale }],
30    }}>
31      {displayValue}
32    </Animated.Text>
33  );
34}