Bug by selecting preferred system navigation from settings

[ashok3]

Bug:

I found an interesting bug trying to test the different system navigations from Settings on API 33 (emulator - I haven't been able to test on a real device). Default navigation is Gesture navigation, with which everything seems to be going well.

I'm explicitly setting the system navigation color like this:

SystemNavigationBar.setNavigationColor(
  'white',
  'dark',
  'navigation',
);

The bug happens when I set 3-button navigation or 2-button navigation from Settings:

As you can see, the bar style is 'light' instead of 'dark' (explicitly set).

Additional tests:

• I also tested by updating the background color to 'red' and it works. Only the style light/dark is not working.
• I also tested on API 28 (emulator), which uses 3-button navigation and doesn't have option to change it - and it's working fine. I can see the buttons because it's updating the style to 'dark'.

Versions:

• react 18.1.0
• react-native 0.70.4
• react-native-system-navigation-bar 2.2.0

[ashok3]

Hi @kadiraydinli @cemocanon @zolbooo here is a temporary fix which I'm sure you could do better since I'm not so familiar with android.

diff --git a/node_modules/react-native-system-navigation-bar/android/src/main/java/com/.DS_Store b/node_modules/react-native-system-navigation-bar/android/src/main/java/com/.DS_Store
new file mode 100644
index 0000000..9858899
Binary files /dev/null and b/node_modules/react-native-system-navigation-bar/android/src/main/java/com/.DS_Store differ
diff --git a/node_modules/react-native-system-navigation-bar/android/src/main/java/com/reactnativesystemnavigationbar/SystemNavigationBarModule.java b/node_modules/react-native-system-navigation-bar/android/src/main/java/com/reactnativesystemnavigationbar/SystemNavigationBarModule.java
index 6ec70ac..145f8f6 100644
--- a/node_modules/react-native-system-navigation-bar/android/src/main/java/com/reactnativesystemnavigationbar/SystemNavigationBarModule.java
+++ b/node_modules/react-native-system-navigation-bar/android/src/main/java/com/reactnativesystemnavigationbar/SystemNavigationBarModule.java
@@ -17,6 +17,7 @@ import com.facebook.react.uimanager.IllegalViewOperationException;
 import java.util.HashMap;
 import java.util.Map;
 import java.util.Objects;
+import android.view.WindowInsetsController;

 @ReactModule(name = SystemNavigationBarModule.NAME)
 public class SystemNavigationBarModule extends ReactContextBaseJavaModule {
@@ -281,16 +282,41 @@ public class SystemNavigationBarModule extends ReactContextBaseJavaModule {
     if (getCurrentActivity() == null) {
       throw new IllegalViewOperationException("current activity is null");
     }
-    View decorView = getCurrentActivity().getWindow().getDecorView();
-    int bit = decorView.getSystemUiVisibility();

-    if (light) {
-      bit |= visibility;
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.R) {
+      View decorView = getCurrentActivity().getWindow().getDecorView();
+      int bit = decorView.getSystemUiVisibility();
+
+      if (light) {
+        bit |= visibility;
+      } else {
+        bit &= ~visibility;
+      }
+
+      decorView.setSystemUiVisibility(bit);
     } else {
-      bit &= ~visibility;
-    }
+      WindowInsetsController insetsController = getCurrentActivity().getWindow().getInsetsController();

-    decorView.setSystemUiVisibility(bit);
+      if (visibility == View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR) {
+        if (light) {
+          insetsController.setSystemBarsAppearance(WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS, WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS);
+        } else {
+          insetsController.setSystemBarsAppearance(0, WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS);
+        }
+      } else if (visibility == View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR) {
+        if (light) {
+          insetsController.setSystemBarsAppearance(WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS, WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS);
+        } else {
+          insetsController.setSystemBarsAppearance(0, WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS);
+        }
+      } else if (visibility == (View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR)) {
+        if (light) {
+          insetsController.setSystemBarsAppearance(WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS | WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS, WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS | WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS);
+        } else {
+          insetsController.setSystemBarsAppearance(0, WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS | WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS);
+        }
+      }
+    }
   }

   private void setModeStyle(Boolean light, Integer bar) {
diff --git a/node_modules/react-native-system-navigation-bar/src/index.tsx b/node_modules/react-native-system-navigation-bar/src/index.tsx
index cab6100..bb54f4a 100644
--- a/node_modules/react-native-system-navigation-bar/src/index.tsx
+++ b/node_modules/react-native-system-navigation-bar/src/index.tsx
@@ -80,7 +80,7 @@ const setNavigationColor = async (
   if (Platform.OS === 'android') {
     const { modeStyle, mode } = getBarModeTypes(style, bar);
     return await NavigationBar.setNavigationColor(
-      color === 'translucent' ? 0 : processColor(color),
+      color === 'translucent' ? 1 : processColor(color),
       color === 'translucent',
       modeStyle,
       mode

And here some references that could help you:

• https://stackoverflow.com/questions/62577645/android-view-view-systemuivisibility-deprecated-what-is-the-replacement
• https://stackoverflow.com/questions/55973728/system-ui-flag-light-navigation-bar-not-working-on-api-28
• https://developer.android.com/reference/android/view/View#SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
• https://developer.android.com/reference/android/view/WindowInsetsController#setSystemBarsAppearance(int,%20int)

[kadiraydinli]

Thank you for the solution suggestion. You can access API Level 30 support from the latest version.