https://github.com/charanor/react-native-highlight-overlay
A tinted overlay that allows one or more elements to be highlighted (non-tinted).
https://github.com/charanor/react-native-highlight-overlay
fade fade-in fade-out highlight overlay react react-native reanimated reanimated2 tint tutorial typescript typescript-library walkthrough
Last synced: 2 months ago
JSON representation
A tinted overlay that allows one or more elements to be highlighted (non-tinted).
- Host: GitHub
- URL: https://github.com/charanor/react-native-highlight-overlay
- Owner: Charanor
- License: mit
- Created: 2021-10-11T05:49:11.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-06T16:41:12.000Z (almost 3 years ago)
- Last Synced: 2025-07-25T21:01:27.835Z (3 months ago)
- Topics: fade, fade-in, fade-out, highlight, overlay, react, react-native, reanimated, reanimated2, tint, tutorial, typescript, typescript-library, walkthrough
- Language: TypeScript
- Homepage:
- Size: 424 KB
- Stars: 43
- Watchers: 1
- Forks: 6
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Highlight overlay
A tinted overlay that allows one or more elements to be highlighted (non-tinted).
Works with all types of components; native, function, class, etc.
Supports switching between highlights, useful for a "tutorial" / "walkththrough" flow
where you step the user through different parts of a screen. Also very useful for
highlighting an element when the user enters the app from a deep link.
### ⚠️ Caveats ⚠️
- If the `highlightedElementId` given to the `HighlightOverlay` does not
correspond to an existing `HighlightableElement`, the overlay will be shown
without any highlight. Might change this in the future. For now make sure
the id always exists.
- In certain setups, the position of the highlighted element might be off by a
fraction. If this happens to you, set the `rootRef` of
`HighlightableElementProvider` manually to the root element of your app.
However in most circumstances this is not necessary.
- If your `HighlightedElement` is inside a scroll view (like in the demo video above)
the `HighlightOverlay` must also be inside the scroll view, otherwise the highlighted
element will not properly overlay the "root" element. This is because of how React Native handles
measuring positions & sizes. I'm working on possible fixes to make this more
user-friendly.
- If you want to conditionally render a `HighligtableElement`, you must instead conditionally render the contents of the element:
```
// From:
{showElement && (
)}
// To
{showElement && (
)}
```
`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.
## Installation
This package is available in the npm registry as [react-native-highlight-overlay](https://www.npmjs.com/package/react-native-highlight-overlay).
```sh
# npm
npm install react-native-highlight-overlay
# yarn
yarn add react-native-highlight-overlay
```
## Usage
```js
import {
HighlightableElement,
HighlightableElementProvider,
HighlightOverlay,
} from "react-native-highlight-overlay";
// Remember to wrap the ROOT of your app in HighlightableElementProvider!
return (
{/*
* The HighlightOverlay should be next to the ROOT of the app,
* since it is NOT a modal, it's just an absolutely positioned view.
* If you want it to be a modal, wrap it in yourself first,
* but I recommend not using modals since they can be buggy.
*/}
{
// Called when the user clicks outside of the highlighted element.
// Set "highlightedElementId" to nullish to hide the overlay.
}}
/>
);
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT