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.
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'
},
}
}]
}
});
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:

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