Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moschan/react-native-simple-radio-button
Simple and handy animated radio button component for React Native
https://github.com/moschan/react-native-simple-radio-button
Last synced: 3 months ago
JSON representation
Simple and handy animated radio button component for React Native
- Host: GitHub
- URL: https://github.com/moschan/react-native-simple-radio-button
- Owner: moschan
- License: mit
- Created: 2015-12-15T14:27:53.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2021-09-21T05:01:29.000Z (over 3 years ago)
- Last Synced: 2024-07-29T02:53:51.570Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 998 KB
- Stars: 450
- Watchers: 13
- Forks: 131
- Open Issues: 93
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-humanscape - react-native-simple-radio-button - 라디오버튼 컴포넌트 (React, React Native / Components)
README
# react-native-simple-radio-button
> simple and useful radio button component for React Native
[]()[]()
[](https://nodei.co/npm/react-native-simple-radio-button/)
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 (
{this.setState({value:value})}}
/>
);
}
});
```
Basic
---
```js
{this.setState({value:value})}}
/>
```
Advanced
---
```js
{this.setState({value:value})}}
/>
```
Pro
---
```js
{/* To create radio buttons, loop through your array of options */}
{
radio_props.map((obj, i) => (
{/* You can set RadioButtonLabel before RadioButtonInput */}
))
}
```
# Methods
## updateIsActiveIndex
Updating active radio button forcibly
# Props
## RadioForm Component
### radio_props (Default: `[]`) _*required_
radio button value and label array
### onPress _*required_
callback when radio button clicked.
### initial (Default: `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`
### buttonColor(Default: '#2196f3')
change radio button color
```js
```
### labelColor(Default: '#000')
change label color
```js
```
### formHorizontal(Default: false)
change form position
```js
```
### labelHorizontal(Default: true)
change label position
```js
```
### animation (Default: `true`)
if you pass false, animation of radio button is disabled
### accessible
indicates accessibility for the individual radio button input and radio button label components
### accessibilityLabel
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]
### testID
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
### isSelected
If you pass `true` to this param, that button change to selected status.
### labelHorizontal
change label position to horizontal
### buttonColor
The button color
### selectedButtonColor
The selected button color
### labelColor
The label color
### style
The label style
### wrapStyle
Styles that are applied to the wrapping the RadioButton component.
## onPress _*required_
callback when radio button clicked.
### idSeparator (Default: `|`)
separator used for extracting id from accessibilityLabel and testID
### accessible
indicates accessibility for the wrapped radio button input and radio button label components
### accessibilityLabel
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]
### testID
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
```
# 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
### accessible
indicates accessibility for the radio button input component
### accessibilityLabel
used to set accessibilityLabel (content description / label for Android) for the radio button input component
### testID
used to set testID (id / name for iOS) for the radio button input component
# 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.
### accessible
indicates accessibility for the radio button label component
### accessibilityLabel
used to set accessibilityLabel (content description / label for Android) for the radio button label component
### testID
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