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

1import { Animated, TouchableOpacity, Text, StyleSheet } from "react-native";
2
3function AnimatedButton({ onPress, title }) {
4  const scaleAnim = useRef(new Animated.Value(1)).current;
5
6  const handlePressIn = () => {
7    Animated.spring(scaleAnim, {
8      toValue: 0.95,
9      friction: 3,
10      useNativeDriver: true,
11    }).start();
12  };
13
14  const handlePressOut = () => {
15    Animated.spring(scaleAnim, {
16      toValue: 1,
17      friction: 3,
18      useNativeDriver: true,
19    }).start();
20  };
21
22  return (
23    <TouchableOpacity
24      onPress={onPress}
25      onPressIn={handlePressIn}
26      onPressOut={handlePressOut}
27      activeOpacity={1}
28    >
29      <Animated.View
30        style={[styles.button, { transform: [{ scale: scaleAnim }] }]}
31      >
32        <Text style={styles.buttonText}>{title}</Text>
33      </Animated.View>
34    </TouchableOpacity>
35  );
36}
37
38const styles = StyleSheet.create({
39  button: {
40    backgroundColor: "#333",
41    paddingHorizontal: 24,
42    paddingVertical: 12,
43    borderRadius: 8,
44  },
45  buttonText: { color: "white", fontSize: 16 },
46});