Bounce Sidebar

1import React, { useEffect, useRef, useState } from "react"
2import { Linking, Platform, Pressable, Text, View } from "react-native"
3import Animated, {
4  useAnimatedStyle,
5  useReducedMotion,
6  useSharedValue,
7  withSpring,
8} from "react-native-reanimated"
9export interface BounceSidebarItem {
10  id: string
11  label: React.ReactNode
12  icon?: React.ReactNode
13  href?: string
14  disabled?: boolean
15}
16export interface BounceSidebarProps {
17  items: BounceSidebarItem[]
18  value?: string
19  defaultValue?: string
20  onValueChange?: (value: string) => void
21  backgroundColor?: string
22  textColor?: string
23  mutedColor?: string
24  indicatorColor?: string
25  rowHeight?: number
26  fontSize?: number
27  ariaLabel?: string
28  testID?: string
29}
30export function BounceSidebar({
31  items,
32  value,
33  defaultValue,
34  onValueChange,
35  backgroundColor = "transparent",
36  textColor = "#f1f1f1",
37  mutedColor = "#868686",
38  indicatorColor = "#0285f7",
39  rowHeight = 36,
40  fontSize = 14,
41  ariaLabel = "Navigation",
42  testID,
43}: BounceSidebarProps) {
44  const [local, setLocal] = useState(defaultValue ?? items[0]?.id)
45  const selected = value ?? local
46  const reduced = useReducedMotion()
47  const centers = useRef<Record<string, number>>({})
48  const from = useSharedValue(0),
49    to = useSharedValue(0),
50    control = useSharedValue(0),
51    travel = useSharedValue(1)
52  const [measured, setMeasured] = useState(0)
53  useEffect(() => {
54    const next = centers.current[selected ?? ""]
55    if (next === undefined) return
56    const p = travel.value
57    from.value = (1-p)*(1-p)*from.value + 2*(1-p)*p*control.value + p*p*to.value
58    to.value = next
59    const jump = Math.min(1, Math.max(0, (Math.abs(next-from.value)-48)/120))
60    control.value = next + ((from.value+next)/2-next)*jump
61    travel.value = 0
62    travel.value = reduced
63      ? 1
64      : withSpring(1, { stiffness: 280-60*jump, damping: 18+jump, mass: 0.3+0.15*jump })
65  }, [selected, measured, reduced, from, to, travel])
66  const dot = useAnimatedStyle(() => {
67    const p = travel.value,
68      distance = Math.abs(to.value - from.value)
69    return {
70      transform: [
71        { translateY: (1-p)*(1-p)*from.value + 2*(1-p)*p*control.value + p*p*to.value - 3 },
72        { translateX: -2 * Math.min(40, Math.max(8, distance * 0.25)) * p * (1 - p) },
73      ],
74    }
75  })
76  return (
77    <View
78      testID={testID}
79      accessibilityLabel={ariaLabel}
80      style={{
81        paddingLeft: 24,
82        borderRadius: 20,
83        backgroundColor,
84      }}
85    >
86      <Animated.View
87        pointerEvents="none"
88        style={[
89          {
90            position: "absolute",
91            left: 12,
92            top: 0,
93            width: 6,
94            height: 6,
95            borderRadius: 3,
96            backgroundColor: indicatorColor,
97          },
98          dot,
99        ]}
100      />
101      {items.map((item, index) => (
102        <Pressable
103          key={item.id}
104          disabled={item.disabled}
105          accessibilityRole={item.href ? "link" : "button"}
106          accessibilityState={{
107            selected: selected === item.id,
108            disabled: item.disabled,
109          }}
110          onLayout={({ nativeEvent: { layout } }) => {
111            centers.current[item.id] = layout.y + layout.height / 2
112            setMeasured((n) => n + 1)
113          }}
114          onPress={() => {
115            if (value === undefined) setLocal(item.id)
116            onValueChange?.(item.id)
117            if (item.href) void Linking.openURL(item.href)
118          }}
119          style={({ pressed }) => ({
120            minHeight: rowHeight,
121            marginBottom: index === items.length-1 ? 0 : 6,
122            paddingHorizontal: 8,
123            flexDirection: "row",
124            alignItems: "center",
125            gap: 8,
126            opacity: item.disabled ? 0.35 : pressed ? 0.7 : 1,
127          })}
128        >
129          {item.icon}
130          <Text
131            style={{
132              fontSize,
133              fontWeight: "500",
134              fontFamily: Platform.OS === "web" ? '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif' : undefined,
135              color: selected === item.id ? textColor : mutedColor,
136            }}
137          >
138            {item.label}
139          </Text>
140        </Pressable>
141      ))}
142    </View>
143  )
144}