feat(suite-native): android edge to edge

trezor · Jan 13, 2025 · cd5e3c9 · cd5e3c9
1 parent cb71804
commit cd5e3c9
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 10 deletions.
diff --git a/suite-native/app/app.config.ts b/suite-native/app/app.config.ts
@@ -135,6 +135,7 @@ const getPlugins = (): ExpoPlugins => {
                 subdomains: '*',
             },
         ],
+        ['react-native-edge-to-edge'],
     ];
 
     return [

diff --git a/suite-native/app/package.json b/suite-native/app/package.json
@@ -109,6 +109,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",

diff --git a/suite-native/navigation/package.json b/suite-native/navigation/package.json
@@ -31,6 +31,7 @@
         "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",

diff --git a/suite-native/navigation/src/components/Screen.tsx b/suite-native/navigation/src/components/Screen.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useContext, ReactNode } from 'react';
-import { Platform, ScrollViewProps, StatusBar, View } from 'react-native';
+import { Platform, 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';
@@ -21,7 +22,6 @@ type ScreenProps = {
     footer?: ReactNode;
     subheader?: ReactNode;
     screenHeader?: ReactNode;
-    hasStatusBar?: boolean;
     isScrollable?: boolean;
     backgroundColor?: Color;
     noHorizontalPadding?: boolean;
@@ -97,7 +97,6 @@ export const Screen = ({
     refreshControl,
     keyboardDismissMode,
     isScrollable = true,
-    hasStatusBar = true,
     backgroundColor = 'backgroundSurfaceElevation0',
     noHorizontalPadding = false,
     noBottomPadding = false,
@@ -114,7 +113,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);
 
@@ -141,12 +140,7 @@ export const Screen = ({
             })}
             testID={`@screen/${name}`}
         >
-            <StatusBar
-                barStyle={barStyle}
-                hidden={!hasStatusBar}
-                translucent={false}
-                backgroundColor={backgroundCSSColor}
-            />
+            <SystemBars style={systemBarsStyle} />
             {screenHeader}
             <ScreenContentWrapper
                 isScrollable={isScrollable}

diff --git a/yarn.lock b/yarn.lock
@@ -10041,6 +10041,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"
@@ -10940,6 +10941,7 @@ __metadata:
     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"
@@ -35999,6 +36001,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"
-Original file line number
+Diff line change
@@ Expand Up / @@ -135,6 +135,7 @@ const getPlugins = (): ExpoPlugins => { @@
                     subdomains: '*',
                 },
             ],
+            ['react-native-edge-to-edge'],
         ];
         return [
@@ Expand Down @@