{"id":40992758,"url":"https://github.com/slantz/react-native-ring-picker","last_synced_at":"2026-01-22T07:42:03.967Z","repository":{"id":48548376,"uuid":"237983223","full_name":"slantz/react-native-ring-picker","owner":"slantz","description":"This is the ring-shaped wheel navigator/selector component for react native","archived":false,"fork":false,"pushed_at":"2021-08-29T16:28:41.000Z","size":16886,"stargazers_count":41,"open_issues_count":5,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-12-25T04:10:31.191Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/slantz.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":"2020-02-03T14:22:29.000Z","updated_at":"2025-05-22T18:46:21.000Z","dependencies_parsed_at":"2022-09-16T18:40:31.482Z","dependency_job_id":null,"html_url":"https://github.com/slantz/react-native-ring-picker","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/slantz/react-native-ring-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slantz%2Freact-native-ring-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slantz%2Freact-native-ring-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slantz%2Freact-native-ring-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slantz%2Freact-native-ring-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slantz","download_url":"https://codeload.github.com/slantz/react-native-ring-picker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slantz%2Freact-native-ring-picker/sbom","scorecard":{"id":831014,"data":{"date":"2025-08-11","repo":{"name":"github.com/slantz/react-native-ring-picker","commit":"4c60c32586c9eb4c0565a19375930940c21e22c1"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/npmpublish.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Pinned-Dependencies","score":3,"reason":"dependency not pinned by hash detected -- score normalized to 3","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/slantz/react-native-ring-picker/npmpublish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/slantz/react-native-ring-picker/npmpublish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/slantz/react-native-ring-picker/npmpublish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/slantz/react-native-ring-picker/npmpublish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/slantz/react-native-ring-picker/npmpublish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/slantz/react-native-ring-picker/npmpublish.yml/master?enable=pin","Info:   0 out of   6 GitHub-owned GitHubAction dependencies pinned","Info:   3 out of   3 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: GNU General Public License v3.0: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 7 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"71 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-22h7-7wwg-qmgg","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-f5x2-xv93-4p23","Warn: Project is vulnerable to: GHSA-gmpm-xp43-f7g6","Warn: Project is vulnerable to: GHSA-pf27-929j-9pmm","Warn: Project is vulnerable to: GHSA-327c-qx3v-h673","Warn: Project is vulnerable to: GHSA-x4cf-6jr3-3qvp","Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw","Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-v8v8-6859-qxm4","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx","Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv","Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q","Warn: Project is vulnerable to: GHSA-crh6-fp67-6883","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T17:48:44.944Z","repository_id":48548376,"created_at":"2025-08-23T17:48:44.944Z","updated_at":"2025-08-23T17:48:44.944Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28658161,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T01:17:37.254Z","status":"online","status_checked_at":"2026-01-22T02:00:07.137Z","response_time":144,"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":[],"created_at":"2026-01-22T07:42:03.235Z","updated_at":"2026-01-22T07:42:03.962Z","avatar_url":"https://github.com/slantz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-ring-picker\nThis is the ring-shaped wheel navigator/selector component for react native with smooth native animations and infinite scroll.\n\n## View\n![Plugin Preview](./assets/gif/ring-picker-preview.gif)\n\n## Dependencies\nThis plugin depends on the SVG icons and main ring is an SVG icon as well, so necessary module should be installed along.\n\nInside the react native project do the following\n- `npm i react-native-ring-picker --save` install the picker element\n- `npm i react-native-svg --save` install the direct dependency of react native svg, since default icon is SVG and picker accepts the collection of SVG icons\n- `cd ios` got to iOS project folder\n    - `pod install` install native packages inside iOS project folder necessary for SVG work like  `RNSVG` from `../node_modules/react-native-svg`\n    \n## API\n\n## Usage and configuration samples\nThese are the props that are supported by the picker.\n\n| Name | Type | Default | Description |\n| --- |:---:| :---:| --- |\n| `girthAngle` | number | `120` | segment of icons spread above the ring, defines left and right visible borders to contain icons | \n| `onPress` | Function | `(iconId) =\u003e {}` | callback function that is called with clicked icon id or when ring center is clicked with id of the icon snapped to the vertical axis |\n| `iconHideOnTheBackDuration` | ms | `250` | delay in ms necessary to complete the animation of icon hiding while it moves beneath the ring to its most left or right position to make infinite scroll |\n| `icons` | React.Element, Object, string | `[{id: \"action_1\", title: \"action_1\"}, \"action_2\", \"action_3\", \"action_4\", \"action_5\"]` | collection of icons to be rendered, can be either react elements, string or objects that will render default icons |\n| `showArrowHint` | boolean | `true` | shows two-sided arrow with hint how to interact with ring, disappears on first picker integration |\n| `style` | Object | `{}` | styles of the main \u003cView/\u003e component usually used for picker positioning |\n| `styleIconText` | Object | `{}` | styles extending default icon title's text styles defined inside the picker |\n| `defaultIconColor` | rgb, rgba, hex string | `undefined` | styles for setting default icon's color |\n| `isExpDistCorrection` | boolean | `true` | exponential distance correction, if disabled icons will be homogeneously distant one from another |\n| `noExpDistCorrectionDegree` | number | `15` | half of angle, where vertical axis will be bisector and where no exponential distance correction is applied, helps visually stacking icons in the middle |\n\n### Basic default UI\n\n```jsx harmony\n\u003cReactNativeRingPicker\n    girthAngle={120}\n    iconHideOnTheBackDuration={300}\n    styleIconText={{fontWeight: 'bold'}}\n/\u003e\n```\n\nwhereas in this example 5 default icons are used from the react-native-ring-picker plugin itself.\n\n![Basic Preview](./assets/gif/ring-picker-basic-preview-black.gif)\n\n### Picker with custom icons with configurable ids and titles\n\n```jsx harmony\n\u003cReactNativeRingPicker\n    icons={[{id: \"custom_id_1\", title: \"custom title 1\"}, \u003cPaymentCard id={\"payments\"}/\u003e, \"action_3\", \u003cSearch title={\"find\"} color={\"#F88DFF\"}/\u003e, \"action_5\"]}\n    girthAngle={120}\n    iconHideOnTheBackDuration={300}\n    onPress={(iconId) =\u003e someExternalIdSelection(iconId)}\n    styleIconText={{fontWeight: \"bold\"}}\n    style={{flex: 0, marginTop: 0}}/\u003e\n/\u003e\n```\n\nwhere as in this example custom icons are sent into the picker. Picker accepts:\n- either strings, which value would be converted into ids and title\n- or objects with properties like id or title. If no id is passed - \"default\" will be used. If no title is passed id will be used.\n- or react elements, basically any element can be used but I suggest SVG ones.\n\n![Ring picker custom icons](./assets/gif/ring-picker-custom-icons.gif)\n\n### Picker with 3 custom icons and 90 girth angle.\n\n```jsx harmony\n\u003cReactNativeRingPicker\n    icons={[\u003cPaymentCard id={\"payments\"} title={\"Your payments\"}/\u003e, {\"id\": \"default\", \"title\": \"Default action\"}, \u003cSearch title={\"find\"} color={\"#F88DFF\"}/\u003e]}\n    girthAngle={90}\n    onPress={(iconId) =\u003e someExternalIdSelection(iconId)}\n    showArrowHint={false}\n/\u003e\n```\n\nwhereas in this example 3 custom icons are used:\n- \u003cPaymentCard/\u003e uses custom id and title\n- {id, title} object uses custom id and title but default icon provided by the ring picker\n- \u003cSearch/\u003e uses custom title and the component name is used as an id by default (search) \n\n![Ring picker 3 custom icons](./assets/gif/ring-picker-3-custom-icons.gif)\n\n### Exponential distance correction is disabled\n\n```jsx harmony\n\u003cReactNativeRingPicker\n    icons={[\n        \u003cPaymentCard id={\"payments\"} title={\"Your payments\"}/\u003e,\n        \u003cProfile/\u003e,\n        \u003cSearch title={\"find\"} color={\"#F88DFF\"}/\u003e,\n        \u003cFamily/\u003e,\n        \u003cHealth title={\"Activity\"}/\u003e\n    ]}\n    girthAngle={120}\n    onPress={(iconId) =\u003e setChosenId(iconId)}\n    style={{flex: 0, marginTop: 0}}\n    defaultIconColor={\"#ffccec\"}\n    isExpDistCorrection={false}\n/\u003e\n```\n\nwhere `isExpDistCorrection={false}` disables any exponential distance between icons making it homogeneous.\n\n![Ring picker is exponential distance correction](./assets/gif/ring-picker-is-exp-dist-corr.gif)\n\n### Custom angle gap to disable exponential distance correction near the vertical axis\n\n```jsx harmony\n\u003cReactNativeRingPicker\n    icons={[\n        \u003cPaymentCard id={\"payments\"} title={\"Your payments\"}/\u003e,\n        \u003cProfile/\u003e,\n        \u003cSearch title={\"find\"} color={\"#F88DFF\"}/\u003e,\n        \u003cFamily/\u003e,\n        \u003cHealth title={\"Activity\"}/\u003e\n    ]}\n    girthAngle={120}\n    onPress={(iconId) =\u003e setChosenId(iconId)}\n    style={{flex: 0, marginTop: 0}}\n    defaultIconColor={\"#ffccec\"}\n    noExpDistCorrectionDegree={5}\n/\u003e\n```\n\n![Ring picker exponential distance custom correction angle](./assets/gif/ring-picker-exp-dist-corr-angle.gif)\n\nwhere `noExpDistCorrectionDegree={5}` sets the range of 265°-275° where no exponential distance correction is applied,\nthis creates visual effect of icons stacking near the vertical axis.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslantz%2Freact-native-ring-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslantz%2Freact-native-ring-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslantz%2Freact-native-ring-picker/lists"}