{"id":28974815,"url":"https://github.com/getsettalk/react-native-advanced-checkbox","last_synced_at":"2025-06-24T12:07:06.677Z","repository":{"id":287194521,"uuid":"963842892","full_name":"getsettalk/react-native-advanced-checkbox","owner":"getsettalk","description":"A powerful, fully-featured checkbox component for React Native, built with TypeScript and designed for maximum flexibility, accessibility, and performance. Supports custom images, rich animations, grouped checkboxes, haptic feedback, and ready for the new architecture support.","archived":false,"fork":false,"pushed_at":"2025-05-13T09:10:38.000Z","size":82,"stargazers_count":11,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T20:56:27.777Z","etag":null,"topics":["android","checkbox","ios","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-advanced-checkbox","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/getsettalk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-10T09:43:44.000Z","updated_at":"2025-06-05T20:59:09.000Z","dependencies_parsed_at":"2025-04-12T03:31:26.915Z","dependency_job_id":null,"html_url":"https://github.com/getsettalk/react-native-advanced-checkbox","commit_stats":null,"previous_names":["getsettalk/react-native-advanced-checkbox"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/getsettalk/react-native-advanced-checkbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getsettalk%2Freact-native-advanced-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getsettalk%2Freact-native-advanced-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getsettalk%2Freact-native-advanced-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getsettalk%2Freact-native-advanced-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/getsettalk","download_url":"https://codeload.github.com/getsettalk/react-native-advanced-checkbox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getsettalk%2Freact-native-advanced-checkbox/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261669002,"owners_count":23192362,"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":["android","checkbox","ios","react-native"],"created_at":"2025-06-24T12:07:05.643Z","updated_at":"2025-06-24T12:07:06.627Z","avatar_url":"https://github.com/getsettalk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# 🎯 **react-native-advanced-checkbox**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/67078496-e975-45b1-8682-45c1d8a2b0c4\" alt=\"react-native-advanced-checkbox\" width=\"500\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eA versatile, customizable checkbox component for React Native\u003c/strong\u003e\u003cbr/\u003e\n  Built with TypeScript · Animations · Group Management\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://badge.fury.io/js/react-native-advanced-checkbox\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/react-native-advanced-checkbox.svg\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" alt=\"License: MIT\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"code_of_conduct.md\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg\" alt=\"Contributor Covenant\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## 🚀 Installation\n\nInstall the package via npm or Yarn:\n\n```bash\nnpm install react-native-advanced-checkbox\n# or\nyarn add react-native-advanced-checkbox\n```\n\n---\n\n## ✨ Features\n\n- ✅ **TypeScript Support**\n- 🖼️ **Custom Images** for checked/unchecked states\n- 🎨 **Color Customization** (checked / unchecked)\n- 🏷️ **Labels** with left/right positioning\n- 🧠 **Checkbox Groups** with `CheckboxGroup`\n- 🎞️ **Animations**: `bounce`, `fade`, `rotate`\n- ♿ **Accessibility**: screen reader support\n- 🧪 **Testability**: `testID` support\n- 📱 **Cross-Platform** (iOS \u0026 Android)\n- ⚛️ **New Architecture Ready** with `useNativeDriver`\n\n---\n\n## 📦 Compatibility\n\n| Package        | Version         |\n|----------------|-----------------|\n| **React Native** | `\u003e= 0.72.0` (tested up to 0.79.x) |\n| **React**        | `\u003e= 18.2.0` (tested up to 19.x)  |\n\n---\n\n## 🧑‍💻 Usage\n\n### ✅ Basic Example\n\n```tsx\nimport React, { useState } from 'react';\nimport { AdvancedCheckbox } from 'react-native-advanced-checkbox';\n\nconst App = () =\u003e {\n  const [checked, setChecked] = useState(false);\n\n  return (\n    \u003cAdvancedCheckbox\n      value={checked}\n      onValueChange={setChecked}\n      label=\"Agree to terms\"\n      checkedColor=\"#007AFF\"\n      uncheckedColor=\"#ccc\"\n      size={24}\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n---\n\n### 👥 Checkbox Group Example\n\n```tsx\nimport React, { useState } from 'react';\nimport { View } from 'react-native';\nimport { CheckboxGroup, AdvancedCheckbox } from 'react-native-advanced-checkbox';\n\nconst App = () =\u003e {\n  const [selectedValues, setSelectedValues] = useState\u003cstring[]\u003e(['option1']);\n\n  return (\n    \u003cView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}\u003e\n      \u003cCheckboxGroup onValueChange={setSelectedValues}\u003e\n        \u003cAdvancedCheckbox value=\"option1\" label=\"Option 1\" checkedColor=\"#FF6347\" /\u003e\n        \u003cAdvancedCheckbox value=\"option2\" label=\"Option 2\" checkedColor=\"#FF6347\" /\u003e\n        \u003cAdvancedCheckbox value=\"option3\" label=\"Option 3\" checkedColor=\"#FF6347\" /\u003e\n      \u003c/CheckboxGroup\u003e\n    \u003c/View\u003e\n  );\n};\n\nexport default App;\n```\n\n---\n\n### ⚙️ Advanced Customization\n\n```tsx\n\u003cAdvancedCheckbox\n  value={checked}\n  onValueChange={setChecked}\n  label=\"Custom Checkbox\"\n  labelPosition=\"left\"\n  checkedColor=\"#28a745\"\n  uncheckedColor=\"#6c757d\"\n  size={30}\n  animationType=\"rotate\"\n  checkBoxStyle={{ borderRadius: 8 }}\n  labelStyle={{ fontSize: 18, color: '#333' }}\n  testID=\"custom-checkbox\"\n  accessibilityLabel=\"Toggle custom option\"\n  accessibilityHint=\"Toggles the custom checkbox on or off\"\n/\u003e\n```\n\n---\n\n## 📋 Props\n\n### `AdvancedCheckbox`\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `value` | `boolean \\| string` | `false` | Current value |\n| `onValueChange` | `(value: boolean \\| string) =\u003e void` | - | Callback |\n| `checkedImage` / `uncheckedImage` | `ImageSourcePropType` | - | Custom images |\n| `size` | `number` | `24` | Size of checkbox |\n| `label` | `string` | - | Label text |\n| `labelPosition` | `'left' \\| 'right'` | `'right'` | Label alignment |\n| `labelStyle`, `containerStyle`, `checkBoxStyle` | `StyleProp` | - | Styling |\n| `checkedColor` / `uncheckedColor` | `string` | `#007AFF` / `#ccc` | Colors |\n| `disabled` | `boolean` | `false` | Disable checkbox |\n| `animationType` | `'bounce' \\| 'fade' \\| 'rotate'` | `'bounce'` | Animation type |\n| `checkMarkContent` | `React.ReactNode` | `✓` | Custom checkmark |\n| `testID`, `accessibilityLabel`, `accessibilityHint` | `string` | - | Test \u0026 a11y support |\n\n### `CheckboxGroup`\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `onValueChange` | `(values: string[]) =\u003e void` | - | Callback |\n| `initialValues` | `string[]` | `[]` | Initial selection |\n| `style` | `StyleProp\u003cViewStyle\u003e` | - | Group style |\n| `children` | `React.ReactNode` | - | Checkbox items |\n\n---\n\n## 🎨 Customization Tips\n\n```tsx\n// Custom images and you can call image url also here\n\u003cAdvancedCheckbox\n  checkedImage={require('./checked.png')} \n  uncheckedImage={require('./unchecked.png')}\n/\u003e\n\n// Custom colors and style\n\u003cAdvancedCheckbox\n  checkedColor=\"#FF6347\"\n  uncheckedColor=\"#6c757d\"\n  checkBoxStyle={{ borderRadius: 10, borderWidth: 2 }}\n/\u003e\n\n// Custom checkmark content\n\u003cAdvancedCheckbox\n  checkMarkContent={\u003cText style={{ color: '#fff' }}\u003e✔\u003c/Text\u003e}\n/\u003e\n```\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! Check out our [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n\n---\n\n## 📜 Code of Conduct\n\nRead our [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) to help maintain a welcoming community.\n\n---\n\n## 📄 License\n\nMIT © [Sujeet Kumar](https://github.com/getsettalk)  \nSee [LICENSE](LICENSE) for full details.\n\n---\n\n## 🛠 Support \u0026 Feedback\n\nFound a bug or have a feature request?  \nPlease open an issue on [GitHub](https://github.com/getsettalk/react-native-advanced-checkbox).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetsettalk%2Freact-native-advanced-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgetsettalk%2Freact-native-advanced-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetsettalk%2Freact-native-advanced-checkbox/lists"}