rn-group-checkbox

Checkbox Group component for react native, it works on iOS and Android.

Content

Installation
Getting started
API
Contribution

Installation

1.Run npm i rn-group-checkbox --save OR yarn add rn-group-checkbox
2.import GroupCheckBox from 'rn-group-checkbox'

Getting started

Add rn-group-checkbox to your js file.

import GroupCheckBox from 'rn-group-checkbox'

Inside your component's render method, use CheckBox:

<GroupCheckBox
    onClick = {(value)=>console.log(value)}
/>

Then you can use it like this:

Custom CheckBox

<GroupCheckBox
    style={{flex: 1, padding: 10}}
    labelPosition="left"
    labelStyle={{
        color:'Orange',
        fontSize:14
    }}
    data={["one","two","three"]}
    defaultValue = {["one"]}
    onClick={(value)=>{
      console.log(value)
    }}

/>

More Usage:

GitHubPopular

API

Props	Type	Optional	Default	Description
labelPosition	PropTypes.oneOf	left/right	left	Custom style checkbox
labelStyle	PropTypes.object	\|	Custom left Text style
data	PropTypes.array.isRequired	false	["one","tow","three"]	any
checkboxCheckedStyle	PropTypes.object	true	\| Custom checkbox checked style
checkboxUnCheckedStyle	PropTypes.object	true	\| Custom checkbox unchecked style
checkedImage	Text.propTypes.style	true	\| Custom right Text style
unCheckedImage	PropTypes.element	true	Default image	Custom unchecked Image
onClick	PropTypes.func.isRequired	false	\| callback function
applyMaxCondition	PropTypes.bool	true	false	Apply limit on checkbox items for check
maxAllowToCheck	PropTypes.number	\| 1	Total number of check box allow to check apply only when applyMaxCondition true
messageForMaxLimitExceed	PropTypes.string	true	false	Show Message then max checkbox limit exceeded
maxLimitExceedAlertButtonText	PropTypes.string	true	Okay	Alert button text
otherOption	PropTypes.bool	true	true	Show other option
otherOptionLabel	PropTypes.string	true	Other	Label for other checkbox
otherInputStyle	PropTypes.object	true	\| Customize other input box

Contribution

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.

Pull requests are welcome. If you want to change API or making something big better to create issue and discuss it first.

MIT Licensed

Package detail