React-native-navigation: [V2] Overlay displaying over modal

Created on 23 Apr 2018  路  6Comments  路  Source: wix/react-native-navigation

Issue Description

When dispatching a show modal action, the overlay would block the modal. Not sure if this is by design or not, I think the modal should be on top of everything include the overlay.

[ENTER DESCRIPTION HERE - Please make sure to use the current [naming conventions]
Overlay persist over modal.

Steps to Reproduce / Code Snippets / Screenshots

Call Navigation.showOverlay({ component: { id: 'componentId1', name: 'overlayComponent', options: { overlay: { interceptTouchOutside: false } } } }) to init the overlay, then call Navigation.showModal({ stack: { children: [{ component: { name: 'example.ModalScreen', passProps: { text: 'stack with one child' }, } }] } });

the overlay is still on top of the modal.

Environment

  • React Native Navigation version: 2.0.2241
  • React Native version: 0.51.0
  • Platform(s) (iOS, Android, or both?): iOS and Android
  • Device info (Simulator/Device? OS version? Debug/Release?): emulator
v2

All 6 comments

Hey, Overlay is displayed over modals by design.
Overlay can be used to show persistent UI elements, Alerts etc and there for has to be on top of other elements.

If you wish to hide an Overlay when modals are displayed, you can listen to modal displayed events and hide the overlay accordingly:

Navigation.events().onNavigationCommand((name, params) => {
  if (name === 'showModal') {
    // hide overlay
  }
});

Overlay also displays over system dialogs like alerts:

image

Is it possible to change it somehow?

Overlay still displays over system ui like actionsheet

I think https://github.com/wix/react-native-navigation/pull/4241 will address this.
@yogevbd lets prioritise this issue

Can't wait for the fix to be merged :) +1

FYI: The suggestion above by @guyca is no longer valid in RNN v2. The correct way is :

const commandListener = Navigation.events().registerCommandListener((name, params) => {
...
});

as documented : https://wix.github.io/react-native-navigation/#/docs/events?id=registercommandlistener

Was this page helpful?
0 / 5 - 0 ratings