{"id":4030,"url":"https://github.com/crazycodeboy/react-native-check-box","last_synced_at":"2025-06-11T22:41:47.318Z","repository":{"id":54288257,"uuid":"67280984","full_name":"crazycodeboy/react-native-check-box","owner":"crazycodeboy","description":"Checkbox component for react native, it works on iOS and Android.","archived":false,"fork":false,"pushed_at":"2023-05-01T12:57:00.000Z","size":1109,"stargazers_count":519,"open_issues_count":62,"forks_count":184,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-11-20T11:47:42.074Z","etag":null,"topics":["check-box","checkbox-component","react-native","react-native-checkbox"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/crazycodeboy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-09-03T09:01:24.000Z","updated_at":"2024-11-10T00:23:57.000Z","dependencies_parsed_at":"2024-02-01T20:08:00.077Z","dependency_job_id":"979e024b-36bf-4ba6-b3cc-c6fb5dcb73df","html_url":"https://github.com/crazycodeboy/react-native-check-box","commit_stats":{"total_commits":49,"total_committers":17,"mean_commits":"2.8823529411764706","dds":0.6326530612244898,"last_synced_commit":"a83d7290398be96de95db08fe5d00ef4f3b1725a"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crazycodeboy%2Freact-native-check-box","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crazycodeboy%2Freact-native-check-box/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crazycodeboy%2Freact-native-check-box/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crazycodeboy%2Freact-native-check-box/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crazycodeboy","download_url":"https://codeload.github.com/crazycodeboy/react-native-check-box/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229786916,"owners_count":18123998,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["check-box","checkbox-component","react-native","react-native-checkbox"],"created_at":"2024-01-05T20:16:58.979Z","updated_at":"2024-12-15T05:30:32.964Z","avatar_url":"https://github.com/crazycodeboy.png","language":"JavaScript","readme":"# react-native-check-box\n\n[ ![release](https://img.shields.io/github/release/crazycodeboy/react-native-check-box.svg?maxAge=2592000?style=flat-square)](https://github.com/crazycodeboy/react-native-check-box/releases)\n[ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/crazycodeboy/react-native-check-box/pulls)\n[ ![NPM version](http://img.shields.io/npm/v/react-native-check-box.svg?style=flat)](https://www.npmjs.com/package/react-native-check-box)\n[![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/crazycodeboy/react-native-check-box/master/LICENSE)\n\n\n\nCheckbox component for react native, it works on iOS and Android.\n\n## Content\n\n- [Installation](#installation)\n- [Demo](#demo)\n- [Getting started](#getting-started)\n- [API](#api)\n- [Contribution](#contribution)\n\n## Changes\n\nFor React Native \u003e= 0.54 use v2.1.2+, for React Native \u003c 0.4.4 use v1.0.4\n\n## Installation\n\n* 1.Run `npm i react-native-check-box --save`\n* 2.`import CheckBox from 'react-native-check-box'`    \n\n## Demo  \n* [Examples](https://github.com/crazycodeboy/react-native-check-box/tree/master/examples)\n\n![Screenshots](https://raw.githubusercontent.com/crazycodeboy/react-native-check-box/master/examples/Screenshots/react-native-check-box-screenshots.gif)\n\n## Getting started  \n\nAdd `react-native-check-box` to your js file.   \n\n`import CheckBox from 'react-native-check-box'`  \n\nInside your component's render method, use CheckBox:   \n\n```javascript\n\u003cCheckBox\n    style={{flex: 1, padding: 10}}\n    onClick={()=\u003e{\n      this.setState({\n          isChecked:!this.state.isChecked\n      })\n    }}\n    isChecked={this.state.isChecked}\n    leftText={\"CheckBox\"}\n/\u003e\n```\n\nThen you can use it like this:   \n\n\n### Basic usage  \n\n```javascript\n\u003cCheckBox\n    style={{flex: 1, padding: 10}}\n    onClick={()=\u003e{\n      this.setState({\n          isChecked:!this.state.isChecked\n      })\n    }}\n    isChecked={this.state.isChecked}\n    leftText={\"CheckBox\"}\n/\u003e\n ```\n\n### Custom CheckBox   \n\n```javascript\nrenderCheckBox(data) {\n    var leftText = data.name;\n    return (\n        \u003cCheckBox\n            style={{flex: 1, padding: 10}}\n            onClick={()=\u003e{\n                 this.setState({\n                     isChecked:!this.state.isChecked\n                 })\n               }}\n            isChecked={this.state.isChecked}\n            checkedImage={\u003cImage source={require('../../page/my/img/ic_check_box.png')} style={this.props.theme.styles.tabBarSelectedIcon}/\u003e}\n            unCheckedImage={\u003cImage source={require('../../page/my/img/ic_check_box_outline_blank.png')} style={this.props.theme.styles.tabBarSelectedIcon}/\u003e}\n        /\u003e);\n}\n```\n\n**More Usage:**    \n\n[GitHubPopular](https://github.com/crazycodeboy/GitHubPopular/blob/develop/js/page/my/CustomKeyPage.js)\n\n\n\n## API\n\n\nProps              | Type     | Optional | Default     | Description\n----------------- | -------- | -------- | ----------- | -----------\nstyle  | ViewPropTypes.style  | true |   |   Custom style checkbox\nleftText | PropTypes.string |true |   | Custom left Text\nleftTextStyle  |  Text.propTypes.style | true |  | Custom left Text style\nrightText | PropTypes.string |true |   | Custom right Text\nrightTextView | PropTypes.element | true |   | Custom right TextView\nrightTextStyle  | Text.propTypes.style | true |  | Custom right Text style\ncheckedImage  |  PropTypes.element  | true  | Default image | Custom  checked Image\nunCheckedImage  |  PropTypes.element  | true  |  Default image  | Custom  unchecked Image\nisChecked  |  PropTypes.bool |  false  |  false  | checkbox checked state\nonClick   |  PropTypes.func.isRequired |  false  |  | callback  function\ndisabled  |  PropTypes.bool            | true  |  false | Disable the checkbox button\ncheckBoxColor | PropTypes.string | true |   | Tint color of the checkbox image (this props is for both checked and unchecked state)\ncheckedCheckBoxColor | PropTypes.string | true |   | Tint color of the checked state checkbox image (this prop will override value of `checkBoxColor` for checked state)\nuncheckedCheckBoxColor | PropTypes.string | true |   | Tint color of the unchecked state checkbox image (this prop will override value of `checkBoxColor` for unchecked state)\n\n## Contribution\n\nIssues 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.\n\nPull requests are welcome. If you want to change API or making something big better to create issue and discuss it first.\n\n---\n\n**MIT Licensed**\n","funding_links":[],"categories":["Components","react-native-awesome-alert","Others","React, React Native"],"sub_categories":["UI","API","Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrazycodeboy%2Freact-native-check-box","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrazycodeboy%2Freact-native-check-box","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrazycodeboy%2Freact-native-check-box/lists"}