Accordion

1import * as React from 'react';
2import { Pressable, View, Text, LayoutAnimation, Platform, UIManager } from 'react-native';
3import { Feather } from '@expo/vector-icons';
4import { cn } from '@/lib/utils';
5 
6// Enable layout animation for Android
7if (Platform.OS === 'android') {
8  if (UIManager.setLayoutAnimationEnabledExperimental) {
9    UIManager.setLayoutAnimationEnabledExperimental(true);
10  }
11}
12 
13interface AccordionContextValue {
14  value: string[];
15  onValueChange: (itemValue: string) => void;
16  type: 'single' | 'multiple';
17}
18 
19const AccordionContext = React.createContext<AccordionContextValue | null>(null);
20 
21export interface AccordionProps {
22  type?: 'single' | 'multiple';
23  collapsible?: boolean;
24  value?: string[];
25  onValueChange?: (value: string[]) => void;
26  defaultValue?: string[];
27  className?: string;
28  children: React.ReactNode;
29}
30 
31const Accordion = ({
32  type = 'single',
33  collapsible = false,
34  value,
35  onValueChange,
36  defaultValue,
37  className,
38  children,
39}: AccordionProps) => {
40  const [state, setState] = React.useState<string[]>(value || defaultValue || []);
41 
42  const isControlled = value !== undefined;
43  const accordionValue = isControlled ? value : state;
44 
45  const handleValueChange = React.useCallback((itemValue: string) => {
46    const isSelected = accordionValue.includes(itemValue);
47 
48    let newValue: string[] = [];
49 
50    if (type === 'single') {
51      if (isSelected) {
52        newValue = collapsible ? [] : [itemValue];
53      } else {
54        newValue = [itemValue];
55      }
56    } else {
57      if (isSelected) {
58        newValue = accordionValue.filter((v) => v !== itemValue);
59      } else {
60        newValue = [...accordionValue, itemValue];
61      }
62    }
63 
64    if (!isControlled) {
65      setState(newValue);
66    }
67 
68    onValueChange?.(newValue);
69  }, [accordionValue, collapsible, isControlled, onValueChange, type]);
70 
71  return (
72    <AccordionContext.Provider value={{ value: accordionValue, onValueChange: handleValueChange, type }}>
73      <View className={cn("w-full", className)}>
74        {children}
75      </View>
76    </AccordionContext.Provider>
77  );
78};
79 
80interface AccordionItemProps {
81  value: string;
82  className?: string;
83  children: React.ReactNode;
84}
85 
86const AccordionItem = ({ value, className, children }: AccordionItemProps) => {
87  const context = React.useContext(AccordionContext);
88 
89  if (!context) {
90    throw new Error('AccordionItem must be used within an Accordion');
91  }
92 
93  const isExpanded = context.value.includes(value);
94 
95  return (
96// … truncated