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

1import { Animated, View, TouchableOpacity, StyleSheet } from "react-native";
2
3function TabIndicator({ tabs, activeIndex }) {
4  const translateX = useRef(new Animated.Value(0)).current;
5
6  useEffect(() => {
7    Animated.spring(translateX, {
8      toValue: activeIndex * (100 / tabs.length),
9      useNativeDriver: true,
10    }).start();
11  }, [activeIndex]);
12
13  return (
14    <View style={styles.container}>
15      <View style={styles.tabs}>
16        {tabs.map((tab, index) => (
17          <TouchableOpacity key={index} style={styles.tab}>
18            <Text>{tab.label}</Text>
19          </TouchableOpacity>
20        ))}
21      </View>
22      <Animated.View
23        style={[
24          styles.indicator,
25          {
26            width: `${100 / tabs.length}%`,
27            transform: [{ translateX }],
28          },
29        ]}
30      />
31    </View>
32  );
33}
34
35const styles = StyleSheet.create({
36  container: { borderBottomWidth: 1, borderBottomColor: "#ccc" },
37  tabs: { flexDirection: "row" },
38  tab: { flex: 1, alignItems: "center", paddingVertical: 12 },
39  indicator: { height: 2, backgroundColor: "#333", position: "absolute", bottom: 0 },
40});