fix navigation bar color

Emurgo · Oct 23, 2024 · ae133ca · ae133ca
1 parent 56ccce9
commit ae133ca
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"