• Stars
    star
    158
  • Rank 237,131 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated about 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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.