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>
        <RadioForm
          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}
      buttonOuterSize={80}
      buttonStyle={{}}
      buttonWrapStyle={{marginLeft: 10}}
    />
    <RadioButtonLabel
      obj={obj}
      index={i}
      labelHorizontal={true}
      onPress={onPress}
      labelStyle={{fontSize: 20, color: '#2ecc71'}}
      labelWrapStyle={{}}
    />
  </RadioButton>
</RadioForm>

Methods

updateIsActiveIndex

update active radio button

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

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

labelColor(Default: '#000')

change label color

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

formHorizontal(Default: false)

change form position

<RadioForm
  radio_props={radio_props}
  initial={0}
  formHorizontal={true}
/>

labelHorizontal(Default: true)

change label position

<RadioForm
  radio_props={radio_props}
  initial={0}
  labelHorizontal={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 to horizontal

buttonColor

The button color

labelColor

The label color

style

The label style

onPress *required

callback when radio button clicked.

RadioButtonInput

isSelected

onPress

buttonInnerColor

The button inner color

buttonOuterColor

The button inner color

buttonSize

The button size. Width and height will be same length.

buttonOuterSize

The button size of outer. Width and height will be same length.

buttonStyle

Custom button style

buttonWrapStyle

Custom style for view of button's outside

RadioButtonLabel

labelHorizontal

If you pass true, the button and label will be aligned horizontally.

labelStyle

If you pass style, you can change label text style as you want

labelWrapStyle

If you pass style, you can change label wrapper view style as you want

onPress *required

callback when radio button clicked.

Contributing

Of course! Welcome :)

You can use following command in example dir:

npm run sync

During running this command, when you change source to implement/fix something, these changes will sync to example/node_modules/react-native-simple-radio-button/. You can check your change using example project easily.

License

MIT