{"id":16579097,"url":"https://github.com/craftzdog/react-native-checkbox-reanimated","last_synced_at":"2025-04-07T13:08:48.490Z","repository":{"id":37750738,"uuid":"427864900","full_name":"craftzdog/react-native-checkbox-reanimated","owner":"craftzdog","description":"Animated checkbox built with Reanimated v2","archived":false,"fork":false,"pushed_at":"2022-11-16T01:12:44.000Z","size":797,"stargazers_count":169,"open_issues_count":5,"forks_count":26,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-31T10:06:22.446Z","etag":null,"topics":["react-native","ui"],"latest_commit_sha":null,"homepage":"https://youtu.be/k2h7usLLBhY","language":"TypeScript","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/craftzdog.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-14T07:27:55.000Z","updated_at":"2025-02-27T11:58:47.000Z","dependencies_parsed_at":"2022-07-14T00:50:41.122Z","dependency_job_id":null,"html_url":"https://github.com/craftzdog/react-native-checkbox-reanimated","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzdog%2Freact-native-checkbox-reanimated","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzdog%2Freact-native-checkbox-reanimated/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzdog%2Freact-native-checkbox-reanimated/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzdog%2Freact-native-checkbox-reanimated/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/craftzdog","download_url":"https://codeload.github.com/craftzdog/react-native-checkbox-reanimated/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247657281,"owners_count":20974345,"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":["react-native","ui"],"created_at":"2024-10-11T22:16:55.170Z","updated_at":"2025-04-07T13:08:48.467Z","avatar_url":"https://github.com/craftzdog.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-checkbox-reanimated\n\nAnimated checkbox built with Reanimated v2.\nThis component has been created for [the React Native tutorial here](https://github.com/craftzdog/react-native-animated-todo).\n\n![demo](./doc/demo.gif)\n\n## Prerequisites\n\n- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)\n- [React Native SVG](https://github.com/react-native-svg/react-native-svg)\n\n## Installation\n\n```sh\nnpm install react-native-checkbox-reanimated\nnpm install react-native-reanimated react-native-svg\n```\n\nWhen you're done installing `react-native-reanimated` don't forget to add the plugin to your `babel.config.js` file. Like so:\n```js\nmodule.exports = {\n  presets: [\n    ...\n  ],\n  plugins: [\n    ...\n    'react-native-reanimated/plugin',\n  ],\n};\n```\nmake sure the `react-native-reanimated/plugin` is added last.\n\nPlease make sure that you give the [React Native Reanimated Documentation](https://docs.swmansion.com/react-native-reanimated/) a read.\n\nPlease take note that in most cases while using this package with expo, the version of expo that you have installed will not be compatible with the latest version of the `react-native-reanimated` package and the `react-native-svg` package so if you get an error like so:\n```sh\nSome dependencies are incompatible with the installed expo package version:\n  - react-native-reanimated - expected version: ~2.9.1 - actual version installed: 2.10.0\n  - react-native-svg - expected version: 12.3.0 - actual version installed: 13.1.0\nYour project may not work correctly until you install the correct versions of the packages.\nTo install the correct versions of these packages, please run: expo doctor --fix-dependencies,\nor install individual packages by running expo install [package-name ...]\n```\nmake sure you run the recommended `expo doctor --fix-dependencies` command to fix it and clear any errors you might have while using this package.\n\n## Usage\n\n```typescript\nimport React, { useState } from 'react'\nimport { StyleSheet, View, Pressable } from 'react-native'\nimport AnimatedCheckbox from 'react-native-checkbox-reanimated'\n\nexport default function App() {\n  const [checked, setChecked] = useState\u003cboolean\u003e(false)\n\n  const handleCheckboxPress = () =\u003e {\n    setChecked(prev =\u003e {\n      return !prev\n    })\n  }\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cPressable onPress={handleCheckboxPress} style={styles.checkbox}\u003e\n        \u003cAnimatedCheckbox\n          checked={checked}\n          highlightColor=\"#4444ff\"\n          checkmarkColor=\"#ffffff\"\n          boxOutlineColor=\"#4444ff\"\n        /\u003e\n      \u003c/Pressable\u003e\n    \u003c/View\u003e\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center'\n  },\n  checkbox: {\n    width: 64,\n    height: 64\n  }\n})\n```\n\n## License\n\n[MIT](./LICENSE)\n\n---\n\nLooking for a Markdown note-taking app? Check out my app called Inkdrop:\n\n[![Inkdrop](https://github.com/craftzdog/dotfiles-public/raw/master/images/inkdrop.png)](https://www.inkdrop.app/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftzdog%2Freact-native-checkbox-reanimated","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcraftzdog%2Freact-native-checkbox-reanimated","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftzdog%2Freact-native-checkbox-reanimated/lists"}