eladgel/react-native-simple-radio-button

Simple and useful animated radio button component for React Native

react-native-simple-radio-button

simple and useful radio button component for React Native

Demo

Installation

in Cli

npm i react-native-simple-radio-button

in JavaScirpt

import Radio, {RadioButton} from 'react-native-simple-radio-button'

Usage

var radio_props = [
  {label: 'param1', value: 0 },
  {label: 'param2', value: 1 }
];

var RadioButtonProject = React.createClass({
  getInitialState: function() {
    return {
      value: 0,
    }
  },
  render: function() {
    return (
        <Radio
          radio_props={radio_props}
          initial={0}
          onPress={(value) => {this.setState({value:value})}}
        />
      </View>
    );
  }
});

Simple

<Radio
  radio_props={radio_props}
  initial={0}
  onPress={(value) => {this.setState({value:value})}}
/>

Customized

<Radio
  radio_props={this.state.types}
  initial={0}
  formHorizontal={false}
  labelHorizontal={true}
  buttonColor={'#2196f3'}
  animation={true}
  onPress={(value) => {this.setState({value:value})}}
/>

More Customized

<Radio
  formHorizontal={true}
  animation={true}
>
  {this.state.types.map((obj, i) => {
    var that = this
    var is_selected = this.state.isSelected == i;
    return (
      <View style={styles.radioButtonWrap}>
        <RadioButton
          isSelected={is_selected}
          obj={obj}
          key={i}
          labelHorizontal={false}
          buttonColor={'#2196f3'}
          labelColor={'#000'}
          style={styles.radioStyle}
          onPress={(value) => {
            this.setState({value:value})
            that.setState({isSelected: i})
          }}
        />
      </View>
    )
  })}
</Radio>

Props

Radio Component

radio_props (Default: []) *required

radio button value and label array

onPress *required

callback when radio button clicked.

initial (Default: 0)

initial selected

buttonColor(Default: '#2196f3')

change radio button color

<Radio
  radio_props={radio_props}
  initial={0}
  buttonColor={'#50C900'}
/>

labelColor(Default: '#000')

change label color

<Radio
  radio_props={radio_props}
  initial={0}
  labelColor={'#50C900'}
/>

formHoriozntal(Default: false)

change form position

<Radio
  radio_props={radio_props}
  initial={0}
  formHoriozntal={true}
/>

labelHoriozntal(Default: true)

change label position

<Radio
  radio_props={radio_props}
  initial={0}
  labelHoriozntal={false}
/>

animation (Default: true)

if you pass false, animation of radio button is disabled

animation (Default: true)

if you pass false, animation of radio button is disabled

RadioButton Component

isSelected

If you pass true to this param, that button change to selected status.

labelHorizontal

change label position

buttonColor

The button color

labelColor

The label color

style

The label style

onPress *required

callback when radio button clicked.

Contributing

Of course! Welcome :)

License

MIT