Allow passing children to <HighlightOverlay>?

[princefishthrower]

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]

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.

[efstathiosntonas]

hey folks, sorry for digging this from the grave.

It seems that after using the lib in [email protected] if I try to overlay something like above then it won't show up. The exact same thing works fine with [email protected]

I present a Modal dialog dynamically when something is highlighted:

 <Dialog
        backdropStyle={styles.walkthroughDialogBackdrop}
        isVisible={currentWalkthroughIndex === 1}
        onBackdropPress={onBackdropPress}
        overlayStyle={styles.overlayStyle}
      >
        {/*// @ts-ignore*/}
        <InterestsWalkthrough
          content={_(
            msg`View blablabla`
          )}
          header={_(msg`Header`)}
        />
      </Dialog>

edit: This happens on iOS only, weird....