diff --git a/scripts/list-outdated-dependencies/mobile-dependencies.txt b/scripts/list-outdated-dependencies/mobile-dependencies.txt index 77b96a977fa..025a26043f6 100644 --- a/scripts/list-outdated-dependencies/mobile-dependencies.txt +++ b/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 diff --git a/suite-native/app/app.config.ts b/suite-native/app/app.config.ts index 6170b91f136..b8c1258a852 100644 --- 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 index f65d33e9f05..4196c60be4a 100644 --- a/suite-native/app/package.json +++ b/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", diff --git a/suite-native/navigation/package.json b/suite-native/navigation/package.json index fffa9dd7356..75d6c9196ba 100644 --- a/suite-native/navigation/package.json +++ b/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", diff --git a/suite-native/navigation/src/components/Screen.tsx b/suite-native/navigation/src/components/Screen.tsx index 3cd94fc95ee..7ec5e332f79 100644 --- a/suite-native/navigation/src/components/Screen.tsx +++ b/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 ( -