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

1import { Animated, Easing } from "react-native";
2
3function BreathingCircle() {
4  const breatheAnim = useRef(new Animated.Value(1)).current;
5
6  useEffect(() => {
7    Animated.loop(
8      Animated.sequence([
9        Animated.timing(breatheAnim, {
10          toValue: 1.2,
11          duration: 1000,
12          easing: Easing.inOut(Easing.ease),
13          useNativeDriver: true,
14        }),
15        Animated.timing(breatheAnim, {
16          toValue: 1,
17          duration: 1000,
18          easing: Easing.inOut(Easing.ease),
19          useNativeDriver: true,
20        }),
21      ])
22    ).start();
23  }, []);
24
25  return (
26    <Animated.View style={{
27      width: 100,
28      height: 100,
29      borderRadius: 50,
30      backgroundColor: "#333",
31      transform: [{ scale: breatheAnim }],
32    }}>
33    </Animated.View>
34  );
35}