fix: workaround for android statusbar

web-ridge · Dec 23, 2023 · 8a292f3 · 8a292f3
1 parent bfb80c2
commit 8a292f3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/example/package.json b/example/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "expo": "^49.0.11",
     "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.72.6",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -192,9 +192,9 @@ function App({
   return (
     <>
       <StatusBar
-        // barStyle="light-content"
-        // backgroundColor={theme.colors.primary}
-        translucent={true}
+        barStyle={'dark-content'}
+        translucent
+        backgroundColor={'transparent'}
       />
       <ScrollView
         style={{ backgroundColor: theme.colors.background }}

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -4205,6 +4205,11 @@ expo-splash-screen@~0.20.5:
   dependencies:
     "@expo/prebuild-config" "6.2.6"
 
+expo-status-bar@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.6.0.tgz#e79ffdb9a84d2e0ec9a0dc7392d9ab364fefa9cf"
+  integrity sha512-e//Oi2WPdomMlMDD3skE4+1ZarKCJ/suvcB4Jo/nO427niKug5oppcPNYO+csR6y3ZglGuypS+3pp/hJ+Xp6fQ==
+
 expo@^49.0.11:
   version "49.0.11"
   resolved "https://registry.yarnpkg.com/expo/-/expo-49.0.11.tgz#2ad565aaf0e4533c17e5dcbe0e0020da856cbca9"

diff --git a/src/Date/DatePickerModalStatusBar.tsx b/src/Date/DatePickerModalStatusBar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useHeaderBackgroundColor } from '../utils'
 import Color from 'color'
-import { Platform, Animated, StatusBar, StatusBarStyle } from 'react-native'
+import { Animated, StatusBar, StatusBarStyle } from 'react-native'
 
 function DatePickerModalStatusBar({
   disableSafeTop,
@@ -17,26 +17,16 @@ function DatePickerModalStatusBar({
   const headerBackgroundColor = useHeaderBackgroundColor()
   const onDarkBackground =
     Color(headerBackgroundColor).isDark() || statusBarOnTopOfBackdrop
+
   const statusBarTheme: StatusBarStyle = onDarkBackground
     ? 'light-content'
     : 'dark-content'
   const statusBarBackground = statusBarOnTopOfBackdrop
     ? 'transparent'
-    : Platform.select({
-        android: headerBackgroundColor,
-        ios: headerBackgroundColor,
-        web: headerBackgroundColor,
-      })
+    : headerBackgroundColor
 
   return (
     <>
-      {!disableStatusBar && (
-        <StatusBar
-          barStyle={statusBarTheme}
-          backgroundColor={statusBarBackground}
-          translucent={true}
-        />
-      )}
       {!disableSafeTop && !statusBarOnTopOfBackdrop && (
         <Animated.View
           style={[
@@ -47,6 +37,13 @@ function DatePickerModalStatusBar({
           ]}
         />
       )}
+      {!disableStatusBar && (
+        <StatusBar
+          barStyle={statusBarTheme}
+          translucent={true}
+          backgroundColor="transparent"
+        />
+      )}
     </>
   )
 }