fix: fix bottom positions when useRNScreensOverlay is true

Author: seniv

CHANGELOG.md

@@ -35,19 +35,11 @@
 - **Alert component:** Renamed `alertType` prop to `type` for consistency with other components. The `alertType` prop remains available but will be deprecated, so please migrate to `type`.
 - **Notification component:** Changed default `borderRadius` from `5` to `8` and "description" `fontSize` from `14` to `15`.
 - **Notification component:** Introduced a `type` prop. When set to anything other than `'classic'`, an icon and left border will be displayed.
+- `useRNScreensOverlay` and `rnScreensOverlayViewStyle` accepted not only as props, but also as parameters of the `showNotification` method.
 
 ### Bug Fixes
 - When you mount `NotifierWrapper`/`NotifierRoot` with `omitGlobalMethodsHookup={true}` and then switch it to `false`, global methods now hook up correctly.
 - Fixed a jump in the appearing animation when very large notifications appear.
 
 ### Known Issues
-- When `useRNScreensOverlay` is `true`, the bottom `position` will not work. If you need a bottom position with `useRNScreensOverlay`, you can adjust the container style using the `rnScreensOverlayViewStyle` parameter, for example:
-
-```typescript
-rnScreensOverlayViewStyle={{
-  width: '100%',
-  position: 'absolute',
-  bottom: 0,
-}}
-```
 - When `useRNScreensOverlay` is `true`, `SafeAreaView` might not work correctly. Use `ViewWithOffsets` component that is coming though props into all **Custom Components**.

