Checkbox

1import { cn } from "@/lib/utils"
2import { Ionicons } from "@expo/vector-icons"
3import { useColorScheme } from "nativewind"
4import * as React from "react"
5import { Pressable, Text } from "react-native"
6 
7interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'children'> {
8  checked?: boolean
9  defaultChecked?: boolean
10  onCheckedChange?: (checked: boolean) => void
11  disabled?: boolean
12  id?: string
13}
14 
15interface CheckboxLabelProps extends React.ComponentPropsWithoutRef<typeof Text> {
16  disabled?: boolean
17  htmlFor?: string
18}
19 
20const Checkbox = React.forwardRef<
21  React.ElementRef<typeof Pressable>,
22  CheckboxProps
23>(({
24  className,
25  checked,
26  defaultChecked,
27  onCheckedChange,
28  disabled,
29  id,
30  ...props
31}, ref) => {
32  const { colorScheme } = useColorScheme()
33  const [innerChecked, setInnerChecked] = React.useState<boolean>(
34    checked !== undefined ? checked : defaultChecked || false
35  )
36  const isChecked = checked !== undefined ? checked : innerChecked
37 
38  const handlePress = React.useCallback(() => {
39    if (disabled) return
40 
41    const newValue = !isChecked
42 
43    if (checked === undefined) {
44      setInnerChecked(newValue)
45    }
46 
47    onCheckedChange?.(newValue)
48  }, [checked, isChecked, onCheckedChange, disabled])
49 
50  React.useEffect(() => {
51    if (checked !== undefined) {
52      setInnerChecked(checked)
53    }
54  }, [checked])
55 
56  return (
57    <Pressable
58      ref={ref}
59      accessibilityRole="checkbox"
60      accessibilityState={{ checked: isChecked, disabled }}
61      onPress={handlePress}
62      disabled={disabled}
63      className={cn(
64        "h-6 w-6 rounded-md border-2 justify-center items-center",
65        isChecked
66          ? "border-primary bg-primary"
67          : "border-border bg-transparent",
68        disabled && "opacity-50",
69        className
70      )}
71      accessibilityLabel={id}
72      {...props}
73    >
74      {isChecked && (
75        <Ionicons
76          name="checkmark-sharp"
77          size={18}
78          className="color-primary-foreground"
79        />
80      )}
81    </Pressable>
82  )
83})
84 
85const CheckboxLabel = React.forwardRef<
86  React.ElementRef<typeof Text>,
87  CheckboxLabelProps
88>(({ className, disabled, htmlFor, ...props }, ref) => {
89  return (
90    <Text
91      ref={ref}
92      className={cn(
93        "text-base text-foreground ml-3",
94        disabled && "text-muted-foreground",
95        className
96      )}
97      {...props}
98    />
99  )
100})
101 
102Checkbox.displayName = "Checkbox"
103CheckboxLabel.displayName = "CheckboxLabel"
104 
105// … truncated