From 6e789c6cdfe9be8d196e464d82ff3da01151e61e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ot=C3=A1vio=20Stasiak?=
 <91474186+OtavioStasiak@users.noreply.github.com>
Date: Wed, 22 Jan 2025 17:34:18 -0300
Subject: [PATCH] fix: android navigation bar color is not displaying correctly
 (#5928)

Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 android/app/src/main/res/values/styles.xml    |  1 -
 app/AppContainer.tsx                          |  3 +-
 app/index.tsx                                 |  4 +-
 app/lib/methods/helpers/theme.ts              | 12 ++--
 ios/Podfile.lock                              |  5 +-
 package.json                                  |  4 +-
 ...ct-native-navigation-bar-color+2.0.1.patch | 13 ----
 ...ct-native-navigation-bar-color+2.0.2.patch | 62 +++++++++++++++++++
 yarn.lock                                     | 16 ++---
 9 files changed, 85 insertions(+), 35 deletions(-)
 delete mode 100644 patches/react-native-navigation-bar-color+2.0.1.patch
 create mode 100644 patches/react-native-navigation-bar-color+2.0.2.patch

diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index 29375d52e8..c5d1e80fbe 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -2,7 +2,6 @@
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <item name="android:colorEdgeEffect">#aaaaaa</item>
         <item name="colorPrimaryDark">@color/splashBackground</item>
-        <item name="android:navigationBarColor">@color/splashBackground</item>
         <item name="android:forceDarkAllowed">false</item>
         <!-- RN 0.68.2 -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item> 
diff --git a/app/AppContainer.tsx b/app/AppContainer.tsx
index 079eb9e7a6..b6636310eb 100644
--- a/app/AppContainer.tsx
+++ b/app/AppContainer.tsx
@@ -17,6 +17,7 @@ import MasterDetailStack from './stacks/MasterDetailStack';
 import ShareExtensionStack from './stacks/ShareExtensionStack';
 import { ThemeContext } from './theme';
 import { setCurrentScreen } from './lib/methods/helpers/log';
+import { themes } from './lib/constants';
 
 const createStackNavigator = createNativeStackNavigator;
 
@@ -59,7 +60,7 @@ const App = memo(({ root, isMasterDetail }: { root: string; isMasterDetail: bool
 				}
 				Navigation.routeNameRef.current = currentRouteName;
 			}}>
-			<Stack.Navigator screenOptions={{ headerShown: false, animation: 'none' }}>
+			<Stack.Navigator screenOptions={{ headerShown: false, animation: 'none', navigationBarColor: themes[theme].surfaceLight }}>
 				{root === RootEnum.ROOT_LOADING || root === RootEnum.ROOT_LOADING_SHARE_EXTENSION ? (
 					<Stack.Screen name='AuthLoading' component={AuthLoadingView} />
 				) : null}
diff --git a/app/index.tsx b/app/index.tsx
index 89b0d6d5e9..3d540e8c9f 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Dimensions, EmitterSubscription, Linking } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
-import RNScreens from 'react-native-screens';
+import { enableScreens } from 'react-native-screens';
 import { Provider } from 'react-redux';
 
 import AppContainer from './AppContainer';
@@ -36,7 +36,7 @@ import { TSupportedThemes, ThemeContext } from './theme';
 import ChangePasscodeView from './views/ChangePasscodeView';
 import ScreenLockedView from './views/ScreenLockedView';
 
