feat: handle notification (position, topOffset and width) in landscape mode

src/core/config.ts

@@ -1,25 +1,18 @@
 //do wyrzucenia
-import { Dimensions, Platform } from 'react-native'
+import { Platform } from 'react-native'
 
 const isAndroid = Platform.OS === 'android'
 const maxLongPressDragDistance = 300
-const { width, height } = Dimensions.get('window')
 const notificationSideMargin = 14
-const notificationWidth = width - notificationSideMargin * 2
-const initialOffsetX = -(notificationWidth + 2 * notificationSideMargin)
 const initialOffsetY = -300
-const targetOffsetX = width
 const targetOffsetY = true ? 50 : 10
+const maxNotificationWidth = 343
 
 export const Constants = {
   maxLongPressDragDistance,
   notificationSideMargin,
-  notificationWidth,
-  initialOffsetX,
   initialOffsetY,
-  targetOffsetX,
   targetOffsetY,
   isAndroid,
-  height,
-  width,
+  maxNotificationWidth,
 }

src/core/hooks/useNotificationsStates.ts

@@ -1,3 +1,4 @@
+import { useWindowDimensions } from 'react-native'
 import { useNotificationConfig } from './useNotificationConfig'
 import { useReducer, useRef, useState } from 'react'
 import { getTopOffset, mergeConfigs } from '../utils/pickers'
@@ -6,14 +7,21 @@ import { queueReducer } from '../utils/queueReducer'
 export const useNotificationsStates = () => {
   const panHandlerRef = useRef(null)
   const longPressHandlerRef = useRef(null)
+  const { height: windowHeight, width: windowWidth } = useWindowDimensions()
   const globalConfig = useNotificationConfig()
   const [notificationsQueue, dispatch] = useReducer(queueReducer, [])
   const [notificationHeight, setNotificationHeight] = useState(0)
 
+  const isPortaitMode = windowHeight > windowWidth
   const notificationEvent = notificationsQueue[0]
   const config = mergeConfigs(globalConfig, notificationEvent)
 
-  const topOffset = getTopOffset(config, notificationHeight)
+  const topOffset = getTopOffset({
+    globalConfig: config,
+    notificationHeight,
+    isPortaitMode,
+    windowHeight,
+  })
 
   return {
     config,
@@ -24,6 +32,7 @@ export const useNotificationsStates = () => {
     notificationsQueue,
     longPressHandlerRef,
     setNotificationHeight,
+    isPortaitMode,
   }
 }
 

src/core/renderers/GestureHandler.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react'
+import { useWindowDimensions } from 'react-native'
 import { PanGestureHandler } from 'react-native-gesture-handler'
 import type { AnimationAPI } from '../hooks/useAnimationAPI'
 import type { NotificationState } from '../hooks/useNotificationsStates'
@@ -10,12 +11,20 @@ type Props = {
   children: ReactNode
   state: Pick<
     NotificationState,
-    'longPressHandlerRef' | 'panHandlerRef' | 'setNotificationHeight' | 'topOffset'
+    | 'longPressHandlerRef'
+    | 'panHandlerRef'
+    | 'setNotificationHeight'
+    | 'topOffset'
+    | 'isPortaitMode'
   >
   animationAPI: Pick<AnimationAPI, 'dragGestureHandler' | 'handleDragStateChange' | 'dragStyles'>
 }
 
 export const GestureHandler = ({ children, state, animationAPI }: Props) => {
+  const { width } = useWindowDimensions()
+  const notificationWidth = state.isPortaitMode
+    ? width - Constants.notificationSideMargin * 2
+    : Constants.maxNotificationWidth
   return (
     <PanGestureHandler
       ref={state.panHandlerRef}
@@ -28,7 +37,10 @@ export const GestureHandler = ({ children, state, animationAPI }: Props) => {
           animationAPI.dragStyles,
           styles.container,
           Constants.isAndroid ? styles.containerAndroid : styles.containerIos,
-          { top: state.topOffset },
+          {
+            top: state.topOffset,
+            width: notificationWidth,
+          },
         ]}>
         {children}
       </Animated.View>

src/core/utils/pickers.ts

@@ -1,26 +1,34 @@
-import { Constants } from '../config'
 import type { NotificationsConfig, Variant, VariantsMap } from '../../types'
 import type { EmitParam } from '../services/types'
 import type { DefaultKeys } from '../../defaultConfig/defaultConfig'
 import type { DefaultStylesConfigs } from '../../defaultConfig/types'
 import type { KeyType } from '../../types/misc'
 
-export const getTopOffset = (
-  globalConfig: NotificationsConfig<VariantsMap>,
+type GetOffsetTopProps = {
+  globalConfig: NotificationsConfig<VariantsMap>
   notificationHeight: number
-) => {
+  isPortaitMode: boolean
+  windowHeight: number
+}
+
+export const getTopOffset = ({
+  globalConfig,
+  notificationHeight,
+  isPortaitMode,
+  windowHeight,
+}: GetOffsetTopProps) => {
   const isNotch = globalConfig.isNotch
   const extraSpace = 50
-  const topPosition = isNotch ? extraSpace : 10
+  const topPosition = isNotch && isPortaitMode ? extraSpace : 10
   const notificationPosition = globalConfig.notificationPosition
 
   switch (notificationPosition) {
     case 'top':
       return topPosition
     case 'center':
-      return Constants.height / 2 - (notificationHeight ? notificationHeight / 2 : 75)
+      return windowHeight / 2 - (notificationHeight ? notificationHeight / 2 : 75)
     case 'bottom':
-      return Constants.height - (notificationHeight ? notificationHeight + extraSpace : 150)
+      return windowHeight - (notificationHeight ? notificationHeight + extraSpace : 150)
     default:
       return topPosition
   }

src/core/utils/styles.ts

@@ -4,7 +4,6 @@ import { Constants } from '../config'
 export const styles = StyleSheet.create({
   container: {
     position: 'absolute',
-    width: Constants.notificationWidth,
     minHeight: 0,
     left: 0,
     backgroundColor: 'transparent',
@@ -13,11 +12,13 @@ export const styles = StyleSheet.create({
     justifyContent: 'flex-start',
   },
   containerIos: {
-    left: Constants.notificationSideMargin,
+    left: `auto`,
+    right: Constants.notificationSideMargin,
     top: 50,
   },
   containerAndroid: {
-    left: Constants.notificationSideMargin,
+    left: `auto`,
+    right: Constants.notificationSideMargin,
     top: 30,
   },
   boxWrapper: {

src/defaultConfig/defaultGestureConfig.ts

@@ -1,9 +1,8 @@
-import { Constants } from '../core/config'
 import type { GestureConfig } from '../types/gestures'
 
 export const AndroidGestureConfig: GestureConfig = {
   direction: 'x',
-  activationDistances: Constants.width * 0.4,
+  activationDistances: 50,
   activationVelocities: 2000,
 }