Checkbox

1import { useEffect } from "react";
2import { Text, type View } from "react-native";
3import Animated, {
4  interpolateColor,
5  useAnimatedStyle,
6  useSharedValue,
7  withTiming,
8} from "react-native-reanimated";
9import { useCSSVariable } from "uniwind";
10import { cn } from "../lib/utils";
11import { CheckIcon } from "./icons";
12import { InputPressable } from "./input";
13 
14// Constants
15const ANIMATION_DURATION = 180;
16 
17// Types
18export type CheckboxProps = Omit<
19  React.ComponentProps<typeof View>,
20  "children"
21> & {
22  checked?: boolean;
23  invalid?: boolean;
24};
25 
26export type CheckboxInputProps = Omit<
27  React.ComponentProps<typeof InputPressable>,
28  "children"
29> & {
30  checked?: boolean;
31  invalid?: boolean;
32  children: React.ReactNode;
33};
34 
35// Components
36export const Checkbox = ({
37  className,
38  checked,
39  invalid,
40  ...props
41}: CheckboxProps) => {
42  const primaryColor = useCSSVariable("--color-primary") as string;
43 
44  const checkedSharedValue = useSharedValue(checked ? 1 : 0);
45 
46  useEffect(() => {
47    checkedSharedValue.value = withTiming(checked ? 1 : 0, {
48      duration: ANIMATION_DURATION,
49    });
50  }, [checked, checkedSharedValue]);
51 
52  const animatedStyle = useAnimatedStyle(() => {
53    const backgroundColor = interpolateColor(
54      checkedSharedValue.value,
55      [0, 1],
56      ["transparent", primaryColor]
57    );
58 
59    return {
60      backgroundColor,
61    };
62  });
63 
64  return (
65    <Animated.View
66      {...props}
67      accessibilityState={{ checked }}
68      className={cn(
69        "size-6 shrink-0 items-center justify-center rounded-lg border border-input shadow-xs dark:bg-input/30",
70        checked && "border-primary",
71        invalid && "border-destructive",
72        className
73      )}
74      style={animatedStyle}
75    >
76      {checked ? (
77        <CheckIcon className="size-4 text-primary-foreground" />
78      ) : null}
79    </Animated.View>
80  );
81};
82 
83export const CheckboxInput = ({
84  className,
85  checked,
86  invalid,
87  children,
88  ...props
89}: CheckboxInputProps) => {
90  return (
91    <InputPressable {...props} className={cn(className)} invalid={invalid}>
92      <Checkbox checked={checked} invalid={invalid} />
93      <Text className="text-base text-foreground">{children}</Text>
94    </InputPressable>
95  );
96};