React Native: How to use the Animated API for a ripple effect?

1import { Animated, TouchableWithoutFeedback, View, StyleSheet } from "react-native";
2
3function RippleButton({ onPress, children }) {
4  const scaleAnim = useRef(new Animated.Value(1)).current;
5  const opacityAnim = useRef(new Animated.Value(0.3)).current;
6
7  const handlePressIn = () => {
8    Animated.parallel([
9      Animated.spring(scaleAnim, {
10        toValue: 0.9,
11        friction: 3,
12        useNativeDriver: true,
13      }),
14      Animated.timing(opacityAnim, {
15        toValue: 0.1,
16        duration: 200,
17        useNativeDriver: true,
18      }),
19    ]).start();
20  };
21
22  const handlePressOut = () => {
23    Animated.parallel([
24      Animated.spring(scaleAnim, {
25        toValue: 1,
26        friction: 3,
27        useNativeDriver: true,
28      }),
29      Animated.timing(opacityAnim, {
30        toValue: 0.3,
31        duration: 200,
32        useNativeDriver: true,
33      }),
34    ]).start();
35  };
36
37  return (
38    <TouchableWithoutFeedback
39      onPress={onPress}
40      onPressIn={handlePressIn}
41      onPressOut={handlePressOut}
42    >
43      <Animated.View style={{
44        transform: [{ scale: scaleAnim }],
45        backgroundColor: `rgba(0, 0, 0, ${opacityAnim})`,
46        borderRadius: 8,
47      }}>
48        {children}
49      </Animated.View>
50    </TouchableWithoutFeedback>
51  );
52}