{"id":30060064,"url":"https://github.com/tiaanduplessis/react-native-modest-checkbox","last_synced_at":"2025-08-08T01:41:51.998Z","repository":{"id":37250309,"uuid":"81023304","full_name":"tiaanduplessis/react-native-modest-checkbox","owner":"tiaanduplessis","description":"A modest checkbox component for React Native ✅","archived":false,"fork":false,"pushed_at":"2019-10-01T11:00:49.000Z","size":811,"stargazers_count":54,"open_issues_count":2,"forks_count":20,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-26T06:32:33.006Z","etag":null,"topics":["checkbox","component","react-native"],"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/tiaanduplessis.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}},"created_at":"2017-02-05T21:26:04.000Z","updated_at":"2022-06-20T21:42:53.000Z","dependencies_parsed_at":"2022-09-07T17:29:11.698Z","dependency_job_id":null,"html_url":"https://github.com/tiaanduplessis/react-native-modest-checkbox","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/tiaanduplessis/react-native-modest-checkbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiaanduplessis%2Freact-native-modest-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiaanduplessis%2Freact-native-modest-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiaanduplessis%2Freact-native-modest-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiaanduplessis%2Freact-native-modest-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tiaanduplessis","download_url":"https://codeload.github.com/tiaanduplessis/react-native-modest-checkbox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiaanduplessis%2Freact-native-modest-checkbox/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269352381,"owners_count":24402671,"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","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["checkbox","component","react-native"],"created_at":"2025-08-08T01:41:39.851Z","updated_at":"2025-08-08T01:41:51.937Z","avatar_url":"https://github.com/tiaanduplessis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./media/banner.png\" alt=\"banner\" /\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eA modest checkbox component for React Native\u003c/strong\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://npmjs.org/package/react-native-modest-checkbox\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/react-native-modest-checkbox.svg?style=flat-square\" alt=\"NPM version\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://npmjs.org/package/react-native-modest-checkbox\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/react-native-modest-checkbox.svg?style=flat-square\" alt=\"Downloads\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/feross/standard\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\" alt=\"Standard\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://travis-ci.org/tiaanduplessis/react-native-modest-checkbox\"\u003e\n      \u003cimg src=\"https://img.shields.io/travis/tiaanduplessis/react-native-modest-checkbox/master.svg?style=flat-square\" alt=\"Travis Build\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/RichardLitt/standard-readme)\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square\" alt=\"Standard Readme\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://badge.fury.io/gh/tiaanduplessis%2Freact-native-modest-checkbox\"\u003e\n      \u003cimg src=\"https://badge.fury.io/gh/tiaanduplessis%2Freact-native-modest-checkbox.svg?style=flat-square\" alt=\"GitHub version\" /\u003e\n   \u003c/a\u003e\n\u003c/div\u003e\n\n\u003ch2\u003eTable of Contents\u003c/h2\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003cli\u003e\u003ca href=\"#about\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#install\"\u003eInstall\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#props\"\u003eProps\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#contribute\"\u003eContribute\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n\u003c/details\u003e\n\n## About\n\nA customizable checkbox component for React Native that supports setting a custom image or component as the checkbox. Inspired by [react-native-checkbox](https://github.com/sconxu/react-native-checkbox).\n\n## Install\n\n```sh\n$ npm install --save react-native-modest-checkbox\n```\n\n```sh\n$ yarn add react-native-modest-checkbox\n```\n\n## Usage\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./media/demo.gif\" alt=\"demo\" /\u003e\n\u003c/div\u003e\n\n```js\n// ... Imagine imports here\nimport Checkbox from 'react-native-modest-checkbox'\n\nexport default class App extends Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cCheckbox\n          label='Text for checkbox'\n          onChange={(checked) =\u003e console.log('Checked!')}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n// Imagine some amazing styles right here..\n})\n\nAppRegistry.registerComponent('App', () =\u003e App);\n\n```\n\nYou can use your own images for the checkbox states:\n\n```js\n\u003cCheckBox checkedImage={require('./path/to/image.png')} uncheckedImage={require('./path/to/otherImage.png')} /\u003e\n```\n\nIt can also be used with your own components for the checkbox states:\n\n```js\n// Using react-native-vector-icons\n\n\u003cCheckBox\n  checkedComponent={\u003cIcon name=\"hand-peace-o\" size={25} color=\"#222\" /\u003e}\n  uncheckedComponent={\u003cIcon name=\"hand-paper-o\" size={25} color=\"#222\" /\u003e}\n  label='Custom Component'\n  onChange={(checked) =\u003e console.log('Checked!')}\n/\u003e\n\n```\n\n## Props\n\n\u003ctable style=\"width:80%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003eProperty\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eDefault Value\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003echeckedComponent\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eCustom component representing the checked state\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e\u0026lt;Text\u0026gt;Checked\u0026lt;/Text\u0026gt;\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euncheckedComponent\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eCustom component representing the unchecked state\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e\u0026lt;Text\u0026gt;Unchecked\u0026lt;/Text\u0026gt;\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003echecked\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eChecked value of checkbox\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003echeckboxStyle\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eStyles applied to the checkbox\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e{ width: 30, height: 30 }\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003elabel\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eText that will be displayed next to the checkbox\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e'Label'\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ecustomLabel\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eCustomize label using React Component\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003elabelBefore\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eFlag if label should be before the checkbox\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003elabelStyle\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eStyles applied to the label\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e{fontSize: 16, color: '#222'}\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003enumberOfLabelLines\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThe number of lines over which the label will be displayed\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e1\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003econtainerStyle\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eStyles applied to the container of label \u0026 checkbox\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e{ flexDirection: 'row', alignItems: 'center'}\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003echeckedImage\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eImage representing checked state (e.g. \u003ccode\u003erequire('./path/to/image.png')\u003c/code\u003e)\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003echecked.png\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euncheckedImage\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eImage representing unchecked state (e.g. \u003ccode\u003erequire('./path/to/image.png')\u003c/code\u003e)\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eunchecked.png\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eonChange\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eCallback that will be invoked when the checked state has changed. receives a object with \u003ccode\u003ename\u003c/code\u003e \u0026 \u003ccode\u003echecked\u003c/code\u003e properties as arguments\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enone\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003enoFeedback\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eUse \u003ccode\u003eTouchableWithoutFeedback\u003c/code\u003e as container of checkbox\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Contribute\n\nContributions are welcome. Please open up an issue or create PR if you would like to help out.\n\nNote: If editing the README, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.\n\n## License\n\nLicensed under the MIT License.\n\nIcon made by \u003ca href=\"http://www.freepik.com\" title=\"Freepik\"\u003eFreepik\u003c/a\u003e from \u003ca href=\"http://www.flaticon.com\" title=\"Flaticon\"\u003ewww.flaticon.com\u003c/a\u003e is licensed by \u003ca href=\"http://creativecommons.org/licenses/by/3.0/\" title=\"Creative Commons BY 3.0\" target=\"_blank\"\u003eCC 3.0 BY\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiaanduplessis%2Freact-native-modest-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiaanduplessis%2Freact-native-modest-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiaanduplessis%2Freact-native-modest-checkbox/lists"}