Toggle Group

1import * as React from "react";
2import { View, Pressable, Platform } from "react-native";
3import { cn } from "@/lib/utils";
4 
5interface ToggleGroupProps {
6  type?: "single" | "multiple";
7  value?: string | string[];
8  onValueChange?: (value: string | string[]) => void;
9  disabled?: boolean;
10  children?: React.ReactNode;
11  className?: string;
12  variant?: "default" | "outline";
13  size?: "default" | "sm" | "lg";
14}
15 
16interface ToggleGroupItemProps {
17  value: string;
18  disabled?: boolean;
19  children?: React.ReactNode;
20  className?: string;
21  variant?: "default" | "outline";
22  size?: "default" | "sm" | "lg";
23}
24 
25const ToggleGroupContext = React.createContext<{
26  type: "single" | "multiple";
27  value: string | string[];
28  onValueChange?: (value: string | string[]) => void;
29  disabled?: boolean;
30  variant?: "default" | "outline";
31  size?: "default" | "sm" | "lg";
32}>({
33  type: "single",
34  value: "",
35});
36 
37const ToggleGroup = React.forwardRef<View, ToggleGroupProps>(
38  (
39    {
40      type = "single",
41      value,
42      onValueChange,
43      disabled,
44      children,
45      className,
46      variant = "default",
47      size = "default",
48      ...props
49    },
50    ref
51  ) => {
52    return (
53      <ToggleGroupContext.Provider
54        value={{
55          type,
56          value: value || (type === "single" ? "" : []),
57          onValueChange,
58          disabled,
59          variant,
60          size,
61        }}
62      >
63        <View
64          ref={ref}
65          className={cn(
66            "flex-row items-center justify-center",
67            Platform.OS === "ios" ? "gap-2" : "gap-1",
68            className
69          )}
70          {...props}
71        >
72          {children}
73        </View>
74      </ToggleGroupContext.Provider>
75    );
76  }
77);
78 
79ToggleGroup.displayName = "ToggleGroup";
80 
81const ToggleGroupItem = React.forwardRef<View, ToggleGroupItemProps>(
82  ({ value, disabled, children, className, variant, size, ...props }, ref) => {
83    const context = React.useContext(ToggleGroupContext);
84    const isSelected =
85      context.type === "single"
86        ? context.value === value
87        : (context.value as string[]).includes(value);
88 
89    const handlePress = () => {
90      if (disabled || context.disabled) return;
91 
92      if (context.type === "single") {
93        context.onValueChange?.(value);
94      } else {
95        const currentValue = context.value as string[];
96        const newValue = currentValue.includes(value)
97          ? currentValue.filter((v) => v !== value)
98// … truncated