react-native-checkbox-component

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

Content

• Demo
• Installation
• Getting started
• API

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