title: Simple way to create a pop-up window with react-native?
body: <p>The goal is a simple and clean implementation to build a pop-up window similar to the search-filters from the YouTube-App, see picture. Tapping on the half-transparent border should close the pop-up. The same pop-up is supposed to be called from several screens (within nested navigation-structures) and just give back the choices to the respective screen.  </p>
  
  <p><a href="https://i.stack.imgur.com/7kMMO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7kMMO.png" alt="enter image description here"></a></p>
  
  <p>I did quite some search and documentation reading, so I seem to have the following four options:</p>
  
  <ol>
  <li>Use an <code>Alert</code> window and heavily modifying the alert message, but this option does not allow me to cancel by clicking on the transparent area.</li>
  <li>Using some promising-looking component which is very beta like <a href="https://www.npmjs.com/package/react-native-popupwindow" rel="nofollow noreferrer"><code>react-native-popupwindow</code></a> is not really an option either.</li>
  <li>Use a <a href="https://facebook.github.io/react-native/docs/modal" rel="nofollow noreferrer"><code>modal</code></a> component which claims to be a simple way to present content above an enclosing view. According to <a href="https://stackoverflow.com/questions/48058532/">How to dim a background in react native modal?</a> and <a href="https://stackoverflow.com/questions/46775522">Tap outside of modal to close modal (react-native-modal)</a>" this seems to be a possible option.</li>
  <li>However, some people say that you should rather use <a href="https://react-native-training.github.io/react-native-elements/docs/overlay.html" rel="nofollow noreferrer"><code>Overlay</code></a> and use <a href="https://www.findbestopensource.com/product/brentvatne-react-native-overlay" rel="nofollow noreferrer">Modal only as a last resort</a>. </li>
  </ol>
  
  <p>Please advice which of the solutions you tested in real life. What do you suggest? Maybe there is even an easier solution? </p>
  
  <p>Related question(s) here on StackOverflow:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/30638739/">Transparent overlay in React Native</a></li>
  </ul>