An animated radio button component with support for labels, descriptions, and custom icons.

Installation

npm install react-native-reanimated @expo/vector-icons

Import

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

Props

PropTypeRequiredDefaultDescription
selectedbooleanYes-Selection state
onSelect() => voidYes-Selection handler
labelstringYes-Button label
valuestringNo-Optional value text
descriptionstringNo-Optional description
colorstringNotheme.primaryCustom color
iconReact.ReactNodeNo-Optional icon
heightnumberNo-Custom height

Examples

function Example() {
  const [selected, setSelected] = useState(false);
  
  return (
    <RadioButton
      selected={selected}
      onSelect={() => setSelected(!selected)}
      label="Choose this option"
      description="Additional details about this option"
      color="#1DB954"
    />
  );
}