Carousel Navigator

1import React, { useEffect } from "react"
2import { Pressable, View, type StyleProp, type ViewStyle } from "react-native"
3import Animated, {
4  Easing, cancelAnimation, useAnimatedStyle, useReducedMotion,
5  useSharedValue, withSpring, withTiming, type SharedValue,
6} from "react-native-reanimated"
7import Svg, { Path } from "react-native-svg"
8export type CarouselNavigatorTheme = {
9  bg: string
10  button: string
11  dot: string
12  progress: string
13}
14export interface CarouselNavigatorProps {
15  totalSlides?: number
16  autoDelay?: number
17  themes?: CarouselNavigatorTheme[]
18  currentIndex: number
19  onIndexChange: (index: number) => void
20  style?: StyleProp<ViewStyle>
21  testID?: string
22}
23const DEFAULT_THEMES: CarouselNavigatorTheme[] = [
24  { bg: "#f4f4f5", button: "#18181b", dot: "#d4d4d8", progress: "#d4d4d8" },
25  { bg: "#dbeafe", button: "#155dfc", dot: "#8ec5ff", progress: "#8ec5ff" },
26  { bg: "#dcfce7", button: "#00a63e", dot: "#05df72", progress: "#05df72" },
27  { bg: "#fef9c2", button: "#fdc700", dot: "#ffdf20", progress: "#ffdf20" },
28]
29const SPRING = { stiffness: 300, damping: 30, mass: 1 }
30const COLOR = { duration: 300, easing: Easing.bezier(0.4, 0, 0.2, 1) }
31const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
32function Arrow({ direction, muted, color, onPress, reduced }: {
33  direction: "previous" | "next"
34  muted?: boolean
35  color: string
36  onPress: () => void
37  reduced: boolean
38}) {
39  const scale = useSharedValue(1)
40  const background = useSharedValue(muted ? "#d1d5dc" : color)
41  const opacity = useSharedValue(muted ? 0.5 : 1)
42  useEffect(() => {
43    background.set(withTiming(muted ? "#d1d5dc" : color, COLOR))
44    opacity.set(muted ? 0.5 : 1)
45  }, [color, muted, background, opacity])
46  const animated = useAnimatedStyle(() => ({
47    backgroundColor: background.get(), opacity: opacity.get(),
48    transform: [{ scale: scale.get() }],
49  }))
50  return <AnimatedPressable
51    accessibilityRole="button"
52    accessibilityLabel={direction === "previous" ? "Previous slide" : "Next slide"}
53    onPress={onPress}
54    onPressIn={() => scale.set(reduced ? 1 : withSpring(0.9, { stiffness: 500, damping: 25 }))}
55    onPressOut={() => scale.set(withSpring(1, { stiffness: 500, damping: 25 }))}
56    style={[{
57      width: 48, height: 48, borderRadius: 24, alignItems: "center", justifyContent: "center",
58      boxShadow: "0px 1px 3px rgba(0,0,0,0.1)",
59    }, animated]}
60  >
61    <Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
62      <Path d={direction === "previous" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6"}
63        stroke="#fff" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" />
64    </Svg>
65  </AnimatedPressable>
66}
67function Indicator({ index, expansions, active, theme, autoDelay, onPress }: {
68  index: number
69  expansions: SharedValue<number[]>
70  active: boolean
71  theme: CarouselNavigatorTheme
72  autoDelay: number
73  onPress: () => void
74}) {
75  const progress = useSharedValue(0)
76  const color = useSharedValue(active ? theme.progress : theme.dot)
77  useEffect(() => {
78    cancelAnimation(progress)
79    progress.set(0)
80    if (active) progress.set(withTiming(1, { duration: autoDelay, easing: Easing.linear }))
81    return () => cancelAnimation(progress)
82  }, [active, autoDelay, progress])
83  useEffect(() => {
84    color.set(withTiming(active ? theme.progress : theme.dot, COLOR))
85  }, [active, theme.dot, theme.progress, color])
86  const geometry = useAnimatedStyle(() => {
87    const widths = expansions.get()
88    const expansion = widths[index]
89    let preceding = 0
90    for (let i = 0; i < index; i++) preceding += widths[i]
91    return {
92      width: 12 + expansion,
93      backgroundColor: color.get(),
94      transform: [{ translateX: index * 20 + preceding }],
95    }
96  })
97  const fill = useAnimatedStyle(() => {
98    const expansion = expansions.get()[index]
99    return { width: (12 + expansion) * progress.get() }
100  })
101  return <AnimatedPressable
102    accessibilityRole="button"
103    accessibilityLabel={`Go to slide ${index + 1}`}
104    accessibilityState={{ selected: active }}
105    onPress={onPress}
106    hitSlop={{ top: 16, bottom: 16, left: 4, right: 4 }}
107    style={[{ position: "absolute", left: 8, top: 0, height: 12, borderRadius: 24 }, geometry]}
108  >
109    {active && <Animated.View pointerEvents="none" style={[{
110      position: "absolute", left: 0, top: 0, height: 12, borderRadius: 24,
111      backgroundColor: "#fff", boxShadow: "0px 0px 8px rgba(255,255,255,0.5)",
112    }, fill]} />}
113  </AnimatedPressable>
114}
115export function CarouselNavigator({
116  totalSlides = 4, autoDelay = 5000, themes = DEFAULT_THEMES,
117  currentIndex, onIndexChange, style, testID,
118}: CarouselNavigatorProps) {
119  const reduced = useReducedMotion()
120  const expansions = useSharedValue<number[]>(Array.from({ length: totalSlides }, (_, i) => i === currentIndex ? 36 : 0))
121  const theme = themes[currentIndex % themes.length] ?? DEFAULT_THEMES[0]
122  const background = useSharedValue(theme.bg)
123  useEffect(() => {
124    const target = Array.from({ length: totalSlides }, (_, i) => i === currentIndex ? 36 : 0)
125    expansions.set(reduced ? target : withSpring(target, SPRING))
126    background.set(withTiming(theme.bg, COLOR))
127  }, [currentIndex, totalSlides, reduced, theme.bg, expansions, background])
128  const surface = useAnimatedStyle(() => ({ backgroundColor: background.get() }))
129  if (totalSlides < 1) return null
130  return <Animated.View testID={testID} style={[{
131    alignSelf: "center", flexDirection: "row", alignItems: "center", justifyContent: "center",
132    gap: 4, borderRadius: 999, paddingHorizontal: 16, paddingVertical: 12,
133  }, surface, style]}>
134    <Arrow direction="previous" muted={currentIndex === 0} color={theme.button}
135      reduced={reduced} onPress={() => onIndexChange((currentIndex - 1 + totalSlides) % totalSlides)} />
136    <View style={{ width: totalSlides * 12 + 36 + Math.max(0, totalSlides - 1) * 8 + 16, height: 12 }}>
137      {Array.from({ length: totalSlides }, (_, index) => <Indicator key={index}
138        index={index} expansions={expansions} active={index === currentIndex} theme={theme}
139        autoDelay={autoDelay} onPress={() => onIndexChange(index)} />)}
140    </View>
141    <Arrow direction="next" color={theme.button} reduced={reduced}
142      onPress={() => onIndexChange((currentIndex + 1) % totalSlides)} />
143  </Animated.View>
144}
145export default CarouselNavigator