From bb12cd2e6a1515f78b2925bcb30fcc48573c3cf3 Mon Sep 17 00:00:00 2001 From: Whitewater Date: Fri, 18 Apr 2025 13:37:53 +0800 Subject: [PATCH] fix(mobile): add react-native-edge-to-edge for status bar handling on Android (#3523) --- apps/mobile/app.config.ts | 11 +++++++++++ apps/mobile/package.json | 1 + pnpm-lock.yaml | 14 ++++++++++++++ 3 files changed, 26 insertions(+) diff --git a/apps/mobile/app.config.ts b/apps/mobile/app.config.ts index 292004202..4a4ddc0c4 100644 --- a/apps/mobile/app.config.ts +++ b/apps/mobile/app.config.ts @@ -160,6 +160,17 @@ export default ({ config }: ConfigContext): ExpoConfig => ({ enableBackgroundRemoteNotifications: true, }, ], + [ + // Fix status bar flash issue on Android + // Learn more: https://github.com/expo/expo/blob/main/packages/expo-status-bar/src/StatusBar.android.tsx#L21 + "react-native-edge-to-edge", + { + android: { + parentTheme: "Default", + enforceNavigationBarContrast: false, + }, + }, + ], ], experiments: { typedRoutes: true, diff --git a/apps/mobile/package.json b/apps/mobile/package.json index 1c8e6290d..68d962ec2 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -101,6 +101,7 @@ "react-native-awesome-slider": "2.9.0", "react-native-bouncy-checkbox": "4.1.2", "react-native-color-matrix-image-filters": "7.0.2", + "react-native-edge-to-edge": "1.6.0", "react-native-gesture-handler": "2.25.0", "react-native-image-colors": "2.4.0", "react-native-ios-context-menu": "3.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 90c4fb146..8aed2ce62 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1006,6 +1006,9 @@ importers: react-native-color-matrix-image-filters: specifier: 7.0.2 version: 7.0.2(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1) + react-native-edge-to-edge: + specifier: 1.6.0 + version: 1.6.0(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1) react-native-gesture-handler: specifier: 2.25.0 version: 2.25.0(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1) @@ -13173,6 +13176,12 @@ packages: react-native-svg: optional: true + react-native-edge-to-edge@1.6.0: + resolution: {integrity: sha512-2WCNdE3Qd6Fwg9+4BpbATUxCLcouF6YRY7K+J36KJ4l3y+tWN6XCqAC4DuoGblAAbb2sLkhEDp4FOlbOIot2Og==} + peerDependencies: + react: 18.3.1 + react-native: '*' + react-native-gesture-handler@2.25.0: resolution: {integrity: sha512-NPjJi6mislXxvjxQPU9IYwBjb1Uejp8GvAbE1Lhh+xMIMEvmgAvVIp5cz1P+xAbV6uYcRRArm278+tEInGOqWg==} peerDependencies: @@ -29873,6 +29882,11 @@ snapshots: transitivePeerDependencies: - supports-color + react-native-edge-to-edge@1.6.0(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1): + dependencies: + react: 18.3.1 + react-native: 0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5) + react-native-gesture-handler@2.25.0(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1): dependencies: '@egjs/hammerjs': 2.0.17