From ae133ca59a09c9a9aa5804c1231d30792967b840 Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Wed, 23 Oct 2024 10:54:46 +0100
Subject: [PATCH] fix navigation bar color

---
 .../android/app/src/dev/res/values/styles.xml            | 2 --
 .../android/app/src/nightly/res/values/styles.xml        | 2 --
 .../android/app/src/production/res/values/styles.xml     | 2 --
 apps/wallet-mobile/package.json                          | 1 +
 apps/wallet-mobile/src/AppNavigator.tsx                  | 9 ++++++++-
 yarn.lock                                                | 5 +++++
 6 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/wallet-mobile/android/app/src/dev/res/values/styles.xml b/apps/wallet-mobile/android/app/src/dev/res/values/styles.xml
index 2805f1f84b..cf13b945bd 100644
--- a/apps/wallet-mobile/android/app/src/dev/res/values/styles.xml
+++ b/apps/wallet-mobile/android/app/src/dev/res/values/styles.xml
@@ -5,8 +5,6 @@
         <!-- Customize your theme here. -->
         <item name="android:forceDarkAllowed">false</item>
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-        <item name="android:navigationBarColor">@android:color/transparent</item>
-        <item name="android:enforceNavigationBarContrast">false</item>
     </style>
 
     <!-- react-native-bootsplash -->
diff --git a/apps/wallet-mobile/android/app/src/nightly/res/values/styles.xml b/apps/wallet-mobile/android/app/src/nightly/res/values/styles.xml
index 2805f1f84b..cf13b945bd 100644
--- a/apps/wallet-mobile/android/app/src/nightly/res/values/styles.xml
+++ b/apps/wallet-mobile/android/app/src/nightly/res/values/styles.xml
@@ -5,8 +5,6 @@
         <!-- Customize your theme here. -->
         <item name="android:forceDarkAllowed">false</item>
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-        <item name="android:navigationBarColor">@android:color/transparent</item>
-        <item name="android:enforceNavigationBarContrast">false</item>
     </style>
 
     <!-- react-native-bootsplash -->
diff --git a/apps/wallet-mobile/android/app/src/production/res/values/styles.xml b/apps/wallet-mobile/android/app/src/production/res/values/styles.xml
index 2805f1f84b..cf13b945bd 100644
--- a/apps/wallet-mobile/android/app/src/production/res/values/styles.xml
+++ b/apps/wallet-mobile/android/app/src/production/res/values/styles.xml
@@ -5,8 +5,6 @@
         <!-- Customize your theme here. -->
         <item name="android:forceDarkAllowed">false</item>
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-        <item name="android:navigationBarColor">@android:color/transparent</item>
-        <item name="android:enforceNavigationBarContrast">false</item>
     </style>
 
     <!-- react-native-bootsplash -->
diff --git a/apps/wallet-mobile/package.json b/apps/wallet-mobile/package.json
index 1fe22a621d..8866176202 100644
--- a/apps/wallet-mobile/package.json
+++ b/apps/wallet-mobile/package.json
@@ -193,6 +193,7 @@
     "react-native-skeleton-placeholder": "^5.2.0",
     "react-native-svg": "13.8.0",
     "react-native-svg-charts": "^5.4.0",
+    "react-native-system-navigation-bar": "^2.6.4",
     "react-native-tab-view": "^3.1.1",
     "react-native-timezone": "^2.3.0",
     "react-native-url-polyfill": "^2.0.0",
diff --git a/apps/wallet-mobile/src/AppNavigator.tsx b/apps/wallet-mobile/src/AppNavigator.tsx
index 69d986fd38..3446017811 100644
--- a/apps/wallet-mobile/src/AppNavigator.tsx
+++ b/apps/wallet-mobile/src/AppNavigator.tsx
@@ -38,6 +38,8 @@ import {useStatusBar} from './hooks/useStatusBar'
 import {agreementDate} from './kernel/config'
 import {AppRoutes, defaultStackNavigationOptions} from './kernel/navigation'
 import {WalletNavigator} from './WalletNavigator'
+import {useEffect} from 'react'
+import SystemNavigationBar from 'react-native-system-navigation-bar'
 
 const Stack = createStackNavigator<AppRoutes>()
 const navRef = React.createRef<NavigationContainerRef<ReactNavigation.RootParamList>>()
@@ -49,7 +51,12 @@ export const AppNavigator = () => {
   const [routeName, setRouteName] = React.useState<string>()
   useStatusBar(routeName)
   useHideScreenInAppSwitcher()
-  const {atoms, color} = useTheme()
+  const {atoms, color, colorScheme} = useTheme()
+
+  useEffect(() => {
+    const buttonsColor = colorScheme === 'default-dark' ? 'light' : 'dark'
+    SystemNavigationBar.setNavigationColor('transparent', buttonsColor, 'navigation')
+  }, [colorScheme])
 
   useAutoLogout()
 
diff --git a/yarn.lock b/yarn.lock
index 812aadb4f9..a34f886aa5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19546,6 +19546,11 @@ react-native-swipe-gestures@^1.0.5:
   resolved "https://registry.yarnpkg.com/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz#a172cb0f3e7478ccd681fd36b8bfbcdd098bde7c"
   integrity sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw==
 
+react-native-system-navigation-bar@^2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/react-native-system-navigation-bar/-/react-native-system-navigation-bar-2.6.4.tgz#34edee7051dea01531ff2be95dc14f9fa8a540b7"
+  integrity sha512-4pysgADW53PiuHv+2glzNLJnHSxqDszZvLoitLFI5os4D+gCDfxmR36VSET4EnXkzSf8X9mbeFkHYDypDHJyZA==
+
 react-native-tab-view@^3.1.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.5.2.tgz#2789b8af6148b16835869566bf13dc3b0e6c1b46"