title: React Native: Highlight component / area by darkening the rest
body: <p>Is there any <strong>React Native library</strong> that renders a dark transparent overlay over the screen and highlights a component with a shape?</p>
  <p><a href="https://i.stack.imgur.com/iuBYO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iuBYO.png" alt="desired-output" /></a></p>
  <p>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.</p>
  <p>Ideally I am looking for a library that provides a solution like <a href="https://github.com/jasongaare/react-native-walkthrough-tooltip" rel="nofollow noreferrer">React Native Walkthrough Tooltip</a> that knows the position of the highlight based on the component. Sadly, this one limits me to using only the message box shape.</p>
  <p>I already tried 2 different solutions: one based on <a href="https://github.com/react-native-masked-view/masked-view" rel="nofollow noreferrer">React Native MaskedView</a> and another based on <a href="https://github.com/ibitcy/react-native-hole-view#readme" rel="nofollow noreferrer">react-native-hole-view</a>. For both I am using <a href="https://reactnative.dev/docs/direct-manipulation#measurecallback" rel="nofollow noreferrer">React Native measure</a> to get the position of the component that needs highlighting but I am not happy with the result so far.</p>
  <p>Is there any alternative out there?</p>
  <blockquote>
  <p>Important note: as I am using <a href="https://reactnavigation.org/" rel="nofollow noreferrer">react navigation</a>, on some screens I need to cover the
  header and bottom navigation, this forces me to render my
  HighlightHoleOverlay within a transparent <a href="https://reactnative.dev/docs/modal" rel="nofollow noreferrer">react native modal</a>.</p>
  </blockquote>