rmariuzzo / 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 --save

Getting started

import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';


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

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

Basic

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

Advanced

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

Pro

<RadioForm
  formHorizontal={true}
  animation={true}
>
  <RadioButton labelHorizontal={true} key={i} >
    {/*  You can set RadioButtonLabel before RadioButtonInput */}
    <RadioButtonInput
      obj={obj}
      index={i}
      isSelected={this.state.value3Index === i}
      onPress={onPress}
      borderWidth={1}
      buttonInnerColor={'#e74c3c'}
      buttonOuterColor={this.state.value3Index === i ? '#2196f3' : '#000'}
      buttonSize={40}
      buttonStyle={{}}
      buttonWrapStyle={{marginLeft: 10}}
    />
    <RadioButtonLabel
      obj={obj}
      index={i}
      labelHorizontal={true}
      onPress={onPress}
      labelStyle={{fontSize: 20, color: '#2ecc71'}}
      labelWrapStyle={{}}
    />
  </RadioButton>
</RadioForm>

Props

RadioForm 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.

RadioButtonInput

isSelected

onPress

buttonInnerColor

buttonOuterColor

buttonSize

buttonStyle

buttonWrapStyle

RadioButtonLabel

labelHorizontal

labelStyle

labelWrapStyle

onPress *required

Contributing

Of course! Welcome :)

License

MIT