React Native: How to implement a tab bar with custom animations in React Native?

1import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
2
3function CustomTabBar({ tabs, activeTab, onTabPress }) {
4  const tabWidth = useSharedValue(0);
5
6  return (
7    <View style={styles.tabBar}>
8      {tabs.map((tab, index) => (
9        <TouchableOpacity
10          key={tab.name}
11          onPress={() => onTabPress(tab.name)}
12          style={styles.tab}
13        >
14          <Animated.View
15            style={[
16              styles.tabIndicator,
17              activeTab === tab.name && styles.activeTab,
18            ]}
19          >
20            <Text style={[
21              styles.tabText,
22              activeTab === tab.name && styles.activeTabText,
23            ]}>
24              {tab.label}
25            </Text>
26          </Animated.View>
27        </TouchableOpacity>
28      ))}
29    </View>
30  );
31}

1const indicatorX = useSharedValue(0);
2
3const indicatorStyle = useAnimatedStyle(() => ({
4  transform: [{ translateX: withSpring(indicatorX.value) }],
5}));