Radio

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