Bouncy accordion

1import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react"
2import {
3  Pressable,
4  StyleSheet,
5  Text,
6  View,
7  type StyleProp,
8  type TextStyle,
9  type ViewStyle,
10} from "react-native"
11import Animated, {
12  Easing,
13  ReduceMotion,
14  useAnimatedStyle,
15  useSharedValue,
16  withSpring,
17  withTiming,
18} from "react-native-reanimated"
19export type BouncyAccordionItem = {
20  id: string
21  title: ReactNode
22  description?: ReactNode
23  icon?: ReactNode
24  disabled?: boolean
25  accessibilityLabel?: string
26}
27export interface BouncyAccordionProps {
28  items: BouncyAccordionItem[]
29  value?: string | null
30  defaultValue?: string | null
31  onValueChange?: (value: string | null) => void
32  collapsible?: boolean
33  backgroundColor?: string
34  textColor?: string
35  mutedColor?: string
36  pressedColor?: string
37  radius?: number
38  gap?: number
39  rowHeight?: number
40  horizontalPadding?: number
41  fontSize?: number
42  lineHeight?: number
43  reduceMotion?: boolean
44  style?: StyleProp<ViewStyle>
45  titleStyle?: StyleProp<TextStyle>
46  descriptionStyle?: StyleProp<TextStyle>
47  testID?: string
48}
49const ROW = { duration: 550, dampingRatio: 0.62 }
50const OPEN = { duration: 580, dampingRatio: 0.68 }
51const CLOSE = { duration: 460, dampingRatio: 0.74 }
52const CHEVRON = { duration: 420, dampingRatio: 0.72 }
53type RowProps = Required<
54  Pick<
55    BouncyAccordionProps,
56    | "backgroundColor"
57    | "textColor"
58    | "mutedColor"
59    | "pressedColor"
60    | "radius"
61    | "gap"
62    | "rowHeight"
63    | "horizontalPadding"
64    | "fontSize"
65    | "lineHeight"
66  >
67> &
68  Pick<BouncyAccordionProps, "titleStyle" | "descriptionStyle" | "testID"> & {
69    item: BouncyAccordionItem
70    open: boolean
71    startsGroup: boolean
72    endsGroup: boolean
73    separated: boolean
74    motion: ReduceMotion
75    targetY: number
76    onContentHeight: (height: number) => void
77    onToggle: () => void
78  }
79function AccordionRow({
80  item,
81  open,
82  startsGroup,
83  endsGroup,
84  separated,
85  motion,
86  targetY,
87  onContentHeight,
88  onToggle,
89  backgroundColor,
90  textColor,
91  mutedColor,
92  pressedColor,
93  radius,
94  gap,
95  rowHeight,
96  horizontalPadding,
97  fontSize,
98  lineHeight,
99  titleStyle,
100  descriptionStyle,
101  testID,
102}: RowProps) {
103  const [contentHeight, setContentHeight] = useState(0)
104  const reveal = useSharedValue(0)
105  const opacity = useSharedValue(open ? 1 : 0)
106  const position = useSharedValue(0)
107  const previousY = useRef(targetY)
108  const topRadius = useSharedValue(startsGroup ? radius : 0)
109  const bottomRadius = useSharedValue(endsGroup ? radius : 0)
110  const rotation = useSharedValue(open ? 180 : 0)
111  useLayoutEffect(() => {
112    if (previousY.current !== targetY) {
113      position.set(position.get() + previousY.current - targetY)
114      position.set(withSpring(0, { ...ROW, reduceMotion: motion }))
115    }
116    previousY.current = targetY
117  }, [targetY, motion, position])
118  useEffect(() => {
119    reveal.set(
120      withSpring(open && item.description != null ? contentHeight : 0, {
121        ...(open ? OPEN : CLOSE),
122        reduceMotion: motion,
123      })
124    )
125    opacity.set(
126      withTiming(open ? 1 : 0, {
127        duration: 180,
128        easing: Easing.out(Easing.cubic),
129        reduceMotion: motion,
130      })
131    )
132    rotation.set(
133      withSpring(open ? 180 : 0, { ...CHEVRON, reduceMotion: motion })
134    )
135  }, [open, contentHeight, item.description, motion, reveal, opacity, rotation])
136  useEffect(() => {
137    topRadius.set(
138      withSpring(startsGroup ? radius : 0, { ...ROW, reduceMotion: motion })
139    )
140    bottomRadius.set(
141      withSpring(endsGroup ? radius : 0, { ...ROW, reduceMotion: motion })
142    )
143  }, [
144    startsGroup,
145    endsGroup,
146    radius,
147    motion,
148    topRadius,
149    bottomRadius,
150  ])
151  const positionStyle = useAnimatedStyle(() => ({
152    transform: [{ translateY: position.get() }],
153  }))
154  const cardStyle = useAnimatedStyle(() => ({
155    borderTopLeftRadius: Math.max(0, topRadius.get()),
156    borderTopRightRadius: Math.max(0, topRadius.get()),
157    borderBottomLeftRadius: Math.max(0, bottomRadius.get()),
158    borderBottomRightRadius: Math.max(0, bottomRadius.get()),
159  }))
160  const contentStyle = useAnimatedStyle(() => ({
161    height: Math.max(0, reveal.get()),
162  }))
163  const descriptionAnimation = useAnimatedStyle(() => ({
164    opacity: opacity.get(),
165  }))
166  const chevronStyle = useAnimatedStyle(() => ({
167    transform: [{ rotate: `${rotation.get()}deg` }],
168  }))
169  const isText = (node: ReactNode) =>
170    typeof node === "string" || typeof node === "number"
171  return (
172    <View
173      style={{ marginTop: separated ? gap : 0, height: Math.max(48, rowHeight) + (open && item.description != null ? contentHeight : 0) }}
174    >
175      <Animated.View
176        style={[
177          styles.card,
178          { backgroundColor, opacity: item.disabled ? 0.5 : 1 },
179          cardStyle,
180          positionStyle,
181        ]}
182      >
183        <Pressable
184          testID={testID ? `${testID}-${item.id}` : undefined}
185          accessibilityRole="button"
186          accessibilityLabel={
187            item.accessibilityLabel ??
188            (isText(item.title) ? String(item.title) : undefined)
189          }
190          accessibilityState={{ expanded: open, disabled: !!item.disabled }}
191          aria-expanded={open}
192          aria-disabled={!!item.disabled}
193          disabled={item.disabled}
194          onPress={onToggle}
195          style={({ pressed }) => [
196            styles.trigger,
197            {
198              minHeight: Math.max(48, rowHeight),
199              paddingHorizontal: horizontalPadding,
200              backgroundColor: pressed ? pressedColor : "transparent",
201            },
202          ]}
203        >
204          {item.icon != null && <View style={styles.icon}>{item.icon}</View>}
205          {isText(item.title) ? (
206            <Text
207              numberOfLines={1}
208              style={[styles.title, { color: textColor, fontSize }, titleStyle]}
209            >
210              {item.title}
211            </Text>
212          ) : (
213            <View style={styles.title}>{item.title}</View>
214          )}
215          <Animated.View
216            pointerEvents="none"
217            accessible={false}
218            style={[styles.chevronBox, chevronStyle]}
219          >
220            <View style={[styles.chevron, { borderColor: mutedColor }]} />
221          </Animated.View>
222        </Pressable>
223        <Animated.View
224          pointerEvents={open && !item.disabled ? "auto" : "none"}
225          accessibilityElementsHidden={!open}
226          aria-hidden={!open}
227          importantForAccessibility={open ? "auto" : "no-hide-descendants"}
228          style={[styles.clip, contentStyle]}
229        >
230          <Animated.View
231            onLayout={({ nativeEvent }) => {
232              const height = nativeEvent.layout.height
233              setContentHeight((previous) =>
234                Math.abs(previous - height) < 0.5 ? previous : height
235              )
236              onContentHeight(height)
237            }}
238            style={[
239              styles.description,
240              {
241                paddingHorizontal: horizontalPadding,
242                paddingBottom: horizontalPadding,
243              },
244              descriptionAnimation,
245            ]}
246          >
247            {isText(item.description) ? (
248              <Text
249                style={[
250                  { color: mutedColor, fontSize, lineHeight },
251                  descriptionStyle,
252                ]}
253              >
254                {item.description}
255              </Text>
256            ) : (
257              item.description
258            )}
259          </Animated.View>
260        </Animated.View>
261      </Animated.View>
262    </View>
263  )
264}
265export function BouncyAccordion({
266  items,
267  value,
268  defaultValue = null,
269  onValueChange,
270  collapsible = true,
271  backgroundColor = "#f4f4f5",
272  textColor = "#18181b",
273  mutedColor = "#71717a",
274  pressedColor = "rgba(0,0,0,0.035)",
275  radius = 28,
276  gap = 12,
277  rowHeight = 54,
278  horizontalPadding = 20,
279  fontSize = 15,
280  lineHeight = 24,
281  reduceMotion,
282  style,
283  titleStyle,
284  descriptionStyle,
285  testID,
286}: BouncyAccordionProps) {
287  const [internalValue, setInternalValue] = useState(defaultValue)
288  const [contentHeights, setContentHeights] = useState<Record<string, number>>({})
289  const current = value !== undefined ? value : internalValue
290  const activeIndex = items.findIndex((item) => item.id === current)
291  const motion =
292    reduceMotion === undefined
293      ? ReduceMotion.System
294      : reduceMotion
295        ? ReduceMotion.Always
296        : ReduceMotion.Never
297  const toggle = (id: string) => {
298    if (current === id && !collapsible) return
299    const next = current === id ? null : id
300    if (value === undefined) setInternalValue(next)
301    onValueChange?.(next)
302  }
303  let targetY = 0
304  return (
305    <View testID={testID} style={style}>
306      {items.map((item, index) => {
307        const open = current === item.id
308        const separated = index > 0 && (open || activeIndex === index - 1)
309        const rowY = targetY + (separated ? gap : 0)
310        targetY = rowY + Math.max(48, rowHeight) + (open ? contentHeights[item.id] ?? 0 : 0)
311        return (
312        <AccordionRow
313          key={item.id}
314          item={item}
315          open={open}
316          targetY={rowY}
317          onContentHeight={(height) => setContentHeights(previous =>
318            Math.abs((previous[item.id] ?? 0) - height) < 0.5 ? previous : { ...previous, [item.id]: height }
319          )}
320          startsGroup={
321            current === item.id || index === 0 || activeIndex === index - 1
322          }
323          endsGroup={
324            current === item.id ||
325            index === items.length - 1 ||
326            activeIndex === index + 1
327          }
328          separated={separated}
329          onToggle={() => toggle(item.id)}
330          motion={motion}
331          {...{
332            backgroundColor,
333            textColor,
334            mutedColor,
335            pressedColor,
336            radius,
337            gap,
338            rowHeight,
339            horizontalPadding,
340            fontSize,
341            lineHeight,
342            titleStyle,
343            descriptionStyle,
344            testID,
345          }}
346        />
347      )})}
348    </View>
349  )
350}
351const styles = StyleSheet.create({
352  card: { overflow: "hidden" },
353  trigger: { flexDirection: "row", alignItems: "center", gap: 16 },
354  icon: {
355    width: 28,
356    height: 28,
357    alignItems: "center",
358    justifyContent: "center",
359  },
360  title: { flex: 1, minWidth: 0, fontWeight: "500" },
361  chevronBox: {
362    width: 24,
363    height: 24,
364    alignItems: "center",
365    justifyContent: "center",
366  },
367  chevron: {
368    width: 9,
369    height: 9,
370    borderRightWidth: 1.5,
371    borderBottomWidth: 1.5,
372    transform: [{ translateY: -2 }, { rotate: "45deg" }],
373  },
374  clip: { overflow: "hidden" },
375  description: { position: "absolute", top: 0, left: 0, right: 0 },
376})