Checkbox component for react native, it works on iOS and Android.
- 1.Run
npm i react-native-checkbox-component --save - 2.
import CheckBox from 'react-native-checkbox-component'
Add react-native-checkbox-component to your js file.
import CheckBox from 'react-native-checkbox-component'
Inside your component's render method, use CheckBox:
<CheckBox style={{flex: 1, padding: 10}} onClick={()=>this.onClick(data)} isChecked={data.checked} leftText={leftText} />;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>} />); }| 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) |
https://github.com/bgoyal2222/react-native-multiselect-view
MIT Licensed