NativeStackNavigation modals result in notifications beneath the modal

[z1haze]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

When using a NativeStackNavigator on iOS, notifications are forced beneath modal screens. This is due to how iOS treats modals, and that is to always force them to the top. We can use the FullWindowOverlay component provided by react-native-screens to conditionally wrap the notification for iOS only, which results in notifications being positioned on top of modals where they belong, and no change on android.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-notifier/.DS_Store b/node_modules/react-native-notifier/.DS_Store
new file mode 100644
index 0000000..9104acb
Binary files /dev/null and b/node_modules/react-native-notifier/.DS_Store differ
diff --git a/node_modules/react-native-notifier/src/Notifier.tsx b/node_modules/react-native-notifier/src/Notifier.tsx
index 92bfaf2..750fb7a 100644
--- a/node_modules/react-native-notifier/src/Notifier.tsx
+++ b/node_modules/react-native-notifier/src/Notifier.tsx
@@ -12,6 +12,8 @@ import {
   PanGestureHandlerStateChangeEvent,
 } from 'react-native-gesture-handler';
 
+import { FullWindowOverlay } from 'react-native-screens';
+
 import styles from './Notifier.styles';
 import { Notification as NotificationComponent } from './components';
 import {
@@ -260,6 +262,12 @@ export class NotifierRoot extends React.PureComponent<ShowNotificationParams, St
     this.hiddenComponentValue = -Math.max(heightWithMargin, DEFAULT_COMPONENT_HEIGHT);
   }

   render() {
     const {
       title,
@@ -275,7 +283,7 @@ export class NotifierRoot extends React.PureComponent<ShowNotificationParams, St
     const additionalContainerStyle =
       typeof containerStyle === 'function' ? containerStyle(this.translateY) : containerStyle;
 
-    return (
+    const notificationContent = (
       <PanGestureHandler
         enabled={swipeEnabled}
         onGestureEvent={this.onGestureEvent}
@@ -306,5 +314,11 @@ export class NotifierRoot extends React.PureComponent<ShowNotificationParams, St
         </Animated.View>
       </PanGestureHandler>
     );
+
+    return  Platform.OS === 'ios' ? (
+      <FullWindowOverlay>{notificationContent}</FullWindowOverlay>
+    ) : (
+      notificationContent
+    )
   }
 }

This issue body was partially generated by patch-package.

[z1haze]

fixes #94 relates to #71

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vanenshi]

@z1haze Thanks a bunch you don't mind if I create a PR using this fix?

[bryanprimus]

Platform.OS === 'ios' ? ( <FullWindowOverlay>{notificationContent}</FullWindowOverlay>

wonder if there is a downside of doing this?

[vanenshi]

Platform.OS === 'ios' ? ( <FullWindowOverlay>{notificationContent}</FullWindowOverlay>

wonder if there is a downside of doing this?

There was a downside, the GestureHandler stopped working So, i had to add GestureHandlerRootView inside the overlay

      <FullWindowOverlay>
        <GestureHandlerRootView >
             ...
        </ GestureHandlerRootView >      
      </FullWindowOverlay>

[bryanprimus]

Platform.OS === 'ios' ? ( <FullWindowOverlay>{notificationContent}</FullWindowOverlay>

this solution is stopped working in expo 51, the screen is just freezing everytime i'm wrapping my app with NotifierWrapper

[seniv]

Hello 👋 Based on @z1haze’s patch and other comments, I found out how the problem can be solved. Thanks a lot! I've released a new version that introduces the useRNScreensOverlay prop that enables FullWindowOverlay. It's disabled by default just to be safe that it will not break anything. To enable it - simply pass useRNScreensOverlay to NotifierWrapper or NotifierRoot:

<GestureHandlerRootView>
  <NotifierWrapper useRNScreensOverlay>
    // ...app code
  </NotifierWrapper>
</GestureHandlerRootView>

It was tested on the latest Expo (51) with Expo Go and on the Bare React Native app without Expo. @bryanltobing can you try it on your end? That will be very helpful