{"id":20878673,"url":"https://github.com/riamon-v/react-native-anchrable-scrollview","last_synced_at":"2026-02-06T05:31:53.276Z","repository":{"id":57335202,"uuid":"337677742","full_name":"riamon-v/react-native-anchrable-scrollview","owner":"riamon-v","description":"A simple component that allow you to put anchors inside any children of a scrollview to directly go to its position.","archived":false,"fork":false,"pushed_at":"2021-02-21T11:21:15.000Z","size":706,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-16T22:44:39.160Z","etag":null,"topics":["anchors","anchors-inside","anchorscroll","react-native","scrollview"],"latest_commit_sha":null,"homepage":"","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/riamon-v.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":"2021-02-10T09:40:58.000Z","updated_at":"2022-11-09T10:54:58.000Z","dependencies_parsed_at":"2022-08-29T21:11:16.467Z","dependency_job_id":null,"html_url":"https://github.com/riamon-v/react-native-anchrable-scrollview","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/riamon-v/react-native-anchrable-scrollview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riamon-v%2Freact-native-anchrable-scrollview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riamon-v%2Freact-native-anchrable-scrollview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riamon-v%2Freact-native-anchrable-scrollview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riamon-v%2Freact-native-anchrable-scrollview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/riamon-v","download_url":"https://codeload.github.com/riamon-v/react-native-anchrable-scrollview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riamon-v%2Freact-native-anchrable-scrollview/sbom","scorecard":{"id":774700,"data":{"date":"2025-08-11","repo":{"name":"github.com/riamon-v/react-native-anchrable-scrollview","commit":"d45f9634bc9a2d284eb1b85b080a898147649be2"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","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":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"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":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/9 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":"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":"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":"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":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"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":"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":"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: MIT License: 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":"Vulnerabilities","score":0,"reason":"41 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-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-w573-4hg7-7wgq","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-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","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-rxrc-rgv4-jpvx","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-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","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"],"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-23T03:13:56.196Z","repository_id":57335202,"created_at":"2025-08-23T03:13:56.196Z","updated_at":"2025-08-23T03:13:56.196Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29152426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T02:39:25.012Z","status":"ssl_error","status_checked_at":"2026-02-06T02:37:22.784Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["anchors","anchors-inside","anchorscroll","react-native","scrollview"],"created_at":"2024-11-18T07:13:45.263Z","updated_at":"2026-02-06T05:31:53.258Z","avatar_url":"https://github.com/riamon-v.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# react-native-anchrable-scrollview\n* * *\n\nA simple component that allow you to put anchors inside any children of a scrollview to directly go to its position.\n* Each component accepts props of the initial react-native component\n* Typescript support\n\nWorks for both **Android \u0026 IOS**\n\n\u003ch4 style=\"color: red\"\u003eNOT WORKING IN WEB\u003c/h4\u003e\n\n![](assets/Demo.gif)\n\n##[View demo on snack.expo.io](https://snack.expo.io/@riamon-v/react-native-anchrable-scrollview)\n\n## Installation\n\nIf using yarn:\n\n```shell \n$ yarn add react-native-anchrable-scrollview\n```\nIf using npm:\n\n```shell \n$ npm i react-native-anchrable-scrollview\n```\n---\n\n## List of components\n\n* `AnchrableScrollView` which is a component based on react-native Scrollview that calculates positions of Anchors inside and provide a `goToAnchor`function\n* `Anchor`which is a component base on react-native View component\n* `HeaderAnchors` which is a horizontal scrollview including buttons for each anchor inside the AnchrableScrollView\n\n---\n\n## Usage\n\n``` javascript\nimport AnchrableScrollView, { Anchor } from 'react-native-anchrable-scrollview'\n```\n\nWrap all your anchors component inside one top parent `AnchrableScrollView` component, and give a name to each anchor.\n\nThe `AnchrableScrollView` component will look for all `Anchors` components inside itself recursively. \nThen you can put an anchor whereever you want in the component tree, as long as the top parent is an `AnchrableScrollView`\n\n##### Basic Usage\n* Create a ref for the scrollView\n* Create an array of refs for the anchors\n* useCallback on the provided function goToAnchor\n\n``` js\nfunction App() {\n  // Ref of the scrollView\n  const ref = React.useRef();\n\n  //Array representing anchors\n  const anchorsRef = [\n   {name: \"#1\", label: \"My first section\", ref: React.createRef()},\n   {name: \"#2\", label: \"Second veryyyyyyyy long section\", ref: React.createRef()},\n   {name: \"#3\", label: \"Third section\", ref: React.createRef()}\n  ]\n\n  const goToAnchor = React.useCallback(name =\u003e ref.current?.goToAnchor?.(name), [ref?.current])\n\n  return (\n    \u003cView style={{marginTop: 50}}\u003e\n      \u003cButton onPress={() =\u003e goToAnchor(\"#1\")} title={anchorsRef[0].label}/\u003e\n      \u003cButton onPress={() =\u003e goToAnchor(\"#2\")} title={anchorsRef[1].label}/\u003e\n      \u003cButton onPress={() =\u003e goToAnchor(\"#3\")} title={anchorsRef[2].label}/\u003e\n      \u003cAnchrableScrollView\n        ref={ref}\n      \u003e\n        \u003cView\u003e\n         \u003cAnchor name={anchorsRef[0].name} ref={anchorsRef[0].ref} style={{height: 1000, borderWidth: 1, borderColor: 'green'}}/\u003e\n         \u003cAnchor name={anchorsRef[1].name} ref={anchorsRef[1].ref} style={{height: 1000, borderWidth: 1, borderColor: 'green'}}/\u003e\n         \u003c/View\u003e\n        \u003cAnchor name={anchorsRef[2].name} ref={anchorsRef[2].ref} style={{height: 1000, borderWidth: 1, borderColor: 'green'}}/\u003e\n      \u003c/AnchrableScrollView\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n##### Better Usage\n\n* Map throw the anchorsRef array to make section with anchors.\n* Use [`HeaderAnchors`](#HeaderAnchors) component to have as many buttons as anchors\n\n``` javascript\nimport AnchrableScrollView, { Anchor, HeaderAnchors } from 'react-native-anchrable-scrollview'\n\nfunction App() {\n  const ref = React.useRef();\n  const anchorsRef = [\n   {name: \"#1\", label: \"My first section\", ref: React.createRef()},\n   {name: \"#2\", label: \"Second veryyyyyyyy long section\", ref: React.createRef()}\n  ]\n  const anchor =  {name: \"#3\", label: \"Third section\", ref: React.createRef()}\n\n  const goToAnchor = React.useCallback(name =\u003e ref.current?.goToAnchor?.(name), [ref?.current])\n\n  return (\n    \u003cView style={{marginTop: 50}}\u003e\n    \u003cHeaderAnchors \n      anchors={[...anchorsRef, anchor]}\n      goToAnchor={goToAnchor}\n    /\u003e\n    \u003cAnchrableScrollView\n      ref={ref}\n    \u003e\n      {\n       anchorsRef.map((e, index) =\u003e (\n          \u003cView key={`${index}`}\u003e\n            \u003cAnchor \n              ref={e.ref}\n              name={e.name}\n            \u003e\n              \u003cText\u003e{e.label}\u003c/Text\u003e\n            \u003c/Anchor\u003e\n          \u003cView style={{\n            height: 700,\n            borderWidth: 1,\n            borderColor: 'red',\n            justifyContent: 'space-between'\n          }}\u003e\n            \u003cText\u003eHere I am\u003c/Text\u003e\n            \u003cText\u003eHere I am\u003c/Text\u003e\n          \u003c/View\u003e\n          \u003c/View\u003e\n        ))\n      }\n      \u003cAnchor name={anchor.name} ref={anchor.ref} style={{height: 1000, borderWidth: 1, borderColor: 'green'}}/\u003e\n    \u003c/AnchrableScrollView\u003e\n    \u003c/View\u003e\n  );\n}\n```\n---\n\n\u003c!-- ### Demo -\u003e Show me what you got\n\n[Link to your awesome Demo](#) \n\n[Another Link to your awesome Demo](#) --\u003e\n\n\n## Documentation\n\n#### AnchrableScrollView\n\n\u003e PROPS\n\n| Name | Description | Details | Type |\n|------|-------------|---------|------|\n| ref  | Ref of the container: React.useRef() | *required* | React.RefObject\u003cScrollView\u003e |\n| children | Children pass inside the scrollview | *required* | React.ReactNode |\n\n| Accepts any props of the [`ScrollView` Component](https://reactnative.dev/docs/scrollview#props) of react-native| \n|---|\n\n\u003e REF METHODS\n\n| Name | Description | Details |\n|------|-------------|---------|\n| goToAnchor  | function provided to move to a specific anchor specifying the name | **params:** anchorName |\n\n| The ref contains the reference of the actual scrollView |\n|---|\n| You can access all [method of standard ScrollView](https://reactnative.dev/docs/scrollview#methods) with \u003cbr\u003e `ref?.current?._scrollView?.current.method`|\n\n#### Anchor\n\n\u003e PROPS\n\n| Name | Description | Details | Type |\n|------|-------------|---------|------|\n| name | Name to identify the anchor | *required* | string |\n| ref  | Ref of the container: React.createRef() | *required* | React.RefObject\u003cView\u003e |\n| children | Children pass inside the view | *not required* | React.ReactNode |\n\n\n#### HeaderAnchors\n\n![](assets/HeaderComponent.gif)\n\n\u003e PROPS\n\n| Name | Description | Details | Type |\n|------|-------------|---------|------|\n| anchors | Array of anchors declared above | *required* | array |\n| goToAnchor  | callback to specify how to go to an anchor | *required* | Func |\n| tagStyle | Button container style | *optional* | any |\n| tagTextStyle | Style of the text inside a button | *optional* | any |\n\n| Accepts any props of the [`ScrollView` Component](https://reactnative.dev/docs/scrollview#props) of react-native| \n|---|\n\n#### useAnchorsMeasurements\n\nThis hook will provide you the set of measurements for Each anchors. It will return a Map with:\n* `key`: the name of the anchor\n* `value`: the measurement of that anchor (x, y, height, width)\n\n\n**Basic Usage**\n``` javascript\n    const { children } = props\n    const _scrollView = React.useRef\u003cScrollView\u003e(null)\n    const anchorsMeasurements = useAnchorsMeasurements(children, _scrollView, [])\n```\n\n\u003e PARAMS\n\n| Name | Description | Details | Type |\n|------|-------------|---------|------|\n| children | The childrens you want to look for `Anchors` | *required* | React.ReactNode |\n| parentContainer  | The very top container which is the scrollView | *required* | React.RefObject |\n| deps | dependencies to recalculates measurements when deps are changing | *optional* | any |\n\n---\n\n### Contributing\n\nPull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.\nKeep it simple. Keep it minimal. Don't put every single feature just because you can.\n\nWorking on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub\n\n---\n\n### Authors or Acknowledgments\n\n*   Vincent Riamon\n\n### License\n\nThis project is licensed under the MIT License","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friamon-v%2Freact-native-anchrable-scrollview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friamon-v%2Freact-native-anchrable-scrollview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friamon-v%2Freact-native-anchrable-scrollview/lists"}