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

1import { Animated, Easing } from "react-native";
2
3function SwingView({ children }) {
4  const swingAnim = useRef(new Animated.Value(0)).current;
5
6  useEffect(() => {
7    Animated.loop(
8      Animated.sequence([
9        Animated.timing(swingAnim, {
10          toValue: 1,
11          duration: 200,
12          easing: Easing.out(Easing.ease),
13          useNativeDriver: true,
14        }),
15        Animated.timing(swingAnim, {
16          toValue: -1,
17          duration: 400,
18          easing: Easing.inOut(Easing.ease),
19          useNativeDriver: true,
20        }),
21        Animated.timing(swingAnim, {
22          toValue: 0,
23          duration: 200,
24          easing: Easing.in(Easing.ease),
25          useNativeDriver: true,
26        }),
27      ])
28    ).start();
29  }, []);
30
31  const rotate = swingAnim.interpolate({
32    inputRange: [-1, 0, 1],
33    outputRange: ["-10deg", "0deg", "10deg"],
34  });
35
36  return (
37    <Animated.View style={{ transform: [{ rotate }] }}>
38      {children}
39    </Animated.View>
40  );
41}