3

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.

enter image description here

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:

B--rian
  • 5,578
  • 10
  • 38
  • 89
  • 1
    Seriously you can use a modal for this purpose. It is really easy and can implement what you want without any problem. Also can call it using redux and with dynamic content. – Samitha Nanayakkara Nov 23 '18 at 14:15
  • @SamithaNanayakkara Thanks for the hint, I am still curious on comments on the other options. – B--rian Nov 23 '18 at 15:02

1 Answers1

10

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.

Hugo Laplace
  • 609
  • 1
  • 7
  • 16