feat(suite-native): android edge to edge screen background

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

@@ -44,7 +44,6 @@ expo-haptics
 expo-image
 expo-linear-gradient
 expo-local-authentication
-expo-navigation-bar
 expo-secure-store
 expo-splash-screen
 expo-status-bar
@@ -60,6 +59,7 @@ react-native-restart
 react-native-safe-area-context
 react-native-screens
 react-native-svg
+react-native-edge-to-edge
 react-qr-code
 redux-devtools-expo-dev-plugin
 redux-persist

suite-native/app/app.config.ts

@@ -135,6 +135,7 @@ const getPlugins = (): ExpoPlugins => {
                 subdomains: '*',
             },
         ],
+        ['react-native-edge-to-edge'],
     ];
 
     return [

suite-native/app/package.json

@@ -97,7 +97,6 @@
         "expo-linear-gradient": "^14.0.1",
         "expo-linking": "^7.0.2",
         "expo-localization": "^16.0.0",
-        "expo-navigation-bar": "^4.0.2",
         "expo-secure-store": "^14.0.0",
         "expo-splash-screen": "0.29.16",
         "expo-status-bar": "^2.0.0",
@@ -109,6 +108,7 @@
         "react": "18.2.0",
         "react-intl": "^6.6.8",
         "react-native": "0.76.1",
+        "react-native-edge-to-edge": "^1.3.1",
         "react-native-gesture-handler": "^2.21.0",
         "react-native-keyboard-aware-scroll-view": "0.9.5",
         "react-native-mmkv": "2.12.2",

suite-native/navigation/package.json

@@ -27,10 +27,10 @@
         "@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",
+        "react-native-edge-to-edge": "^1.3.1",
         "react-native-keyboard-aware-scroll-view": "0.9.5",
         "react-native-reanimated": "3.16.1",
         "react-native-safe-area-context": "^4.14.0",

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

@@ -1,10 +1,10 @@
 import { useEffect, useContext, ReactNode } from 'react';
-import { Platform, ScrollViewProps, StatusBar, View } from 'react-native';
+import { ScrollViewProps, View } 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';
 
@@ -21,7 +21,6 @@ type ScreenProps = {
     footer?: ReactNode;
     subheader?: ReactNode;
     screenHeader?: ReactNode;
-    hasStatusBar?: boolean;
     isScrollable?: boolean;
     backgroundColor?: Color;
     noHorizontalPadding?: boolean;
@@ -97,7 +96,6 @@ export const Screen = ({
     refreshControl,
     keyboardDismissMode,
     isScrollable = true,
-    hasStatusBar = true,
     backgroundColor = 'backgroundSurfaceElevation0',
     noHorizontalPadding = false,
     noBottomPadding = false,
@@ -114,7 +112,7 @@ export const Screen = ({
     const bottomPadding = noBottomPadding ? 0 : spacings.sp16;
     const hasBottomPadding = !useContext(BottomTabBarHeightContext) && hasBottomInset;
     const backgroundCSSColor = colors[backgroundColor];
-    const barStyle = isDarkColor(backgroundCSSColor) ? 'light-content' : 'dark-content';
+    const systemBarsStyle: SystemBarStyle = isDarkColor(backgroundCSSColor) ? 'light' : 'dark';
 
     const isMessageBannerDisplayed = useSelector(selectIsAnyBannerMessageActive);
 
@@ -123,12 +121,7 @@ export const Screen = ({
     useEffect(() => {
         // this prevents some weird flashing of splash screen on Android during screen transitions
         SystemUI.setBackgroundColorAsync(backgroundCSSColor);
-
-        if (Platform.OS === 'android') {
-            NavigationBar.setBackgroundColorAsync(backgroundCSSColor);
-            NavigationBar.setButtonStyleAsync(isDarkColor(backgroundCSSColor) ? 'light' : 'dark');
-        }
-    }, [backgroundCSSColor, isDarkColor]);
+    }, [backgroundCSSColor]);
 
     return (
         <View
@@ -141,12 +134,7 @@ export const Screen = ({
             })}
             testID={`@screen/${name}`}
         >
-            <StatusBar
-                barStyle={barStyle}
-                hidden={!hasStatusBar}
-                translucent={false}
-                backgroundColor={backgroundCSSColor}
-            />
+            <SystemBars style={systemBarsStyle} />
             {screenHeader}
             <ScreenContentWrapper
                 isScrollable={isScrollable}

yarn.lock

@@ -10026,7 +10026,6 @@ __metadata:
     expo-linear-gradient: "npm:^14.0.1"
     expo-linking: "npm:^7.0.2"
     expo-localization: "npm:^16.0.0"
-    expo-navigation-bar: "npm:^4.0.2"
     expo-secure-store: "npm:^14.0.0"
     expo-splash-screen: "npm:0.29.16"
     expo-status-bar: "npm:^2.0.0"
@@ -10041,6 +10040,7 @@ __metadata:
     react: "npm:18.2.0"
     react-intl: "npm:^6.6.8"
     react-native: "npm:0.76.1"
+    react-native-edge-to-edge: "npm:^1.3.1"
     react-native-gesture-handler: "npm:^2.21.0"
     react-native-keyboard-aware-scroll-view: "npm:0.9.5"
     react-native-mmkv: "npm:2.12.2"
@@ -10936,10 +10936,10 @@ __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"
+    react-native-edge-to-edge: "npm:^1.3.1"
     react-native-keyboard-aware-scroll-view: "npm:0.9.5"
     react-native-reanimated: "npm:3.16.1"
     react-native-safe-area-context: "npm:^4.14.0"
@@ -23121,20 +23121,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expo-navigation-bar@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "expo-navigation-bar@npm:4.0.2"
-  dependencies:
-    "@react-native/normalize-colors": "npm:0.76.1"
-    debug: "npm:^4.3.2"
-  peerDependencies:
-    expo: "*"
-    react: "*"
-    react-native: "*"
-  checksum: 10/c67d23248452b5ece099f984666d363273aa40b1f9e11c1a9228e1f3091ba8936b4241e00610d62abe54e8c01ffb839efa6772dd8963b92974634c8178ef9082
-  languageName: node
-  linkType: hard
-
 "expo-secure-store@npm:^14.0.0":
   version: 14.0.0
   resolution: "expo-secure-store@npm:14.0.0"
@@ -35999,6 +35985,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-edge-to-edge@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "react-native-edge-to-edge@npm:1.3.1"
+  peerDependencies:
+    react: ">=18.2.0"
+    react-native: ">=0.74.0"
+  checksum: 10/0c8d191c5bc894dcdfe9d63e5c3faf488eaa43be631c1e4ec4ed2d0aa5a4b3cb73b061fa52400fd2f27fb287e74ba875666d5a9bb6bc2169a09201a4cf191e3d
+  languageName: node
+  linkType: hard
+
 "react-native-gesture-handler@npm:^2.21.0":
   version: 2.21.0
   resolution: "react-native-gesture-handler@npm:2.21.0"