simple and useful animated radio button component for React Native
npm install react-native-simple-radio-button
Demo
---
!Demo
in Cli
``sh`
npm i react-native-simple-radio-button --save
`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 (
initial={0}
onPress={(value) => {this.setState({value:value})}}
/>
);
}
});
`
Basic
---
`js`
initial={0}
onPress={(value) => {this.setState({value:value})}}
/>
Advanced
---
`js`
initial={0}
formHorizontal={false}
labelHorizontal={true}
buttonColor={'#2196f3'}
animation={true}
onPress={(value) => {this.setState({value:value})}}
/>
Pro
---
`js`
animation={true}
>
{/ To create radio buttons, loop through your array of options /}
{
radio_props.map((obj, i) => (
{/ You can set RadioButtonLabel before RadioButtonInput /}
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}}
/>
index={i}
labelHorizontal={true}
onPress={onPress}
labelStyle={{fontSize: 20, color: '#2ecc71'}}
labelWrapStyle={{}}
/>
))
}
$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 componentRadioButtonLabel
$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.