1.0.3 • Published 6 years ago
react-native-checkbox-component v1.0.3
react-native-checkbox-component
Checkbox component for react native, it works on iOS and Android.
Content
Demo
Installation
- 1.Run
npm i react-native-checkbox-component --save - 2.
import CheckBox from 'react-native-checkbox-component'
Getting started
Add react-native-checkbox-component to your js file.
import CheckBox from 'react-native-checkbox-component'
Inside your component's render method, use CheckBox:
Basic usage
<CheckBox
style={{flex: 1, padding: 10}}
onClick={()=>this.onClick(data)}
isChecked={data.checked}
leftText={leftText}
/>;Custom CheckBox
renderCheckBox(data) {
var leftText = data.name;
return (
<CheckBox
style={{flex: 1, padding: 10}}
onClick={()=>this.onClick(data)}
isChecked={data.checked}
leftText={leftText}
checkedComponent={<Text>1</Text>}
unCheckedComponent={<Text>0</Text>}
/>);
}API
| Props | Type | Optional | Default | Description |
|---|---|---|---|---|
| style | ViewPropTypes.style | true | Custom style checkbox | |
| leftText | PropTypes.string | true | Custom left Text | |
| leftTextStyle | Text.propTypes.style | true | Custom left Text style | |
| rightText | PropTypes.string | true | Custom right Text | |
| rightTextView | PropTypes.element | true | Custom right TextView | |
| rightTextStyle | Text.propTypes.style | true | Custom right Text style | |
| checkedComponent | PropTypes.element | true | Icon | Custom checked Component |
| unCheckedComponent | PropTypes.element | true | Icon | Custom unchecked Component |
| isChecked | PropTypes.bool | false | false | checkbox checked state |
| onClick | PropTypes.func | false | callback function | |
| index | PropTypes.number | false | key to return in onClick callback | |
| disabled | PropTypes.bool | true | false | Disable the checkbox button |
| checkBoxColor | PropTypes.string | true | Tint color of the checkbox image (this props is for both checked and unchecked state) | |
| checkedCheckBoxColor | PropTypes.string | true | Tint color of the checked state checkbox image (this prop will override value of checkBoxColor for checked state) | |
| uncheckedCheckBoxColor | PropTypes.string | true | Tint color of the unchecked state checkbox image (this prop will override value of checkBoxColor for unchecked state) |
MIT Licensed