{"id":24064017,"url":"https://github.com/qeepsake/react-native-pins","last_synced_at":"2025-04-23T17:45:18.204Z","repository":{"id":38173663,"uuid":"184396341","full_name":"Qeepsake/react-native-pins","owner":"Qeepsake","description":"Pins for displaying progress (active / non-active) with animation and feedback ⚫⚫⚪⚪⚪","archived":false,"fork":false,"pushed_at":"2023-05-01T00:45:56.000Z","size":14736,"stargazers_count":7,"open_issues_count":12,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T05:57:11.076Z","etag":null,"topics":["android","code","ios","javascript","lock","number","pin","pin-code","progress-bar","react-native","screen"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Qeepsake.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2019-05-01T09:43:41.000Z","updated_at":"2024-05-10T11:15:36.000Z","dependencies_parsed_at":"2024-06-20T22:02:17.854Z","dependency_job_id":"7a6fb8ad-136a-484e-aa10-007b2f0de49d","html_url":"https://github.com/Qeepsake/react-native-pins","commit_stats":null,"previous_names":["lukebrandonfarrell/react-native-pins"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Qeepsake%2Freact-native-pins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Qeepsake%2Freact-native-pins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Qeepsake%2Freact-native-pins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Qeepsake%2Freact-native-pins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Qeepsake","download_url":"https://codeload.github.com/Qeepsake/react-native-pins/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250484178,"owners_count":21438198,"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","code","ios","javascript","lock","number","pin","pin-code","progress-bar","react-native","screen"],"created_at":"2025-01-09T10:06:12.016Z","updated_at":"2025-04-23T17:45:14.085Z","avatar_url":"https://github.com/Qeepsake.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-pins\n\n[![npm](https://img.shields.io/npm/v/react-native-pins.svg?style=flat-square)](https://www.npmjs.com/package/react-native-pins)\n[![npm licence](http://img.shields.io/npm/l/react-native-pins.svg?style=flat-square)](https://npmjs.org/package/react-native-pins)\n[![npm downloads](http://img.shields.io/npm/dt/react-native-pins.svg?style=flat-square)](https://npmjs.org/package/react-native-pins)\n\n\u003cimg align=\"left\" src=\"scrolling-pins-1.gif\" width=\"48%\" /\u003e\u003cbr /\u003e\n\u003cimg src=\"scrolling-pins.gif\" width=\"48%\" /\u003e\n\nThe pins come with a shake animation and configurable \ndevice vibration.\n\n## Install\n\nTo get started install via npm:\n```sh\n npm install react-native-pins\n```\n\n#### Usage\n\nImport:\n```js\n import { Pins } from 'react-native-pins';\n```\n\nThen add it to your code:\n```js\n\u003cPins\n    onRef={ref =\u003e (this.pins = ref)}\n    numberOfPins={5}\n    numberOfPinsActive={2}\n    numberOfPinsMaximum={2}\n    activeOnly\n/\u003e\n```\n\nThe `\u003cPins /\u003e` has a `shake()` method which can be called through a reference `this.pins.shake()`.\nThis will perform a shake animation and vibration if enabled. A callback can be passed through props which\nwill be fired when the animation is complete. See props below.\n\n#### Pins\n\n| Prop            | Type          | Optional  | Default              | Description                                                                             |\n| --------------- | ------------- | --------- | -------------------- | --------------------------------------------------------------------------------------- |\n| onRef           | any           | Yes       |                      | onRef allows you to call the `shake()` method.                                          |\n| activeOnly      | booolean      | yes       | false                | Whether to only fill the active pin or to fill all of them.                             |\n| spacing         | number        | yes       | 15                   | The space between the pins                                                              |\n| pinSize         | number        | yes       | 18                   | The size of the pins                                                                    |\n| numberOfPins    | number        | Yes       | 5                    | Number of pins to render.                                                               |\n| numberOfPinsActive | number     | Yes       | 0                    | Number of active pins. You can pass the `pin.length` here.                              |\n| vibration       | bool          | Yes       | true                 | Should vibration be enabled on shake?                                                   |\n| animationShakeCallback | func   | Yes       |                      | A callback triggered when the pin shake animation has finished.                         |\n| containerStyle  | object        | Yes       | See Pins.js          | Style applied to PINS container.                                                        |\n| pinStyle        | object        | Yes       | See Pins.js          | Style applied to each circle PIN.                                                       |\n| pinActiveStyle  | object        | Yes       | See Pins.js          | Style applied to each circle PIN when it is active.                                     |\n| numberOfPinsMaximum | number    | Yes       |                      | This property is used to set a maximum number of pins to show. If specified, then the pins will have an animation effect, as showcased in the demo above.                                                       |\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.lukebrandonfarrell.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/18139277?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLuke Brandon Farrell\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/aspect-apps/react-native-pins/commits?author=lukebrandonfarrell\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/aspect-apps/react-native-pins/commits?author=lukebrandonfarrell\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/rodriigovieira\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/7014073?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRodrigo Vieira\n    \u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/aspect-apps/react-native-pins/commits?author=rodriigovieira\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://https://github.com/Denise-Ng\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/50568634?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDenise Ng\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/aspect-apps/react-native-pins/commits?author=Denise-Ng\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n## License\n\nThis project is licensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqeepsake%2Freact-native-pins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqeepsake%2Freact-native-pins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqeepsake%2Freact-native-pins/lists"}