yuana1 / react-native-flexi-radio-button

Simple and flexible Radio button for React Native App

React Native Flexi Radio Button

Simple and flexible Radio button for React Native App

Installation

npm i react-native-flexi-radio-button --save

Usage

###Basic Example see full basic example

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

onSelect(index, value){
  this.setState({
    text: `Selected index: ${index} , value: ${value}`
  })
}

render(){
  return(
    <View style={styles.container}>
    
      <RadioGroup
        onSelect = {(index, value) => this.onSelect(index, value)}
      >
        <RadioButton value={'item1'} >
          <Text>This is item #1</Text>
        </RadioButton>

        <RadioButton value={'item2'}>
          <Text>This is item #2</Text>
        </RadioButton>

        <RadioButton value={'item3'}>
          <Text>This is item #3</Text>
        </RadioButton>
      </RadioGroup>
      
      <Text style={styles.text}>{this.state.text}</Text>
      
    </View>
  )
}

###Custom Example see full custom example

modify in render()

<RadioGroup
  size={24}
  thickness={2}
  color='#9575b2'
  highlightColor='#ccc8b9'
  selectedIndex={1}
  onSelect = {(index, value) => this.onSelect(index, value)}
>
  <RadioButton 
    style={{alignItems:'center'}}
    value='Yo!! I am a cat.' 
  >
    <Image
      style={{width:100, height: 100}}
      source={{uri:'https://cloud.githubusercontent.com/assets/21040043/18446298/fa576974-794b-11e6-8430-b31b30846084.jpg'}}
    />
  </RadioButton>

  <RadioButton 
    value='index1'
  > 
    <Text>Start from item index #1</Text>
  </RadioButton>

  <RadioButton 
    value='red color'
    color='red'
  >
    <Text>Red Dot</Text>
  </RadioButton>

  <RadioButton 
    value='green color'
    color='green'
  >
    <Text>Green Dot</Text>
  </RadioButton>

  <RadioButton 
    value='blue color'
    color='blue'
  >
    <Text>Blue Dot</Text>
  </RadioButton>
</RadioGroup>

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	initialize selected index of radio group
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.
dotComponent	object	null	a custom dot component (a react component)