React Native: How to use the Animated API for a gesture-driven animation?

1import { Animated, PanResponder, View, StyleSheet } from "react-native";
2
3function GestureAnimation() {
4  const pan = useRef(new Animated.ValueXY()).current;
5
6  const panResponder = useRef(
7    PanResponder.create({
8      onMoveShouldSetPanResponder: () => true,
9      onPanResponderGrant: () => {
10        pan.setOffset({
11          x: pan.x._value,
12          y: pan.y._value,
13        });
14      },
15      onPanResponderMove: Animated.event(
16        [null, { dx: pan.x, dy: pan.y }],
17        { useNativeDriver: false }
18      ),
19      onPanResponderRelease: () => {
20        Animated.spring(pan, {
21          toValue: { x: 0, y: 0 },
22          useNativeDriver: false,
23        }).start();
24      },
25    })
26  ).current;
27
28  return (
29    <Animated.View
30      {...panResponder.panHandlers}
31      style={[styles.box, pan.getLayout()]}
32    />
33  );
34}