search

Charanor / react-native-highlight-overlay

A tinted overlay that allows one or more elements to be highlighted (non-tinted).
MIT License
41 stars 6 forks source link

Allow passing children to <HighlightOverlay>? #15

Open princefishthrower opened 1 year ago

princefishthrower commented 1 year ago

As the title states, is it possible for us to pass things to the highlight overlay? For example, we may want to show some components to tell the user what exactly we are highlighting and what it is used for.

Charanor commented 1 year ago

Hello and thanks for the feedback!

This is currently not supported, but you can achieve the same result by grouping the overlay together with whatever component you want to show on top:

<View /* Probably needs to be absolute & full screen, depending on where it's placed of course :) */>
  {highlightId != null && <TutorialOverlay tutorial={highlightId} />}
  <HighlightOverlay highlightedElementId={highlightId} />
</View>

I am currently working on what I like to call "decorators". They are utility components that can be used to decorate the highlight, including adding "tooltips" to the highlighted areas and more. I can't promise that this will be done soon though, I don't have a lot of free time to work on this project unfortunately.