Toggle

1import { cn } from "@/lib/utils";
2import * as React from "react";
3import { Platform, Pressable, View } from "react-native";
4 
5interface ToggleProps {
6  pressed?: boolean;
7  onPressedChange?: (pressed: boolean) => void;
8  disabled?: boolean;
9  children?: React.ReactNode;
10  className?: string;
11  variant?: "default" | "outline";
12  size?: "default" | "sm" | "lg";
13}
14 
15const Toggle = React.forwardRef<View, ToggleProps>(
16  (
17    {
18      pressed,
19      onPressedChange,
20      disabled,
21      children,
22      className,
23      variant = "default",
24      size = "default",
25      ...props
26    },
27    ref
28  ) => {
29    const [isPressed, setIsPressed] = React.useState(pressed);
30 
31    React.useEffect(() => {
32      setIsPressed(pressed);
33    }, [pressed]);
34 
35    const handlePress = () => {
36      if (disabled) return;
37      const newValue = !isPressed;
38      setIsPressed(newValue);
39      onPressedChange?.(newValue);
40    };
41 
42    const getSizeStyles = () => {
43      switch (size) {
44        case "sm":
45          return Platform.OS === "ios" ? "h-10 px-3" : "h-12 px-3";
46        case "lg":
47          return Platform.OS === "ios" ? "h-12 px-4" : "h-14 px-4";
48        default:
49          return Platform.OS === "ios" ? "h-11 px-3.5" : "h-13 px-3.5";
50      }
51    };
52 
53    const getVariantStyles = () => {
54      switch (variant) {
55        case "outline":
56          return isPressed
57            ? "border border-toggle-border bg-toggle-active/20"
58            : "border border-toggle-border bg-background/10";
59        default:
60          return isPressed
61            ? "bg-toggle-active/20"
62            : "bg-background/10";
63      }
64    };
65 
66    return (
67      <Pressable
68        ref={ref}
69        onPress={handlePress}
70        disabled={disabled}
71        className={cn(
72          "flex-row items-center justify-center rounded-lg",
73          getSizeStyles(),
74          getVariantStyles(),
75          isPressed
76            ? "text-toggle-active-foreground"
77            : "text-foreground",
78          disabled && "opacity-50 bg-muted text-muted-foreground",
79          className
80        )}
81        {...props}
82      >
83        {children}
84      </Pressable>
85    );
86  }
87);
88 
89Toggle.displayName = "Toggle";
90 
91export { Toggle };