​
Import

import RadioButton from '@/components/common/buttons/radio-button';

​
Props

​
selected
boolean
required
Whether the radio button is selected.
​
onSelect
() => void
required
Function to call when the radio button is pressed.
​
label
string
required
The main label text for the radio button.
​
value
string
Optional value text to display below the label.
​
description
string
Optional description text to display below the label/value.
​
color
string
default:"theme.primary"
Custom color for the radio button and selection state.
​
icon
React.ReactNode
Optional icon component to display on the right side.
​
height
number
Custom height for the radio button container.
​
accessibilityLabel
string
Accessibility label for screen readers.
​
style
StyleProp<ViewStyle>
Additional styles for the container.
​
labelStyle
StyleProp<TextStyle>
Custom styles for the label text.
​
valueStyle
StyleProp<TextStyle>
Custom styles for the value text.
​
descriptionStyle
StyleProp<TextStyle>
Custom styles for the description text.

​
Additional Props

PropTypeRequiredDefaultDescription
accessibilityLabelstringNo-Accessibility label for screen readers
styleStyleProp<ViewStyle>No-Additional styles for the container
labelStyleStyleProp<TextStyle>No-Custom styles for the label text
valueStyleStyleProp<TextStyle>No-Custom styles for the value text
descriptionStyleStyleProp<TextStyle>No-Custom styles for the description text

​
Features

  • Smooth selection animation using Reanimated
  • Support for labels, values, and descriptions
  • Custom icon support
  • Theme-aware styling
  • Accessibility support
  • Customizable colors and styles

​
Additional Examples

​
Radio Group Example

function RadioGroupExample() {
  const [selected, setSelected] = useState('option1');

  return (
    <View>
      <RadioButton
        selected={selected === 'option1'}
        onSelect={() => setSelected('option1')}
        label="Option 1"
      />
      <RadioButton
        selected={selected === 'option2'}
        onSelect={() => setSelected('option2')}
        label="Option 2"
      />
    </View>
  );
}

​
Styled Example

function StyledExample() {
  const [isSelected, setIsSelected] = useState(false);
  
  return (
    <RadioButton
      selected={isSelected}
      onSelect={() => setIsSelected(!isSelected)}
      label="Custom Style"
      color="#FF0000"
      style={{ borderColor: '#FF0000' }}
      labelStyle={{ color: '#FF0000' }}
    />
  );
}

​
Notes

  • The component uses spring animations for smooth selection transitions
  • Selection state is controlled externally through the selected prop
  • The component automatically adapts to light/dark theme modes
  • Custom colors will override theme colors when provided
  • All text elements (label, value, description) are optional