Building a Segmented Control With a Sliding Indicator in Reanimated

import { useCallback, useMemo, useRef, useState } from "react";
import { LayoutChangeEvent, Pressable, StyleSheet, Text, View } from "react-native";
import Animated, {
  useAnimatedStyle,
  useDerivedValue,
  withSpring,
} from "react-native-reanimated";
 
type Props = {
  options: string[];
  value: number;
  onChange: (index: number) => void;
};
 
export function SegmentedControl({ options, value, onChange }: Props) {
  // Measured width of each segment (filled by onLayout)
  const [widths, setWidths] = useState<number[]>(() => options.map(() => 0));
  const measured = useRef(0);
 
  const onSegmentLayout = useCallback(
    (index: number) => (e: LayoutChangeEvent) => {
      const w = e.nativeEvent.layout.width;
      setWidths((prev) => {
        if (prev[index] === w) return prev;
        const next = [...prev];
        next[index] = w;
        return next;
      });
    },
    [],
  );
 
  // Precompute the left offset up to each selection
  const offsets = useMemo(() => {
    const acc: number[] = [];
    let sum = 0;
    for (const w of widths) {
      acc.push(sum);
      sum += w;
    }
    return acc;
  }, [widths]);
 
  const indicator = useDerivedValue(() => {
    return {
      x: offsets[value] ?? 0,
      w: widths[value] ?? 0,
    };
  }, [value, offsets, widths]);
 
  const indicatorStyle = useAnimatedStyle(() => ({
    width: withSpring(indicator.value.w, { damping: 18, stiffness: 180 }),
    transform: [{ translateX: withSpring(indicator.value.x, { damping: 18, stiffness: 180 }) }],
  }));
 
  return (
    <View style={styles.track} accessibilityRole="tablist">
      <Animated.View style={[styles.indicator, indicatorStyle]} pointerEvents="none" />
      {options.map((label, i) => (
        <Pressable
          key={label}
          onLayout={onSegmentLayout(i)}
          onPress={() => onChange(i)}
          style={styles.segment}
          accessibilityRole="tab"
          accessibilityState={{ selected: value === i }}
          accessibilityLabel={label}
        >
          <Text style={[styles.label, value === i && styles.labelActive]}>{label}</Text>
        </Pressable>
      ))}
    </View>
  );
}
 
const styles = StyleSheet.create({
  track: {
    flexDirection: "row",
    backgroundColor: "#EEF0F3",
    borderRadius: 12,
    padding: 4,
  },
  indicator: {
    position: "absolute",
    top: 4,
    bottom: 4,
    left: 4,
    borderRadius: 8,
    backgroundColor: "#FFFFFF",
  },
  segment: { paddingVertical: 8, paddingHorizontal: 16 },
  label: { fontSize: 15, color: "#6B7280", fontWeight: "500" },
  labelActive: { color: "#111827", fontWeight: "700" },
});