Skip to content

Commit

Permalink
fix: split useStatusBarHeightDetector hook into web and native flav…
Browse files Browse the repository at this point in the history
…ors (#266)

fix: split useStatusBarHeightDetector hook into web and native flavours
  • Loading branch information
danielmark0116 committed May 27, 2024
1 parent 08f9b95 commit 08b640e
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 20 deletions.
27 changes: 27 additions & 0 deletions src/core/hooks/useStatusBarHeightDetector.native.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { useEffect, useState } from 'react'
import { NativeModules, Platform, StatusBar } from 'react-native'

type Props = {
isPortraitMode: boolean
}

const NativeStatusBarManager = require('react-native/Libraries/Components/StatusBar/NativeStatusBarManagerIOS')

export const useStatusBarHeightDetector = ({ isPortraitMode }: 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
const StatusBarManagerModule = NativeStatusBarManager?.default || StatusBarManager

StatusBarManagerModule?.getHeight(({ height }: { height: number }) =>
setBarHeight(isPortraitMode && height !== 0 ? height : 50)
)
}, [StatusBarManager, isPortraitMode])

return {
statusBarHeight: barHeight,
}
}
22 changes: 2 additions & 20 deletions src/core/hooks/useStatusBarHeightDetector.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,9 @@
import { useEffect, useState } from 'react'
import { NativeModules, Platform, StatusBar } from 'react-native'

type Props = {
isPortraitMode: boolean
}

const NativeStatusBarManager = require('react-native/Libraries/Components/StatusBar/NativeStatusBarManagerIOS')

export const useStatusBarHeightDetector = ({ isPortraitMode }: 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
const StatusBarManagerModule = NativeStatusBarManager?.default || StatusBarManager

StatusBarManagerModule?.getHeight(({ height }: { height: number }) =>
setBarHeight(isPortraitMode && height !== 0 ? height : 50)
)
}, [StatusBarManager, isPortraitMode])

export const useStatusBarHeightDetector = ({ isPortraitMode: _ }: Props) => {
return {
statusBarHeight: barHeight,
statusBarHeight: 0,
}
}

0 comments on commit 08b640e

Please sign in to comment.