fix(suite-native): android button navigation bar colors

Author: PeKne

scripts/list-outdated-dependencies/mobile-dependencies.txt

@@ -44,6 +44,7 @@ expo-haptics
 expo-image
 expo-linear-gradient
 expo-local-authentication
+expo-navigation-bar
 expo-secure-store
 expo-splash-screen
 expo-status-bar

suite-native/navigation/package.json

@@ -27,6 +27,7 @@
         "@trezor/styles": "workspace:*",
         "@trezor/theme": "workspace:*",
         "expo-linking": "^7.0.2",
+        "expo-navigation-bar": "^4.0.2",
         "expo-system-ui": "^4.0.2",
         "react": "18.2.0",
         "react-native": "0.76.1",

suite-native/navigation/src/components/Screen.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useContext, ReactNode } from 'react';
-import { ScrollViewProps, View } from 'react-native';
+import { ScrollViewProps, View, Platform } from 'react-native';
 import { EdgeInsets } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 import { SystemBars, SystemBarStyle } from 'react-native-edge-to-edge';
 
 import * as SystemUI from 'expo-system-ui';
+import * as NavigationBar from 'expo-navigation-bar';
 import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';
-import { useRoute } from '@react-navigation/native';
+import { useIsFocused, useRoute } from '@react-navigation/native';
 
 import { useOfflineBannerAwareSafeAreaInsets } from '@suite-native/connection-status';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
@@ -114,12 +115,23 @@ export const Screen = ({
 
     const isMessageBannerDisplayed = useSelector(selectIsAnyBannerMessageActive);
 
+    const isFocused = useIsFocused();
     const { name } = useRoute();
 
     useEffect(() => {
-        // this prevents some weird flashing of splash screen on Android during screen transitions
-        SystemUI.setBackgroundColorAsync(backgroundCSSColor);
-    }, [backgroundCSSColor]);
+        if (isFocused) {
+            // this prevents some weird flashing of splash screen on Android during screen transitions
+            SystemUI.setBackgroundColorAsync(backgroundCSSColor);
+
+            // change colors of button navigation bar on Android
+            if (Platform.OS === 'android') {
+                NavigationBar.setBackgroundColorAsync(backgroundCSSColor);
+                NavigationBar.setButtonStyleAsync(
+                    isDarkColor(backgroundCSSColor) ? 'light' : 'dark',
+                );
+            }
+        }
+    }, [backgroundCSSColor, isDarkColor, isFocused]);
 
     return (
         <View

yarn.lock

@@ -7107,6 +7107,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native/normalize-colors@npm:0.76.6":
+  version: 0.76.6
+  resolution: "@react-native/normalize-colors@npm:0.76.6"
+  checksum: 10/0e28cbdecbba96bd3e26a537623f68b77a77fda481b60dfa11d2a6e532aaae414d07e422d61465e40261d92a835d2f8342780cbe904a19c57e1fe223e4dc4a24
+  languageName: node
+  linkType: hard
+
 "@react-native/virtualized-lists@npm:0.76.1":
   version: 0.76.1
   resolution: "@react-native/virtualized-lists@npm:0.76.1"
@@ -10951,6 +10958,7 @@ __metadata:
     "@trezor/styles": "workspace:*"
     "@trezor/theme": "workspace:*"
     expo-linking: "npm:^7.0.2"
+    expo-navigation-bar: "npm:^4.0.2"
     expo-system-ui: "npm:^4.0.2"
     react: "npm:18.2.0"
     react-native: "npm:0.76.1"
@@ -23144,6 +23152,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-navigation-bar@npm:^4.0.2":
+  version: 4.0.7
+  resolution: "expo-navigation-bar@npm:4.0.7"
+  dependencies:
+    "@react-native/normalize-colors": "npm:0.76.6"
+    debug: "npm:^4.3.2"
+  peerDependencies:
+    expo: "*"
+    react: "*"
+    react-native: "*"
+  checksum: 10/50af462efb6c4ecc5d4a515e795f45c65ad8d87579a0ecaefe7c97e7f5d520eeba79ae1d1e4391652e4bf523da18f4760f8727ca3aa8c09b6e976320701673eb
+  languageName: node
+  linkType: hard
+
 "expo-secure-store@npm:^14.0.0":
   version: 14.0.0
   resolution: "expo-secure-store@npm:14.0.0"