@codeleap/mobile 4.1.0 → 4.2.2

package/src/utils/theme.ts

@@ -1,23 +1,27 @@
-import { Platform, Dimensions, StatusBar, StyleSheet } from 'react-native'
+import { Platform, Dimensions, StyleSheet } from 'react-native'
 import DeviceInfo from 'react-native-device-info'
 
-type AppValues = {
-  headerHeight: number
-  tabBarHeight: number
+type Options = {
+  getStatusBarHeight?: () => number
+  getAndroidNavbarHeight?: () => number
 }
 
-export function getMobileThemeValues(initialWindowMetrics, values: AppValues) {
+export function getMobileThemeValues(initialWindowMetrics, options: Options = {}) {
   const screenDimensions = Dimensions.get('screen')
 
   const hasNotch = DeviceInfo.hasNotch()
   const hasIsland = DeviceInfo.hasDynamicIsland()
-  const bottomNavHeight = Platform.OS === 'android' ? initialWindowMetrics?.insets?.bottom : 0
+  const bottomNavHeight = Platform.OS === 'android' ? options?.getAndroidNavbarHeight?.() ?? 0 : 0
 
   const prefersConstantNavigationBar = bottomNavHeight > 0
 
-  const safeAreaTop = Platform.OS === 'ios' ? (hasNotch ? 34 + (hasIsland ? 12 : 0) : 20) : StatusBar.currentHeight
+  const safeAreaTop = Platform.OS === 'ios' ? (hasNotch ? 34 + (hasIsland ? 12 : 0) : 20) : (options?.getStatusBarHeight?.() || 0)
+
+  const safeAreaBottom = Platform.select({
+    ios: hasNotch && !prefersConstantNavigationBar ? 20 : 0,
+    android: bottomNavHeight ?? initialWindowMetrics?.insets.bottom ?? 0,
+  })
 
-  const safeAreaBottom = (hasNotch && !prefersConstantNavigationBar ? 20 : 0)
   return {
     ...screenDimensions,
     pixel: StyleSheet.hairlineWidth,
@@ -30,7 +34,7 @@ export function getMobileThemeValues(initialWindowMetrics, values: AppValues) {
     bottomNavHeight,
     get window() {
       return {
-        height: screenDimensions.height - (bottomNavHeight + safeAreaTop),
+        height: screenDimensions.height - (safeAreaBottom + safeAreaTop),
         width: screenDimensions.width,
       }
     },