react-native-simple-radio-button
Advanced tools
simple and useful animated radio button component for React Native
simple and useful radio button component for React Native
in Cli
npm i react-native-simple-radio-button --save
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>
);
}
});
<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}
>
{/* To create radio buttons, loop through your array of options */}
{
radio_props.map((obj, i) => (
<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>
Updating active radio button forcibly
[]) *requiredradio button value and label array
callback when radio button clicked.
0)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
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}
/>
true)if you pass false, animation of radio button is disabled
indicates accessibility for the individual radio button input and radio button label components
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]
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]
If you pass true to this param, that button change to selected status.
change label position to horizontal
The button color
The selected button color
The label color
The label style
Styles that are applied to the wrapping the RadioButton component.
callback when radio button clicked.
|)separator used for extracting id from accessibilityLabel and testID
indicates accessibility for the wrapped radio button input and radio button label components
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]
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]
<RadioButton
accessible={true}
idSeparator=','
accessibilityLabel='noteType,1'
testID='noteType,1'
/>
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
indicates accessibility for the radio button input component
used to set accessibilityLabel (content description / label for Android) for the radio button input component
used to set testID (id / name for iOS) for the radio button input component
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.
indicates accessibility for the radio button label component
used to set accessibilityLabel (content description / label for Android) for the radio button label component
used to set testID (id / name for iOS) for the radio button label component
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
FAQs
simple and useful animated radio button component for React Native
The npm package react-native-simple-radio-button receives a total of 42,698 weekly downloads. As such, react-native-simple-radio-button popularity was classified as popular.
We found that react-native-simple-radio-button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.