react-native-simple-radio-button

> simple and useful radio button component for React Native

![npm]()![npm]()


Demo
---

!Demo

Installation

in Cli

``sh
npm i react-native-simple-radio-button --save
`




Getting started

`js
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 (

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

);
}
});
`

Basic
---

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

Advanced
---

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

Pro
---

`js
formHorizontal={true}
animation={true}
>
{/ To create radio buttons, loop through your array of options /}
{
radio_props.map((obj, i) => (

{/ You can set RadioButtonLabel before 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}}
/>
obj={obj}
index={i}
labelHorizontal={true}
onPress={onPress}
labelStyle={{fontSize: 20, color: '#2ecc71'}}
labelWrapStyle={{}}
/>

))
}

`

Methods

updateIsActiveIndex

Updating active radio button forcibly

Props

RadioForm Component

$3

radio button value and label array

$3

callback when radio button clicked.

$3

The index of selected radio button. This is used when this component is activated. If you want to
pass initial as asynchronous, you can use updateIsActiveIndex function.
> If you want to make it empty initially, please pass -1

$3

change radio button color

`js
radio_props={radio_props}
initial={0}
buttonColor={'#50C900'}
/>
`

!Demo

$3

change label color

`js
radio_props={radio_props}
initial={0}
labelColor={'#50C900'}
/>
`




$3

change form position

`js
radio_props={radio_props}
initial={0}
formHorizontal={true}
/>
`

!Demo




$3

change label position

`js
radio_props={radio_props}
initial={0}
labelHorizontal={false}
/>
`

!Demo

$3

if you pass false, animation of radio button is disabled

!Demo

$3

indicates accessibility for the individual radio button input and radio button label components

$3

used to set accessibilityLabel for individual radio button input and radio button label components,
radio button input will have accessibilityLabel = [accessibilityLabel]Input[index]
radio button label will have accessibilityLabel = [accessibilityLabel]Label[index]

$3

used to set testID for individual radio button input and radio button label components,
radio button input will have testID = [testID]Input[index]
radio button label will have testID = [testID]Label[index]

RadioButton Component

$3

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

$3

change label position to horizontal

$3

The button color

$3

The selected button color

$3

The label color

$3

The label style

$3

Styles that are applied to the wrapping the RadioButton component.

onPress _*required_

callback when radio button clicked.

$3

separator used for extracting id from accessibilityLabel and testID

$3

indicates accessibility for the wrapped radio button input and radio button label components

$3

used to set accessibilityLabel for the wrapped radio button input and radio button label components, needs to be of the format [accessibilityLabel][separator][id]
radio button input will have accessibilityLabel = [accessibilityLabel]Input[index]
radio button label will have accessibilityLabel = [accessibilityLabel]Label[index]

$3

used to set testID for individual radio button input and radio button label components, needs to be of the format [testID][separator][id]
radio button input will have testID = [testID]Input[index]
radio button label will have testID = [testID]Label[index]

`js
accessible={true}
idSeparator=','
accessibilityLabel='noteType,1'
testID='noteType,1'
/>
`

RadioButtonInput

$3

$3

$3

The button inner color

$3

The button inner color

$3

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

$3

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

$3

Custom button style

$3

Custom style for view of button's outside

$3

indicates accessibility for the radio button input component

$3

used to set accessibilityLabel (content description / label for Android) for the radio button input component

$3

used to set testID (id / name for iOS) for the radio button input component

RadioButtonLabel

$3

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

$3

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

$3

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

$3

callback when radio button clicked.

$3

indicates accessibility for the radio button label component

$3

used to set accessibilityLabel (content description / label for Android) for the radio button label component

$3

used to set testID (id / name for iOS) for the radio button label component

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