Collapsible

1import * as React from "react";
2import {
3  View,
4  Pressable,
5  LayoutAnimation,
6  Platform,
7  UIManager,
8} from "react-native";
9import { cn } from "@/lib/utils";
10import { Feather } from "@expo/vector-icons";
11 
12// Enable layout animation for Android
13if (Platform.OS === "android") {
14  if (UIManager.setLayoutAnimationEnabledExperimental) {
15    UIManager.setLayoutAnimationEnabledExperimental(true);
16  }
17}
18 
19interface CollapsibleContextValue {
20  open: boolean;
21  toggle: () => void;
22}
23 
24const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(
25  null
26);
27 
28interface CollapsibleProps {
29  children: React.ReactNode;
30  open?: boolean;
31  onOpenChange?: (open: boolean) => void;
32  defaultOpen?: boolean;
33  className?: string;
34  disabled?: boolean;
35}
36 
37const Collapsible = React.forwardRef<View, CollapsibleProps>(
38  (
39    {
40      children,
41      className,
42      open,
43      onOpenChange,
44      defaultOpen = false,
45      disabled = false,
46      ...props
47    },
48    ref
49  ) => {
50    const [isOpen, setIsOpen] = React.useState(
51      open !== undefined ? open : defaultOpen
52    );
53 
54    const isControlled = open !== undefined;
55    const currentOpen = isControlled ? open : isOpen;
56 
57    const toggle = React.useCallback(() => {
58      if (!disabled) {
59        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
60 
61        if (!isControlled) {
62          setIsOpen(!currentOpen);
63        }
64 
65        if (onOpenChange) {
66          onOpenChange(!currentOpen);
67        }
68      }
69    }, [currentOpen, isControlled, onOpenChange, disabled]);
70 
71    React.useEffect(() => {
72      if (isControlled) {
73        setIsOpen(open || false);
74      }
75    }, [open, isControlled]);
76 
77    return (
78      <CollapsibleContext.Provider value={{ open: currentOpen, toggle }}>
79        <View
80          ref={ref}
81          className={cn("overflow-hidden", disabled && "opacity-50", className)}
82          {...props}
83        >
84          {children}
85        </View>
86      </CollapsibleContext.Provider>
87    );
88  }
89);
90 
91Collapsible.displayName = "Collapsible";
92 
93interface CollapsibleTriggerProps {
94  children: React.ReactNode;
95  className?: string;
96  asChild?: boolean;
97  icon?: boolean;
98}
99 
100const CollapsibleTrigger = React.forwardRef<View, CollapsibleTriggerProps>(
101  ({ children, className, asChild, icon = true, ...props }, ref) => {
102    const context = React.useContext(CollapsibleContext);
103 
104    if (!context) {
105      throw new Error("CollapsibleTrigger must be used within a Collapsible");
106    }
107 
108// … truncated