Simple and flexible Radio button for React Native App
JavaScript
Switch branches/tags
Nothing to show
Clone or download
thegamenicorus Merge pull request #19 from JiboStore/master
React Native v15.5.0 deprecation warning fix
Latest commit e47e673 Oct 25, 2017
Permalink
Failed to load latest commit information.
examples fix package Sep 12, 2016
lib compatibility with RN 0.48.xx (react 16.xx) Sep 26, 2017
.gitignore Initial commit Sep 11, 2016
LICENSE Initial commit Sep 11, 2016
README.md Update README.md Jun 6, 2017
package.json v 0.2.1 Jun 2, 2017

README.md

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_ios basic_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_ios cusom_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:
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.