Home

Awesome

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

basic_example_iosbasic_example_android

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

custom_ioscusom_android

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:
PropertyTypeDefaultDescription
sizenumber20Size of the radio button
thicknessnumber1width of radio button border
colorstring'#007AFF'color of radio button
activeColorstringnullcolor of radio button when selected
highlightColorstringnullbackground of radio button after selected
selectedIndexnumbernulldefault selected index of radio group, can be changed to new value or to null for clear selection
styleobjectnullCustom styles to be applied if supplied
onSelectfunction(index, value)nullfunction to be invoked when radio button is selected
Radio Button:
PropertyTypeDefaultDescription
valueanynullvalue will be passed on callback onSelect as second argument
styleobjectnullStyles to be applied on 'RadioButton' component
colorstringsame as 'RadioGroup' componentcolor of radio dot
disabledboolfalseIf true, disable all interactions for this component.