React Native: Highlight component / area by darkening the rest

user_8597377 0
Viewed 1109

Is there any React Native library that renders a dark transparent overlay over the screen and highlights a component with a shape?

desired-output

While building a set of overlays for how-to use an app (tutorials), I got stuck at a point where I need to implement a vignette component to highlight a specific area.

Ideally I am looking for a library that provides a solution like React Native Walkthrough Tooltip that knows the position of the highlight based on the component. Sadly, this one limits me to using only the message box shape.

I already tried 2 different solutions: one based on React Native MaskedView and another based on react-native-hole-view. For both I am using React Native measure to get the position of the component that needs highlighting but I am not happy with the result so far.

Is there any alternative out there?

Important note: as I am using react navigation, on some screens I need to cover the header and bottom navigation, this forces me to render my HighlightHoleOverlay within a transparent react native modal.

react-native libraries javascript
1 Answers

I've authored a library that I think would fit your needs, you can find it here: react-native-highlight-overlay.

This library allows you to draw an overlay over the entire screen (or only a specific component) and highlight a single element below the highlight. It's 100% automatic, no manual size calculations required, all you need to do is wrap the component(s) you want to highlight with HighlightableElement and give it a unique ID that you then supply to the overlay. Basic example:

import {
    HighlightableElement,
    HighlightableElementProvider,
    HighlightOverlay,
} from "react-native-highlight-overlay";

// Remember to wrap the ROOT of your app in HighlightableElementProvider!
return (
    <HighlightableElementProvider>
        <HighlightableElement id="important_item">
            <TheRestOfTheOwl />
        </HighlightableElement>

        {/* 
          * 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 <Modal> yourself first,
          * but I recommend not using modals since they can be buggy.
          */}
        <HighlightOverlay
            // You would usually use a state variable for this :)
            // Or store it in a context / store so you can change it from anywhere in the app.
            highlightedElementId="important_item"
            onDismiss={() => {
                // Called when the user clicks outside of the highlighted element.
                // Set "highlightedElementId" to nullish to hide the overlay.
            }}
        />
    </HighlightableElementProvider>
);

If you make the highlight circular and give it some padding, say padding: 25, it should look just like your image.

user_56156350
Related