Simple way to create a pop-up window with react-native?

Question

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.

I did quite some search and documentation reading, so I seem to have the following four options:

1. Use an Alert window and heavily modifying the alert message, but this option does not allow me to cancel by clicking on the transparent area.
2. Using some promising-looking component which is very beta like react-native-popupwindow is not really an option either.
3. Use a modal component which claims to be a simple way to present content above an enclosing view. According to How to dim a background in react native modal? and Tap outside of modal to close modal (react-native-modal)" this seems to be a possible option.
4. However, some people say that you should rather use Overlay and use Modal only as a last resort.

Please advice which of the solutions you tested in real life. What do you suggest? Maybe there is even an easier solution?

Related question(s) here on StackOverflow:

• Transparent overlay in React Native

Answer 1

Modal is totally your way to go.

My personal choice would be https://github.com/react-native-community/react-native-modal which has the best performances and flexibility overall.