Chris Castro
Jul 28, 2017 · 1 min read

Great article. The modal set up was helpful, however this lib’s modal doesn’t really look like a common modal since it comes in as a full screen. A far more common modal pattern is one that looks more like a lightbox, where the modal appears like an alert box and the screen behind it is visible but darkened out a bit. Most of the other big navigation contenders offer this (i.e. Wix’s react-native-navigation lib, or react-native-router-flux, etc), so I’m a bit sad that the react-navigation lib does not naturally support this. Can you share any advice on how to tweak the TabNavigator to do this? Is there some styling override that can be applied, and if so, how would you approach that?

  1. https://github.com/react-native-community/react-native-modal
  2. https://github.com/maxs15/react-native-modalbox

I can easily achieve this lightbox-style “modaling” with the 2 example libs above, however, the big problem for me is that they are controlled by state rather than by navigation on stack (the better way), and I’m trying hard to avoid controlling my modals using state (i.e. one reason is to avoid random constructor side-effects, etc).

A proper lightbox-style modal should behave more like a drawer or side-nav overlay that’s loaded onto stack, where it overlays on top of another screen but the screen underneath it is still visible (but darkened out a bit).

Please share with me any direction on how best to load non-full screen modals on to the stack!

    Chris Castro

    Written by