Radio Group

1import * as React from "react"
2import { View, Text, Pressable } from "react-native"
3import { cn } from "@/lib/utils"
4 
5interface RadioGroupRootProps extends React.ComponentPropsWithoutRef<typeof View> {
6  value?: string
7  defaultValue?: string
8  onValueChange?: (value: string) => void
9  disabled?: boolean
10}
11 
12interface RadioGroupItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'children'> {
13  value: string
14  disabled?: boolean
15  id?: string
16}
17 
18interface RadioGroupLabelProps extends React.ComponentPropsWithoutRef<typeof Text> {
19  disabled?: boolean
20  htmlFor?: string
21}
22 
23const RadioGroupContext = React.createContext<{
24  value?: string
25  onValueChange?: (value: string) => void
26  disabled?: boolean
27}>({})
28 
29function RadioGroup({
30  value,
31  defaultValue,
32  onValueChange,
33  disabled = false,
34  className,
35  children,
36  ...props
37}: RadioGroupRootProps) {
38  const [innerValue, setInnerValue] = React.useState<string | undefined>(value ?? defaultValue)
39  const currentValue = value !== undefined ? value : innerValue
40 
41  const handleValueChange = React.useCallback((newValue: string) => {
42    if (disabled) return
43 
44    if (value === undefined) {
45      setInnerValue(newValue)
46    }
47 
48    onValueChange?.(newValue)
49  }, [value, onValueChange, disabled])
50 
51  return (
52    <RadioGroupContext.Provider
53      value={{ value: currentValue, onValueChange: handleValueChange, disabled }}
54    >
55      <View
56        className={cn("space-y-4", className)}
57        accessibilityRole="radiogroup"
58        {...props}
59      >
60        {children}
61      </View>
62    </RadioGroupContext.Provider>
63  )
64}
65 
66const RadioGroupItem = React.forwardRef<
67  React.ElementRef<typeof Pressable>,
68  RadioGroupItemProps
69>(({ className, value, disabled, id, ...props }, ref) => {
70  const { value: groupValue, onValueChange, disabled: groupDisabled } = React.useContext(RadioGroupContext)
71  const isDisabled = disabled || groupDisabled
72  const isChecked = value === groupValue
73 
74  const handlePress = () => {
75    if (!isDisabled) {
76      onValueChange?.(value)
77    }
78  }
79 
80  return (
81    <Pressable
82      ref={ref}
83      accessibilityRole="radio"
84      accessibilityState={{ checked: isChecked, disabled: isDisabled }}
85      onPress={handlePress}
86      disabled={isDisabled}
87      className={cn(
88        "h-6 w-6 rounded-full border-2 justify-center items-center",
89        isChecked
90          ? "border-primary bg-primary/10"
91          : "border-border bg-transparent",
92        isDisabled && "opacity-50",
93// … truncated