feat: handle notch internally by the library (#154)

Author: mjaskowska

docs/docs/intro/comprehensive-configuration/global-notifications-settings.md

@@ -37,3 +37,16 @@ const { useNotifications, NotificationsProvider } = createNotifications({
   gestureConfig: { direction: 'y' },
 })
 ```
+
+## Notch handling
+
+The library handles notch detection automatically so you don't have to worry about configuring this on your side. However, if you wish to take control over this by yourself, you can do that by declaring `isNotch` property in the global config.
+
+```jsx
+const { useNotifications, NotificationsProvider } = createNotifications({
+  ...
+  isNotch: true,
+})
+```
+
+Feel free to use for example `react-native-device-info`.

example/ios/Podfile.lock

@@ -341,8 +341,6 @@ PODS:
     - React-perflogger (= 0.66.3)
   - RNCMaskedView (0.2.6):
     - React-Core
-  - RNDeviceInfo (8.7.1):
-    - React-Core
   - RNGestureHandler (2.1.1):
     - React-Core
   - RNReanimated (2.3.1):
@@ -435,7 +433,6 @@ DEPENDENCIES:
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
-  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -521,8 +518,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCMaskedView:
     :path: "../node_modules/@react-native-masked-view/masked-view"
-  RNDeviceInfo:
-    :path: "../node_modules/react-native-device-info"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -577,7 +572,6 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: bbbdb3d8fcf327c6e2249ee71b6ef1764b7dc266
   ReactCommon: 9bac022ab71596f2b0fde1268272543184c63971
   RNCMaskedView: c298b644a10c0c142055b3ae24d83879ecb13ccd
-  RNDeviceInfo: aad3c663b25752a52bf8fce93f2354001dd185aa
   RNGestureHandler: e1ad51d31a580755079d5124d3ab66f0fcaa8311
   RNReanimated: da3860204e5660c0dd66739936732197d359d753
   RNScreens: 522705f2e5c9d27efb17f24aceb2bf8335bc7b8e

example/src/screens/DefaultExamples.tsx

@@ -10,7 +10,6 @@ import { RemoveButton } from '../components/basicExamples/RemoveButton'
 import { styles } from './styles'
 
 const { useNotifications, NotificationsProvider } = createNotifications({
-  isNotch: true,
   notificationPosition: 'top',
   defaultStylesSettings: {
     errorConfig: {

example/yarn.lock

@@ -5629,11 +5629,6 @@ react-native-codegen@^0.0.7:
     jscodeshift "^0.11.0"
     nullthrows "^1.1.1"
 
-react-native-device-info@^8.7.1:
-  version "8.7.1"
-  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-8.7.1.tgz#fbb06f87dbbc4423abe713874699fb2e6e99fd15"
-  integrity sha512-cVMZztFa2Qn6qpQa601W61CtUwZQ1KXfqCOeltejAWEXmgIWivC692WGSdtGudj4upSi1UgMSaGcvKjfcpdGjg==
-
 [email protected]:
   version "2.1.1"
   resolved "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.1.1.tgz#1d417bc7b551ec76129ce09861b3a01622b4ef99"

src/core/hooks/useNotificationsStates.ts

@@ -1,18 +1,20 @@
+import { useReducer, useRef, useState } from 'react'
 import { useWindowDimensions } from 'react-native'
 import { useNotificationConfig } from './useNotificationConfig'
-import { useReducer, useRef, useState } from 'react'
 import { getTopOffset, mergeConfigs } from '../utils/pickers'
 import { queueReducer } from '../utils/queueReducer'
+import { useStatusBarHeightDetector } from './useStatusBarHeightDetector'
 
 export const useNotificationsStates = () => {
   const panHandlerRef = useRef(null)
   const longPressHandlerRef = useRef(null)
   const { height: windowHeight, width: windowWidth } = useWindowDimensions()
+  const isPortaitMode = windowHeight > windowWidth
+  const { statusBarHeight } = useStatusBarHeightDetector({ isPortaitMode })
   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)
 
@@ -21,6 +23,7 @@ export const useNotificationsStates = () => {
     notificationHeight,
     isPortaitMode,
     windowHeight,
+    statusBarHeight,
   })
 
   return {

src/core/hooks/useStatusBarHeightDetector.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react'
+import { NativeModules, Platform, StatusBar } from 'react-native'
+
+type Props = {
+  isPortaitMode: boolean
+}
+
+export const useStatusBarHeightDetector = ({ isPortaitMode }: Props) => {
+  const { StatusBarManager } = NativeModules
+  const [barHeight, setBarHeight] = useState(0)
+
+  useEffect(() => {
+    if (Platform.OS !== 'ios') return setBarHeight(StatusBar.currentHeight ?? 0)
+    // handling edge case when app is opened in landscape mode and barHeight = 0
+    StatusBarManager.getHeight(({ height }: { height: number }) =>
+      setBarHeight(isPortaitMode && height !== 0 ? height : 50)
+    )
+  }, [StatusBarManager, isPortaitMode])
+
+  return {
+    statusBarHeight: barHeight,
+  }
+}

src/core/utils/pickers.ts

@@ -3,23 +3,28 @@ import type { EmitParam } from '../services/types'
 import type { DefaultKeys } from '../../defaultConfig/defaultConfig'
 import type { DefaultStylesConfigs } from '../../defaultConfig/types'
 import type { KeyType } from '../../types/misc'
+import { Constants } from '../config'
 
 type GetOffsetTopProps = {
   globalConfig: NotificationsConfig<VariantsMap>
   notificationHeight: number
   isPortaitMode: boolean
   windowHeight: number
+  statusBarHeight: number
 }
 
 export const getTopOffset = ({
   globalConfig,
   notificationHeight,
   isPortaitMode,
   windowHeight,
+  statusBarHeight,
 }: GetOffsetTopProps) => {
   const isNotch = globalConfig.isNotch
-  const extraSpace = 50
-  const topPosition = isNotch && isPortaitMode ? extraSpace : 10
+  const extraSpace = statusBarHeight + 10
+
+  const shouldRenderExtraSpace = isNotch ?? (isPortaitMode && !Constants.isAndroid)
+  const topPosition = shouldRenderExtraSpace ? extraSpace : 10
   const notificationPosition = globalConfig.notificationPosition
 
   switch (notificationPosition) {