React Native Radio Button

Fork of: react-native-flexi-radio-button

Example Expo Snack

Installation

npm i react-native-radio-btn

or

yarn add react-native-radio-btn

Usage

import {RadioGroup, RadioButton} from 'react-native-radio-btn'

state = {
   radioItems: [
     {
       id: 1,
       label: 'Item 1',
       selected: false,
     },
     {
       id: 2,
       label: 'Item 2',
       selected: false,
     },
     {
       id: 3,
       label: 'Item 3',
       selected: false,
     },
   ],
 };

 onSelect(index, value) {
   console.log(`Selected index: ${index} , value: ${value}`);
 }

render(){
  return(
    <View style={styles.container}>

    <RadioGroup onSelect={(index, value) => this.onSelect(index, value)}>
        {this.state.radioItems.map((item, index) => {
          return (
            <RadioButton
              key={index}
              value={item.label}
              displayText={item.label}
              displayTextColor="#000"
              displayTextActiveColor="#fff"
              prefixColor="rgba(0, 0, 0, 0.4)"
              prefixActiveColor="rgba(0, 0, 0, 0.4)"
              prefixWithNumbers
            />
          );
        })}
      </RadioGroup>

    </View>
  )
}

Configuration

Radio Group:

Property	Type	Default	Description
size	number	20	Size of the radio button
thickness	number	1	width of radio button border
color	string	'#007AFF'	color of radio button
activeColor	string	null	color of radio button when selected
highlightColor	string	null	background of radio button after selected
selectedIndex	number	null	default selected index of radio group, can be changed to new value or to null for clear selection
style	object	null	Custom styles to be applied if supplied
onSelect	function(index, value)	null	function to be invoked when radio button is selected

Radio Button:

Property	Type	Default	Description
value	any	null	value will be passed on callback onSelect as second argument
style	object	null	Styles to be applied on 'RadioButton' component
color	string	same as 'RadioGroup' component	color of radio dot
disabled	bool	false	If true, disable all interactions for this component.
displayTextColor	string	'#000'	color of label text
displayTextActiveColor	string	'#fff'	color of label text when selected
prefixColor	string	'#000'	color of prefixes
prefixActiveColor	string	'#fff'	color of prefixes when selected
prefixWithAlphabet	boolean	false	prefixes label with alphabets (a,b,...z)
prefixWithNumbers	boolean	false	prefixes label with numbers (1,2...n)