{"id":29958491,"url":"https://github.com/charanor/react-native-highlight-overlay","last_synced_at":"2025-08-03T20:46:34.724Z","repository":{"id":41153231,"uuid":"415794289","full_name":"Charanor/react-native-highlight-overlay","owner":"Charanor","description":"A tinted overlay that allows one or more elements to be highlighted (non-tinted).","archived":false,"fork":false,"pushed_at":"2022-11-06T16:41:12.000Z","size":434,"stargazers_count":43,"open_issues_count":8,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-25T21:01:27.835Z","etag":null,"topics":["fade","fade-in","fade-out","highlight","overlay","react","react-native","reanimated","reanimated2","tint","tutorial","typescript","typescript-library","walkthrough"],"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/Charanor.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-10-11T05:49:11.000Z","updated_at":"2024-12-15T15:12:21.000Z","dependencies_parsed_at":"2022-08-10T01:42:51.306Z","dependency_job_id":null,"html_url":"https://github.com/Charanor/react-native-highlight-overlay","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/Charanor/react-native-highlight-overlay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Charanor%2Freact-native-highlight-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Charanor%2Freact-native-highlight-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Charanor%2Freact-native-highlight-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Charanor%2Freact-native-highlight-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Charanor","download_url":"https://codeload.github.com/Charanor/react-native-highlight-overlay/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Charanor%2Freact-native-highlight-overlay/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268610652,"owners_count":24278150,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"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":["fade","fade-in","fade-out","highlight","overlay","react","react-native","reanimated","reanimated2","tint","tutorial","typescript","typescript-library","walkthrough"],"created_at":"2025-08-03T20:46:26.346Z","updated_at":"2025-08-03T20:46:34.689Z","avatar_url":"https://github.com/Charanor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Highlight overlay\n\nA tinted overlay that allows one or more elements to be highlighted (non-tinted). \nWorks with all types of components; native, function, class, etc.\n\nSupports switching between highlights, useful for a \"tutorial\" / \"walkththrough\" flow\nwhere you step the user through different parts of a screen. Also very useful for\nhighlighting an element when the user enters the app from a deep link.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/16232214/137453222-06d4987c-8041-4942-9c57-e85071fb3bd2.gif\" height=\"500\" /\u003e\n\u003c/p\u003e\n\n### ⚠️ Caveats ⚠️\n - If the `highlightedElementId` given to the `HighlightOverlay` does not\n   correspond to an existing `HighlightableElement`, the overlay will be shown\n   without any highlight. Might change this in the future. For now make sure\n   the id always exists.\n - In certain setups, the position of the highlighted element might be off by a\n   fraction. If this happens to you, set the `rootRef` of\n   `HighlightableElementProvider` manually to the root element of your app. \n   However in most circumstances this is not necessary.\n - If your `HighlightedElement` is inside a scroll view (like in the demo video above)\n   the `HighlightOverlay` must also be inside the scroll view, otherwise the highlighted\n   element will not properly overlay the \"root\" element. This is because of how React Native handles\n   measuring positions \u0026 sizes. I'm working on possible fixes to make this more\n   user-friendly.\n - If you want to conditionally render a `HighligtableElement`, you must instead conditionally render the contents of the element:\n   ```\n   // From:\n   {showElement \u0026\u0026 (\n     \u003cHighligtableElement\u003e\n       \u003cOtherComponent /\u003e\n     \u003c/HighligtableElement\u003e\n   )}\n   \n   // To\n   \u003cHighligtableElement\u003e\n     {showElement \u0026\u0026 (\n       \u003cOtherComponent /\u003e\n     )}\n   \u003c/HighligtableElement\u003e\n   ```\n   `HighligtableElement` is an unstyled `View`, but it is non-collapsible so it won't get optimized away. This shouldn't change how your app is displayed, except in rare circumstanses.\n\n## Installation\n\nThis package is available in the npm registry as [react-native-highlight-overlay](https://www.npmjs.com/package/react-native-highlight-overlay).\n\n```sh\n# npm\nnpm install react-native-highlight-overlay\n\n# yarn\nyarn add react-native-highlight-overlay\n```\n\n## Usage\n\n```js\nimport {\n    HighlightableElement,\n    HighlightableElementProvider,\n    HighlightOverlay,\n} from \"react-native-highlight-overlay\";\n\n// Remember to wrap the ROOT of your app in HighlightableElementProvider!\nreturn (\n    \u003cHighlightableElementProvider\u003e\n        \u003cHighlightableElement \n            id=\"important_item_1\"\n            options={{\n                // Options are useful if you want to configure the highlight, but can be left blank.\n                mode: \"rectangle\",\n                padding: 5,\n                borderRadius: 15,\n            }}\n        \u003e\n            \u003cTheRestOfTheOwl /\u003e\n        \u003c/HighlightableElement\u003e\n        \u003cHighlightableElement \n            id=\"important_item_2\"\n            options={{\n                mode: \"circle\",\n                padding: 5,\n            }}\n        \u003e\n            \u003cTheRestOfTheOwl /\u003e\n        \u003c/HighlightableElement\u003e\n\n        {/* \n          * The HighlightOverlay should be next to the ROOT of the app, \n          * since it is NOT a modal, it's just an absolutely positioned view.\n          * If you want it to be a modal, wrap it in \u003cModal\u003e yourself first,\n          * but I recommend not using modals since they can be buggy.\n          */}\n        \u003cHighlightOverlay\n            // You would usually use a state variable for this :)\n            highlightedElementId=\"important_item_1\"\n            onDismiss={() =\u003e {\n                // Called when the user clicks outside of the highlighted element.\n                // Set \"highlightedElementId\" to nullish to hide the overlay.\n            }}\n        /\u003e\n    \u003c/HighlightableElementProvider\u003e\n);\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharanor%2Freact-native-highlight-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharanor%2Freact-native-highlight-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharanor%2Freact-native-highlight-overlay/lists"}