|
1 | 1 | # react-native-check-box |
2 | 2 | Checkbox component for react native, it works on iOS and Android. |
| 3 | + |
| 4 | +## Content |
| 5 | + |
| 6 | +- [Installation](#installation) |
| 7 | +- [Demo](#demo) |
| 8 | +- [Getting started](#getting-started) |
| 9 | +- [API](#api) |
| 10 | +- [Contribution](#contribution) |
| 11 | + |
| 12 | +## Installation |
| 13 | + |
| 14 | +* 1.Run `npm i react-native-check-box --save` |
| 15 | +* 2.`import Toast, {DURATION} from 'react-native-check-box'` |
| 16 | + |
| 17 | +## Demo |
| 18 | +* [Examples](https://github.com/crazycodeboy/react-native-check-box/tree/master/examples) |
| 19 | + |
| 20 | + |
| 21 | + |
| 22 | +## Getting started |
| 23 | + |
| 24 | +Add `react-native-check-box` to your js file. |
| 25 | + |
| 26 | +`import CheckBox from 'react-native-check-box'` |
| 27 | + |
| 28 | +Inside your component's render method, use CheckBox: |
| 29 | + |
| 30 | +```javascript |
| 31 | +<CheckBox |
| 32 | + style={{flex: 1, padding: 10}} |
| 33 | + onClick={()=>this.onClick(data)} |
| 34 | + isChecked={data.checked} |
| 35 | + leftText={leftText} |
| 36 | +/>; |
| 37 | +``` |
| 38 | + |
| 39 | +Then you can use it like this: |
| 40 | + |
| 41 | + |
| 42 | +### Basic usage |
| 43 | + |
| 44 | +````javascript |
| 45 | + <CheckBox |
| 46 | + style={{flex: 1, padding: 10}} |
| 47 | + onClick={()=>this.onClick(data)} |
| 48 | + isChecked={data.checked} |
| 49 | + leftText={leftText} |
| 50 | + />; |
| 51 | + ``` |
| 52 | + |
| 53 | +### Custom CheckBox |
| 54 | + |
| 55 | +```javascript |
| 56 | +renderCheckBox(data) { |
| 57 | + var leftText = data.name; |
| 58 | + return ( |
| 59 | + <CheckBox |
| 60 | + style={{flex: 1, padding: 10}} |
| 61 | + onClick={()=>this.onClick(data)} |
| 62 | + isChecked={data.checked} |
| 63 | + leftText={leftText} |
| 64 | + checkedImage={<Image source={require('../../page/my/img/ic_check_box.png')} style={this.props.theme.styles.tabBarSelectedIcon}/>} |
| 65 | + unCheckedImage={<Image source={require('../../page/my/img/ic_check_box_outline_blank.png')} style={this.props.theme.styles.tabBarSelectedIcon}/>} |
| 66 | + />); |
| 67 | +} |
| 68 | +``` |
| 69 | + |
| 70 | +**More Usage:** |
| 71 | + |
| 72 | +[GitHubPopular](https://github.com/crazycodeboy/GitHubPopular/blob/develop/js/page/my/CustomKeyPage.js) |
| 73 | + |
| 74 | + |
| 75 | + |
| 76 | +## API |
| 77 | + |
| 78 | + |
| 79 | +Props | Type | Optional | Default | Description |
| 80 | +----------------- | -------- | -------- | ----------- | ----------- |
| 81 | +style | View.propTypes.style | true | | Custom style checkbox |
| 82 | +leftText | React.PropTypes.string |true | | Custom left Text |
| 83 | +checkedImage | React.PropTypes.element | Default image | true | Custom checked Image |
| 84 | +unCheckedImage | React.PropTypes.element | Default image | true | Custom unchecked Image |
| 85 | +isChecked | React.PropTypes.bool | true | false | Initialization checkbox checked |
| 86 | + |
| 87 | + |
| 88 | +## Contribution |
| 89 | + |
| 90 | +Issues are welcome. Please add a screenshot of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples. |
| 91 | + |
| 92 | +Pull requests are welcome. If you want to change API or making something big better to create issue and discuss it first. |
| 93 | + |
| 94 | +--- |
| 95 | + |
| 96 | +**MIT Licensed** |
0 commit comments