Accordion

1import type { ComponentPropsWithRef, ComponentRef, ReactNode } from "react";
2import {
3  Children,
4  createContext,
5  isValidElement,
6  useCallback,
7  useContext,
8  useEffect,
9  useId,
10  useMemo,
11  useRef,
12  useState,
13} from "react";
14import {
15  type GestureResponderEvent,
16  Pressable,
17  View,
18  type ViewProps,
19} from "react-native";
20import Animated, {
21  FadeInDown,
22  FadeOutUp,
23  LinearTransition,
24  useAnimatedStyle,
25  useSharedValue,
26  withSpring,
27} from "react-native-reanimated";
28import { cn, mergeRefs } from "@/lib/utils";
29import { ChevronDownIcon } from "./icons";
30import { Slot } from "./slot";
31 
32// Constants
33const CONTENT_ENTER = FadeInDown.springify()
34  .damping(28)
35  .stiffness(340)
36  .mass(0.55);
37const CONTENT_EXIT = FadeOutUp.duration(120).damping(32).stiffness(380);
38const ITEM_LAYOUT = LinearTransition.springify()
39  .damping(28)
40  .stiffness(340)
41  .mass(0.6);
42const ICON_SPRING = { damping: 26, mass: 0.5, stiffness: 320 };
43 
44// Types
45type AccordionType = "single" | "multiple";
46 
47type AccordionItemLayout =
48  | "open"
49  | "closed-only"
50  | "closed-start"
51  | "closed-middle"
52  | "closed-end";
53 
54const ACCORDION_ITEM_LAYOUT_CLASSNAME = {
55  "closed-end": "my-0 rounded-b-2xl",
56  "closed-middle": "my-0 rounded-none",
57  "closed-only": "my-0 rounded-2xl",
58  "closed-start": "my-0 rounded-t-2xl",
59  open: "my-2 rounded-2xl",
60} as const satisfies Record<AccordionItemLayout, string>;
61 
62const AnimatedView = Animated.createAnimatedComponent(View);
63 
64type AccordionRootContextValue = {
65  type: AccordionType;
66  collapsible: boolean;
67  itemLayouts: Record<string, AccordionItemLayout>;
68  /** single: one value; multiple: open value set */
69  isOpen: (value: string) => boolean;
70  toggle: (value: string) => void;
71};
72 
73type AccordionItemContextValue = {
74  value: string;
75  isOpen: boolean;
76  contentId: string;
77  triggerId: string;
78};
79 
80const AccordionRootContext = createContext<AccordionRootContextValue | null>(
81  null
82);
83const AccordionItemContext = createContext<AccordionItemContextValue | null>(
84  null
85);
86 
87const useAccordionRoot = () => {
88  const ctx = useContext(AccordionRootContext);
89  if (!ctx) {
90    throw new Error("Accordion components must be used within Accordion");
91  }
92  return ctx;
93};
94 
95const useAccordionItem = () => {
96  const ctx = useContext(AccordionItemContext);
97  if (!ctx) {
98    throw new Error(
99      "AccordionItem, AccordionTrigger, AccordionContent, and AccordionIndicator must be used within AccordionItem"
100    );
101  }
102  return ctx;
103};
104 
105// … truncated