-RNScreens.enableScreens();
+enableScreens();
 initStore(store);
 
 interface IDimensions {
diff --git a/app/lib/methods/helpers/theme.ts b/app/lib/methods/helpers/theme.ts
index 50f0ec4e26..e6641c5cfa 100644
--- a/app/lib/methods/helpers/theme.ts
+++ b/app/lib/methods/helpers/theme.ts
@@ -1,4 +1,4 @@
-import { Appearance } from 'react-native';
+import { Appearance, StatusBar } from 'react-native';
 import changeNavigationBarColor from 'react-native-navigation-bar-color';
 import setRootViewColor from 'rn-root-view';
 
@@ -47,13 +47,14 @@ export const newThemeState = (prevState: { themePreferences: IThemePreference },
 	return { themePreferences, theme: getTheme(themePreferences) };
 };
 
-export const setNativeTheme = async (themePreferences: IThemePreference): Promise<void> => {
+export const setNativeTheme = (themePreferences: IThemePreference) => {
 	const theme = getTheme(themePreferences);
+	const isLightTheme = theme === 'light';
 	if (isAndroid) {
-		const iconsLight = theme === 'light';
 		try {
-			// The late param as default is true @ react-native-navigation-bar-color/src/index.js line 8
-			await changeNavigationBarColor(themes[theme].surfaceLight, iconsLight, true);
+			changeNavigationBarColor(themes[theme].surfaceLight, isLightTheme, true);
+			StatusBar.setBackgroundColor(themes[theme].surfaceNeutral);
+			StatusBar.setBarStyle(isLightTheme ? 'dark-content' : 'light-content', true);
 		} catch (error) {
 			// Do nothing
 		}
@@ -77,6 +78,5 @@ export const subscribeTheme = (themePreferences: IThemePreference, setTheme: ()
 		// unsubscribe appearance changes when automatic was disabled
 		unsubscribeTheme();
 	}
-	// set native components theme
 	setNativeTheme(themePreferences);
 };
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 64b622c73b..1c45c18b3f 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1292,10 +1292,11 @@ PODS:
     - ReactCommon/turbomodule/core
   - RNRootView (1.0.3):
     - React
-  - RNScreens (3.29.0):
+  - RNScreens (3.31.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
+    - React-RCTImage
   - RNSVG (13.8.0):
     - React-Core
   - RNVectorIcons (9.2.0):
@@ -1768,7 +1769,7 @@ SPEC CHECKSUMS:
   RNNotifee: 8e2d3df3f0e9ce8f5d1fe4c967431138190b6175
   RNReanimated: 8a4d86eb951a4a99d8e86266dc71d7735c0c30a9
   RNRootView: 895a4813dedeaca82db2fa868ca1c333d790e494
-  RNScreens: 17e2f657f1b09a71ec3c821368a04acbb7ebcb46
+  RNScreens: 134a7511b12b8eb440b87aac21e36a71295d6024
   RNSVG: c1e76b81c76cdcd34b4e1188852892dc280eb902
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
   SDWebImage: 750adf017a315a280c60fde706ab1e552a3ae4e9
diff --git a/package.json b/package.json
index 52b9945c05..be758f2ae1 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
 		"react-native-mime-types": "2.3.0",
 		"react-native-mmkv-storage": "0.9.1",
 		"react-native-modal": "13.0.1",
-		"react-native-navigation-bar-color": "2.0.1",
+		"react-native-navigation-bar-color": "^2.0.2",
 		"react-native-notifications": "5.1.0",
 		"react-native-notifier": "1.6.1",
 		"react-native-picker-select": "9.0.1",
@@ -117,7 +117,7 @@
 		"react-native-reanimated": "3.8.1",
 		"react-native-restart": "0.0.22",
 		"react-native-safe-area-context": "3.2.0",
-		"react-native-screens": "3.29.0",
+		"react-native-screens": "3.31.1",
 		"react-native-scrollable-tab-view": "ptomasroos/react-native-scrollable-tab-view",
 		"react-native-simple-crypto": "RocketChat/react-native-simple-crypto#fix.6.1.0",
 		"react-native-skeleton-placeholder": "5.2.4",
diff --git a/patches/react-native-navigation-bar-color+2.0.1.patch b/patches/react-native-navigation-bar-color+2.0.1.patch
deleted file mode 100644
index 9dc5546df3..0000000000
--- a/patches/react-native-navigation-bar-color+2.0.1.patch
+++ /dev/null
@@ -1,13 +0,0 @@
-diff --git a/node_modules/react-native-navigation-bar-color/src/index.js b/node_modules/react-native-navigation-bar-color/src/index.js
-index eeab32f..d4d8a2c 100644
---- a/node_modules/react-native-navigation-bar-color/src/index.js
-+++ b/node_modules/react-native-navigation-bar-color/src/index.js
-@@ -9,7 +9,7 @@ const changeNavigationBarColor = (
- ) => {
-   if (Platform.OS === 'android') {
-     const LightNav = light ? true : false;
--    NavigationBarColor.changeNavigationBarColor(color, LightNav, animated);
-+    return NavigationBarColor.changeNavigationBarColor(color, LightNav, animated);
-   }
- };
- const hideNavigationBar = () => {
diff --git a/patches/react-native-navigation-bar-color+2.0.2.patch b/patches/react-native-navigation-bar-color+2.0.2.patch
new file mode 100644
index 0000000000..ddd60b1066
--- /dev/null
+++ b/patches/react-native-navigation-bar-color+2.0.2.patch
@@ -0,0 +1,62 @@
+diff --git a/node_modules/react-native-navigation-bar-color/android/src/main/java/com/thebylito/navigationbarcolor/NavigationBarColorModule.java b/node_modules/react-native-navigation-bar-color/android/src/main/java/com/thebylito/navigationbarcolor/NavigationBarColorModule.java
+index b3edac7..23174bd 100644
+--- a/node_modules/react-native-navigation-bar-color/android/src/main/java/com/thebylito/navigationbarcolor/NavigationBarColorModule.java
++++ b/node_modules/react-native-navigation-bar-color/android/src/main/java/com/thebylito/navigationbarcolor/NavigationBarColorModule.java
+@@ -11,6 +11,7 @@ import android.app.Activity;
+ import android.view.View;
+ import android.view.Window;
+ import android.view.WindowManager;
++import android.view.WindowInsetsController;
+ import androidx.annotation.UiThread;
+ import com.facebook.react.bridge.Arguments;
+ import com.facebook.react.bridge.Promise;
+@@ -44,15 +45,28 @@ public class NavigationBarColorModule extends ReactContextBaseJavaModule {
+     }
+ 
+     public void setNavigationBarTheme(Activity activity, Boolean light) {
+-        if (activity != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+-            Window window = activity.getWindow();
+-            int flags = window.getDecorView().getSystemUiVisibility();
+-            if (light) {
+-                flags |= View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
+-            } else {
+-                flags &= ~View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
++        if (activity != null) {
++            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
++                Window window = activity.getWindow();
++                int flags = window.getDecorView().getSystemUiVisibility();
++                if (light) {
++                    flags |= View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
++                } else {
++                    flags &= ~View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
++                }
++                window.getDecorView().setSystemUiVisibility(flags);
++            }
++
++            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
++                int flag;
++                if (light) {
++                    flag = WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS;
++                } else {
++                    flag = 0;
++                }
++                final WindowInsetsController insetsController = activity.getWindow().getInsetsController();
++                insetsController.setSystemBarsAppearance(flag, WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS);
+             }
+-            window.getDecorView().setSystemUiVisibility(flags);
+         }
+     }
+ 
+diff --git a/node_modules/react-native-navigation-bar-color/src/index.js b/node_modules/react-native-navigation-bar-color/src/index.js
+index eeab32f..d4d8a2c 100644
+--- a/node_modules/react-native-navigation-bar-color/src/index.js
++++ b/node_modules/react-native-navigation-bar-color/src/index.js
+@@ -9,7 +9,7 @@ const changeNavigationBarColor = (
+ ) => {
+   if (Platform.OS === 'android') {
+     const LightNav = light ? true : false;
+-    NavigationBarColor.changeNavigationBarColor(color, LightNav, animated);
++    return NavigationBarColor.changeNavigationBarColor(color, LightNav, animated);
+   }
+ };
+ const hideNavigationBar = () => {
diff --git a/yarn.lock b/yarn.lock
index fc96da8c6d..7b5c7a6453 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11999,10 +11999,10 @@ react-native-modal@13.0.1:
     prop-types "^15.6.2"
     react-native-animatable "1.3.3"
 
-react-native-navigation-bar-color@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/react-native-navigation-bar-color/-/react-native-navigation-bar-color-2.0.1.tgz#ee2be25cc37105f7da355717b0a9a32c9c059ae6"
-  integrity sha512-1kE/oxWt+HYjRxdZdvke9tJ365xaee5n3+euOQA1En8zQuSbOxiE4SYEGM7TeaWnmLJ0l37mRnPHaB2H4mGh0A==
+react-native-navigation-bar-color@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-navigation-bar-color/-/react-native-navigation-bar-color-2.0.2.tgz#2e14ca79a656d81d5b4b7433ae43966ef5206444"
+  integrity sha512-ZmpLWRocyme1au11e5ZuecMS/UCi57nlzgnioi03Q6ERMbeUOqqbWgNBaNB7SsCeqBV6fZPjo3+A64zEIpzw4w==
 
 react-native-notifications@5.1.0:
   version "5.1.0"
@@ -12080,10 +12080,10 @@ react-native-safe-area-context@3.2.0:
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz#06113c6b208f982d68ab5c3cebd199ca93db6941"
   integrity sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA==
 
-react-native-screens@3.29.0:
-  version "3.29.0"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.29.0.tgz#1dee0326defbc1d4ef4e68287abb32a8e6b76b29"
-  integrity sha512-yB1GoAMamFAcYf4ku94uBPn0/ani9QG7NdI98beJ5cet2YFESYYzuEIuU+kt+CNRcO8qqKeugxlfgAa3HyTqlg==
+react-native-screens@3.31.1:
+  version "3.31.1"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.31.1.tgz#909a890f669e32b0fb1b1410278b71ad2f8238f6"
+  integrity sha512-8fRW362pfZ9y4rS8KY5P3DFScrmwo/vu1RrRMMx0PNHbeC9TLq0Kw1ubD83591yz64gLNHFLTVkTJmWeWCXKtQ==
   dependencies:
     react-freeze "^1.0.0"
     warn-once "^0.1.0"