src/components/FullWindowOverlay.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 import { Platform, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { Position } from '../types';
+import { styles } from '../styles';
 
 let RNScreenFullWindowOverlay:
   | ((props: { children: React.ReactNode }) => React.JSX.Element)
@@ -10,19 +12,29 @@ try {
 
 interface FullWindowOverlayProps {
   children: ReactNode;
+  position: Position;
   useOverlay?: boolean;
   viewStyle?: StyleProp<ViewStyle>;
 }
 export const FullWindowOverlay = ({
   children,
+  position,
   useOverlay,
   viewStyle,
 }: FullWindowOverlayProps) => {
   if (Platform.OS !== 'ios' || !useOverlay || !RNScreenFullWindowOverlay)
     return children;
+
+  const isBottom =
+    position === 'bottom' ||
+    position === 'bottomLeft' ||
+    position === 'bottomRight';
+
   return (
     <RNScreenFullWindowOverlay>
-      <View style={viewStyle}>{children}</View>
+      <View style={[isBottom && styles.bottomFullWindowOverlay, viewStyle]}>
+        {children}
+      </View>
     </RNScreenFullWindowOverlay>
   );
 };

src/components/Notifier.tsx

@@ -11,7 +11,6 @@ import type {
   NotifierProps,
   ShowNotificationParams,
 } from '../types';
-import { FullWindowOverlay } from './FullWindowOverlay';
 import { NotifierManager } from './NotifierManager';
 
 // we store references to all currently mounted instances of NotifierRoot / NotifierWrapper where omitGlobalMethodsHookup != true
@@ -32,19 +31,13 @@ const removeRef = (ref: NotifierInterface | null) => {
 
 /** Responsibilities:
  * - manages refs to display last mounted notification, or broadcast to all
- * - render FullWindowOverlay when useRNScreensOverlay is true
  * - collects default params from props and stores them in the ref to avoid re-renders of the NotifierManager.
  */
 const NotifierRootComponent = React.forwardRef<
   NotifierInterface,
   NotifierProps
 >((props, ref) => {
-  const {
-    omitGlobalMethodsHookup,
-    useRNScreensOverlay,
-    rnScreensOverlayViewStyle,
-    ...defaultParamsProps
-  } = props;
+  const { omitGlobalMethodsHookup, ...defaultParamsProps } = props;
   const localRef = useRef<NotifierInterface | null>(null);
 
   // since we don't rely on defaultParamsProps during the render, and access it only during "showNotification" call
@@ -80,14 +73,7 @@ const NotifierRootComponent = React.forwardRef<
     [ref, omitGlobalMethodsHookup]
   );
 
-  return (
-    <FullWindowOverlay
-      useOverlay={useRNScreensOverlay}
-      viewStyle={rnScreensOverlayViewStyle}
-    >
-      <NotifierManager ref={setRef} defaultParams={defaultParams} />
-    </FullWindowOverlay>
-  );
+  return <NotifierManager ref={setRef} defaultParams={defaultParams} />;
 });
 
 const getLastRef = () => {

src/components/NotifierRenderer.tsx

@@ -20,6 +20,7 @@ import { RenderComponentWithOffsets } from './RenderComponentWithOffsets';
 import { useShaking } from '../hooks/useShaking';
 import { useLayout } from '../hooks/useLayout';
 import { useSwipeAnimationValues } from '../hooks/useSwipeAnimationValues';
+import { FullWindowOverlay } from './FullWindowOverlay';
 
 export interface NotifierRendererMethods {
   hideNotification(callback?: Animated.EndCallback): void;
@@ -209,32 +210,38 @@ const NotifierRendererComponent = forwardRef<
   );
 
   return (
-    <PanGestureHandler
-      enabled={notification.swipeDirection !== 'none'}
-      onGestureEvent={onGestureEvent}
-      onHandlerStateChange={onHandlerStateChange}
+    <FullWindowOverlay
+      position={notification.position}
+      useOverlay={notification.useRNScreensOverlay}
+      viewStyle={notification.rnScreensOverlayViewStyle}
     >
-      <Animated.View
-        {...notification.containerProps}
-        ref={ref}
-        style={[
-          styles.container,
-          positionStyles[notification.position],
-          notification.containerStyle,
-          animationStyle,
-        ]}
+      <PanGestureHandler
+        enabled={notification.swipeDirection !== 'none'}
+        onGestureEvent={onGestureEvent}
+        onHandlerStateChange={onHandlerStateChange}
       >
-        <TouchableWithoutFeedback onPress={onPress}>
-          <View ref={ref} onLayout={onLayout}>
-            <RenderComponentWithOffsets
-              notification={notification}
-              hide={hideNotification}
-              animationFunctionParams={animationFunctionParams}
-            />
-          </View>
-        </TouchableWithoutFeedback>
-      </Animated.View>
-    </PanGestureHandler>
+        <Animated.View
+          {...notification.containerProps}
+          ref={ref}
+          style={[
+            styles.container,
+            positionStyles[notification.position],
+            notification.containerStyle,
+            animationStyle,
+          ]}
+        >
+          <TouchableWithoutFeedback onPress={onPress}>
+            <View ref={ref} onLayout={onLayout}>
+              <RenderComponentWithOffsets
+                notification={notification}
+                hide={hideNotification}
+                animationFunctionParams={animationFunctionParams}
+              />
+            </View>
+          </TouchableWithoutFeedback>
+        </Animated.View>
+      </PanGestureHandler>
+    </FullWindowOverlay>
   );
 });
 

src/styles.ts

@@ -5,6 +5,11 @@ export const styles = StyleSheet.create({
     zIndex: 2,
     position: 'absolute',
   },
+  bottomFullWindowOverlay: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+  },
 });
 
 export const positionStyles = StyleSheet.create({

src/types.ts

@@ -349,6 +349,18 @@ export interface ShowNotificationParams<
    * }
    * */
   shakingConfig?: ShakingConfig;
+
+  /** use FullWindowOverlay component from react-native-screens library
+   * If true, Notifier will be rendered above NativeStackNavigation modals and RN Modal on iOS.
+   * This Option will work only if react-native-screens library is installed.
+   * @platform iOS
+   * @default false */
+  useRNScreensOverlay?: boolean;
+
+  /** Style that will be used for RN View that is inside of FullWindowOverlay
+   * @platform iOS
+   * @default null */
+  rnScreensOverlayViewStyle?: StyleProp<ViewStyle>;
 }
 
 export enum AnimationState {
@@ -389,18 +401,6 @@ export interface NotifierProps extends ShowNotificationParams {
    * If enabled, the only way to display notifications is using refs.
    * @default false */
   omitGlobalMethodsHookup?: boolean;
-  /** use FullWindowOverlay component from react-native-screens library
-   * If true, Notifier will be rendered above NativeStackNavigation modals and RN Modal on iOS.
-   * This Option will work only if react-native-screens library is installed.
-   * It's recommended to not change this value on the fly as FullWindowOverlay might not work correctly
-   * @platform iOS
-   * @default false */
-  useRNScreensOverlay?: boolean;
-
-  /** Style that will be used for RN View that is inside of FullWindowOverlay
-   * @platform iOS
-   * @default null */
-  rnScreensOverlayViewStyle?: StyleProp<ViewStyle>;
 }
 
 export type UpdateNotificationParams<