simple and useful radio button component for React Native
in Cli
npm i react-native-simple-radio-button --saveimport 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>
);
}
});<RadioForm
radio_props={radio_props}
initial={0}
onPress={(value) => {this.setState({value:value})}}
/><RadioForm
radio_props={this.state.types}
initial={0}
formHorizontal={false}
labelHorizontal={true}
buttonColor={'#2196f3'}
animation={true}
onPress={(value) => {this.setState({value:value})}}
/><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>update active radio button
radio button value and label array
callback when radio button clicked.
initial selected
change radio button color
<RadioForm
radio_props={radio_props}
initial={0}
buttonColor={'#50C900'}
/>
change label color
<RadioForm
radio_props={radio_props}
initial={0}
labelColor={'#50C900'}
/>change form position
<RadioForm
radio_props={radio_props}
initial={0}
formHorizontal={true}
/>
change label position
<RadioForm
radio_props={radio_props}
initial={0}
labelHorizontal={false}
/>
if you pass false, animation of radio button is disabled
if you pass false, animation of radio button is disabled
If you pass true to this param, that button change to selected status.
change label position to horizontal
The button color
The label color
The label style
callback when radio button clicked.
The button inner color
The button inner color
The button size. Width and height will be same length.
The button size of outer. Width and height will be same length.
Custom button style
Custom style for view of button's outside
If you pass true, the button and label will be aligned horizontally.
If you pass style, you can change label text style as you want
If you pass style, you can change label wrapper view style as you want
callback when radio button clicked.
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.
MIT