React-native-navigation: [v2] Make Overlays more robust

[Dexwell]

I know Overlays currently are just Views layered on top of everything else, but they provide value that Modals just can't. Here's a list of improvements that would be very welcome:

• [ ] Allow static get options() inside an Overlay component, for example to change the StatusBar style
• [ ] Crash: Calling Navigation.showModal inside an Overlay crashes the app
• [ ] Crash: Calling Navigation.showOverlay right after a notification tap (initialization) crashes the app
• [ ] Bug: Native UI is hidden behind overlays (including RN Performance Monitor) (see #3125)

---

Environment

• React Native Navigation version: 2.0.2306
• React Native version: 0.55.3
• Platform(s): iOS
• Device info: Simulator, iPhone X, iOS 11

[guyca]

I believe changing status bar options already works on Android. I static options are supported on iOS and it's just a matter of applying statusBar options, but I could be wrong :)

Could you please mention on which platform the bugs are reproducing?

[Dexwell]

Whoops, sorry. iOS.

[Dexwell]

Just tested on version 2.0.2306; setting the following does not do anything when opened as an Overlay on iOS:

static get options() {
  return {
    statusBar: {
      style: 'light'
    }
  };
}

[yusufyildirim]

In my case, calling showModal in didn't crashed the app but overlay disappeared instantly. I think overlays are so dominant (i don't know how to say it exactly lol 😂 ). I mean, as @Dexwell said, overlays are on top of everything. I think they might belong to the screens itself or at least there should be a option about that

[Dexwell]

Perhaps Overlays should be treated like see-through (non-animated) modals?

[yusufyildirim]

@Dexwell yup this is what is think. I don't know maybe I'm missing the point :D

[Dexwell]

Most of my issues are resolved by using modals instead of overlays, with the following options to mirror overlay behavior:

static get options() {
  return {
    screenBackgroundColor: 'transparent',
    modalPresentationStyle: 'overCurrentContext',
    animations: {
      showModal: {
        enable: false
      },
      dismissModal: {
        enable: false
      },
    },
  };
}