# react-native-checkbox-component

> Custom checkbox component for react native, it works on iOS and Android like a charm.

Latest version **1.0.3** (published 2018-06-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-checkbox-component
pnpm add react-native-checkbox-component
yarn add react-native-checkbox-component
bun add react-native-checkbox-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2018-06-27 |
| First published | 2018-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 567.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Bhavesh Goyal |
| Maintainers | bhavesh-goyal |
| Keywords | react-native, react-native-checkbox-component, react-native-custom-check-box, react-native-component, react-native-checkbox, check-box, check, box, react-component, ios, android |

## Links

- npm: https://www.npmjs.com/package/react-native-checkbox-component
- Repository: https://github.com/bgoyal2222/react-native-checkbox-component
- Issues: https://github.com/bgoyal2222/react-native-checkbox-component/issues
- npm.io page: https://npm.io/package/react-native-checkbox-component

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.7
- [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) ^4.4.2

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [post-robot](https://npm.io/package/post-robot.md) — 93.7K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads

## Recent versions

- 1.0.3 (latest) — 2018-06-27
- 1.0.2 — 2018-06-27
- 1.0.1 — 2018-06-26
- 1.0.0 — 2018-06-26

## README

# react-native-checkbox-component

[ ![release](https://img.shields.io/badge/release-v1.0.3-blue.svg?maxAge=2592000?style=flat-square)](https://github.com/bgoyal2222/react-native-checkbox-component/releases)
[ ![NPM version](https://img.shields.io/badge/npm%20package-v1.0.3-green.svg?style=flat)](https://www.npmjs.com/package/react-native-checkbox-component)
[ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/bgoyal2222/react-native-checkbox-component/pulls)
[![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://github.com/bgoyal2222/react-native-checkbox-component/blob/master/LICENSE)



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

## Content
- [Demo](#demo)
- [Installation](#installation)
- [Getting started](#getting-started)
- [API](#api)

## Demo  

![Screenshots](https://github.com/bgoyal2222/react-native-checkbox-component/blob/master/Screenshot/react-native-custom-check-box.gif)

## 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  

```javascript
<CheckBox
    style={{flex: 1, padding: 10}}
    onClick={()=>this.onClick(data)}
    isChecked={data.checked}
    leftText={leftText}
/>;
```

### Custom CheckBox   

```javascript
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**

---
_Source: https://npm.io/package/react-native-checkbox-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._