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

1import { Animated, View, Text, StyleSheet } from "react-native";
2
3function FlipCard({ front, back }) {
4  const flipAnim = useRef(new Animated.Value(0)).current;
5  const [showFront, setShowFront] = useState(true);
6
7  const frontOpacity = flipAnim.interpolate({
8    inputRange: [0, 0.5, 0.5, 1],
9    outputRange: [1, 1, 0, 0],
10  });
11
12  const backOpacity = flipAnim.interpolate({
13    inputRange: [0, 0.5, 0.5, 1],
14    outputRange: [0, 0, 1, 1],
15  });
16
17  const flip = () => {
18    Animated.timing(flipAnim, {
19      toValue: showFront ? 1 : 0,
20      duration: 500,
21      useNativeDriver: true,
22    }).start(() => setShowFront(!showFront));
23  };
24
25  return (
26    <View style={styles.container}>
27      <Animated.View style={[styles.card, { opacity: frontOpacity }]}>
28        <Text>{front}</Text>
29      </Animated.View>
30      <Animated.View style={[styles.card, { opacity: backOpacity }]}>
31        <Text>{back}</Text>
32      </Animated.View>
33    </View>
34  );
35}