1.0.1 • Published 1 year ago
react-native-radio-check v1.0.1
react-native-radio-check
- Support Android and IOS
- Similar to RadioButton and CheckBox int Android
Install
$ yarn add react-native-radio-check
or
$ npm install react-native-radio-check --save
Import
import { CheckBox, RadioButton, RadioGroup } from "react-native-radio-check"
Props
RadioButton
| Props | Type | Desc | Default |
|---|---|---|---|
| style | StyleProp | Sets the style of button. | undefined |
| icon | RadioIcon | Sets normal and checked icons. | undefined |
| iconStyle | StyleProp | Sets the style of icon . | undefined |
| text | string | Sets the text of button | undefined |
| textStyle | StyleProp | Sets the style of text | undefined |
| textCheckedStyle | StyleProp | Sets the style of text when checked. | undefined |
| id | number | Sets the id of button, this prop needs to be used with RadioGroup. | undefined |
| value | any | This prop needs to be used with RadioGroup，you can set a added value. | undefined |
| checked | boolean | Sets checked state of button. | undefined |
| disabled | boolean | if true, user not to tap the button. | undefined |
| onChecked | function | Handler to be called when changing checked state. | undefined |
RadioGroup
| Props | Type | Desc | Default |
|---|---|---|---|
| style | StyleProp | Sets the style of component. | undefined |
| icon | RadioIcon | Sets normal and checked icons of sub RadioButton. | undefined |
| iconStyle | StyleProp | Sets icon style of sub RadioButton. | undefined |
| textStyle | StyleProp | Sets text style of sub RadioButton. | undefined |
| textCheckedStyle | StyleProp | Sets text style of sub RadioButton when checked. | undefined |
| checkedId | number | Sets the id of current checked sub RadioButton. | undefined |
| onChecked | function | Handler to be called when changing checked state. | undefined |
CheckBox
Refer to RadioButton
Example
<RadioButton
icon={{
ormal: require('./icon/ic_normal.png'),
checked: require("./icon/ic_radio_check.png")
}}
textStyle={{ marginLeft: 5 }}
text="AA"
onChecked={(checked, pressed) => {
}} />
<RadioGroup
style={{ flexDirection: 'row', marginTop: 10 }}
checkedId={this.state.index}
icon={{
normal: require('./icon/ic_normal.png'),
checked: require("./icon/ic_radio_check.png")
}}
textStyle={{ marginLeft: 5 }}
onChecked={(id, value) => {
console.info("Group===", id)
console.info("Value===", value)
}}>
<RadioButton
text="AAA"
value={1} />
<RadioButton
style={{ marginLeft: 20 }}
text="BBB"
value={2} />
</RadioGroup>
<CheckBox
checked={this.state.check}
icon={{
normal: require('./icon/ic_normal.png'),
checked: require("./icon/ic_check.png")
}}
textStyle={{ marginLeft: 5 }}
text="A"
onChecked={(checked, pressed) => {
}} />