react-native-custom-radio-button

Simple and animated radio button component for React Native

Demo

Installation

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

Getting started

Basic

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

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

render(){
  return(
    <View style={styles.container}>
    
      <RadioGroup
        onSelect = {(index, value) => this.onSelect(index, value)}
      >
        <RadioButton value={'React native'}>
          <Text style={styles.title}>React native</Text>
        </RadioButton>

        <RadioButton value={'Javascript'}>
          <Text style={styles.title}>Javascript</Text>
        </RadioButton>

        <RadioButton value={'Flexbox'}>
          <Text style={styles.title}>Flexbox</Text>
        </RadioButton>
      </RadioGroup>
      
      <Text style={styles.text}>{this.state.text}</Text>
      
    </View>
  )
}

Custom

   <RadioGroup
      size={24}
      thickness={2}
      selectedIndex={1}
      onSelect = {(index, value) => this.onSelect(index, value)}
    >
      <RadioButton 
        value='Red color'
        color='red'>
        <Text style={styles.title}>Red color</Text>
      </RadioButton>

      <RadioButton 
        value='Green color'
        color='green'>
        <Text style={styles.title}>Green color</Text>
      </RadioButton>

      <RadioButton 
        value='Blue color'
        color='blue'>
        <Text style={styles.title}>Blue color</Text>
      </RadioButton>
    </RadioGroup>

Configuration

Radio Group:

| Property | Type | Default | Description | |---------------|----------|-------------|----------------------------------------------------------------| | size | number | 20 | radio button size | | thickness | number | 1 | radio button border width | | color | string | '#007AFF' | radio button color | | highlightColor | string | null | selected radio button background | | selectedIndex | number | null | default selected index of radio group | | onSelect | function(index, value) | null | function to be invoked when radio button is selected |

Contributing

Of course! Welcome :)

You can use following command in example dir: