Add the ability to override android:windowLightNavigationBar

zoontek · Jan 19, 2025 · 474df0a · 474df0a
1 parent e78ad83
commit 474df0a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-edge-to-edge",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "license": "MIT",
   "description": "Effortlessly enable edge-to-edge display in React Native",
   "author": "Mathieu Acthernoene <zoontek@gmail.com>",

diff --git a/src/expo.ts b/src/expo.ts
@@ -53,8 +53,14 @@ const withAndroidEdgeToEdgeTheme: ConfigPlugin<Props> = (
   ]);
 
   return withAndroidStyles(config, (config) => {
-    const { androidStatusBar = {}, userInterfaceStyle = "light" } = config;
-    const { barStyle } = androidStatusBar;
+    const {
+      androidNavigationBar = {},
+      androidStatusBar = {},
+      userInterfaceStyle = "light",
+    } = config;
+
+    const { barStyle: navigationBarStyle } = androidNavigationBar;
+    const { barStyle: statusBarStyle } = androidStatusBar;
     const { android = {} } = props;
     const { enforceNavigationBarContrast, parentTheme = "Default" } = android;
 
@@ -76,17 +82,29 @@ const withAndroidEdgeToEdgeTheme: ConfigPlugin<Props> = (
             });
           }
 
-          if (barStyle != null) {
+          if (statusBarStyle != null) {
             style.item.push({
               $: { name: "android:windowLightStatusBar" },
-              _: String(barStyle === "dark-content"),
+              _: String(statusBarStyle === "dark-content"),
             });
           } else if (userInterfaceStyle !== "automatic") {
             style.item.push({
               $: { name: "android:windowLightStatusBar" },
               _: String(userInterfaceStyle === "light"),
             });
           }
+
+          if (navigationBarStyle != null) {
+            style.item.push({
+              $: { name: "android:windowLightNavigationBar" },
+              _: String(navigationBarStyle === "dark-content"),
+            });
+          } else if (userInterfaceStyle !== "automatic") {
+            style.item.push({
+              $: { name: "android:windowLightNavigationBar" },
+              _: String(navigationBarStyle === "light"),
+            });
+          }
         }
 
         return style;