[IOAPPX-463] Enable full support for edge-to-edge navigation on Android

android/app/src/main/java/it/pagopa/io/app/MainActivity.kt

@@ -5,6 +5,7 @@ import android.os.Build;
 import android.os.Bundle;
 
 import androidx.appcompat.app.AlertDialog;
+import androidx.core.view.WindowCompat;
 
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
@@ -30,6 +31,10 @@ class MainActivity : ReactActivity() {
 
   // https://github.com/crazycodeboy/react-native-splash-screen#third-stepplugin-configuration
     override fun onCreate(savedInstanceState: Bundle?) {
+        // Enable edge to edge support
+        // https://developer.android.com/develop/ui/views/layout/edge-to-edge?hl=it
+        WindowCompat.setDecorFitsSystemWindows(window, false)
+
         SplashScreen.show(this, R.style.SplashScreenTheme);
         // This is needed for react-native-screens to solve the issue described here:
         // https://github.com/software-mansion/react-native-screens/issues/17#issuecomment-424704633

android/app/src/main/res/layout/launch_screen.xml

@@ -4,7 +4,9 @@
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
-  android:background="@drawable/splash_bg">
+  android:background="@color/ic_launcher_background"
+  android:fitsSystemWindows="false"
+>
 
 
   <ImageView

android/app/src/main/res/values/styles.xml

@@ -2,16 +2,20 @@
 
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
-        <!-- Customize your theme here. -->
         <item name="android:windowIsTranslucent">true</item>
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <item name="android:forceDarkAllowed">false</item>
+
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+        <!-- Optional: set to transparent if your app is drawing behind the status bar. -->
+        <item name="android:statusBarColor">@android:color/transparent</item>
     </style>
 
     <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
-        <item name="android:statusBarColor">@color/primary</item>
-        <item name="android:windowTranslucentStatus">true</item>
-        <item name="android:windowTranslucentNavigation">true</item>
+        <item name="android:statusBarColor">@color/ic_launcher_background</item>
+        <item name="android:navigationBarColor">@color/ic_launcher_background</item>
+        <item name="android:windowLightStatusBar">false</item>
+        <item name="android:windowIsTranslucent">false</item>
         <item name="android:textColor">#FFFFFF</item>
     </style>
 

package.json

@@ -139,7 +139,7 @@
     "react-native-reanimated": "^3.15.0",
     "react-native-render-html": "^6.3.1",
     "react-native-responsive-screen": "^1.4.1",
-    "react-native-safe-area-context": "^4.10.5",
+    "react-native-safe-area-context": "^5.1.0",
     "react-native-screen-brightness": "^2.0.0-alpha",
     "react-native-screens": "^3.35.0",
     "react-native-share": "^10.2.1",

ts/RootContainer.tsx

@@ -27,7 +27,6 @@ import {
   preferredLanguageSelector
 } from "./store/reducers/persistedPreferences";
 import { GlobalState } from "./store/reducers/types";
-import customVariables from "./theme/variables";
 import { ReactNavigationInstrumentation } from "./App";
 
 type Props = ReturnType<typeof mapStateToProps> &
@@ -98,8 +97,9 @@ class RootContainer extends React.PureComponent<Props> {
     return (
       <>
         <StatusBar
+          translucent
           barStyle={"dark-content"}
-          backgroundColor={customVariables.androidStatusBarColor}
+          backgroundColor={"transparent"}
         />
         {Platform.OS === "android" && <FlagSecureComponent />}
 

ts/components/DebugInfoOverlay.tsx

@@ -8,8 +8,9 @@ import {
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { useState } from "react";
-import { Platform, Pressable, SafeAreaView, StyleSheet } from "react-native";
+import { Pressable, StyleSheet, View } from "react-native";
 import { widthPercentageToDP } from "react-native-responsive-screen";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { ReduxProps } from "../store/actions/types";
 import { useIOSelector } from "../store/hooks";
@@ -30,7 +31,7 @@ const debugItemBorderColor = hexToRgba(IOColors.black, 0.1);
 const styles = StyleSheet.create({
   versionContainer: {
     ...StyleSheet.absoluteFillObject,
-    top: Platform.OS === "android" ? 0 : -8,
+    // top: Platform.OS === "android" ? 0 : -8,
     justifyContent: "flex-start",
     alignItems: "center",
     zIndex: 1000
@@ -63,11 +64,16 @@ const DebugInfoOverlay: React.FunctionComponent<Props> = (props: Props) => {
   const [isDebugDataVisibile, showDebugData] = useState(false);
   const isPagoPATestEnabled = useIOSelector(isPagoPATestEnabledSelector);
 
+  const insets = useSafeAreaInsets();
+
   const appVersionText = `v. ${appVersion}`;
 
   return (
     <>
-      <SafeAreaView style={styles.versionContainer} pointerEvents="box-none">
+      <View
+        style={[styles.versionContainer, { paddingTop: insets.top }]}
+        pointerEvents="box-none"
+      >
         <VStack space={4} style={{ alignItems: "center" }}>
           <HStack space={4}>
             <Pressable
@@ -113,7 +119,7 @@ const DebugInfoOverlay: React.FunctionComponent<Props> = (props: Props) => {
             onPress={() => showDebugData(prevState => !prevState)}
           />
         </VStack>
-      </SafeAreaView>
+      </View>
       {isDebugDataVisibile && (
         <DebugDataOverlay onDismissed={() => showDebugData(false)} />
       )}

ts/components/ui/AppHeader.tsx

@@ -1,11 +1,10 @@
 /**
  * A customized Header component.
  */
+import { IOStyles, IOVisualCostants } from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { View, ColorValue, ViewProps, StatusBar } from "react-native";
+import { ColorValue, View, ViewProps } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { IOStyles, IOVisualCostants } from "@pagopa/io-app-design-system";
-import variables from "../../theme/variables";
 
 type Props = ViewProps & {
   backgroundColor?: ColorValue;
@@ -22,10 +21,6 @@ const AppHeader = (props: React.PropsWithChildren<Props>) => {
         backgroundColor: props.backgroundColor
       }}
     >
-      <StatusBar
-        barStyle={"dark-content"}
-        backgroundColor={variables.androidStatusBarColor}
-      />
       <View
         style={{
           ...IOStyles.row,

ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx

@@ -34,7 +34,6 @@ import { canShowHelpSelector } from "../../../store/reducers/assistanceTools";
 import { assistanceToolConfigSelector } from "../../../store/reducers/backendStatus/remoteConfig";
 import { currentRouteSelector } from "../../../store/reducers/navigation";
 import { FAQsCategoriesType } from "../../../utils/faq";
-import { isAndroid } from "../../../utils/platform";
 import {
   assistanceToolRemoteConfig,
   resetCustomFields
@@ -328,11 +327,7 @@ const BarcodeScanBaseScreenComponent = ({
       >
         <SafeAreaView>
           {/* This overrides BaseHeader status bar configuration */}
-          <FocusAwareStatusBar
-            barStyle={"light-content"}
-            backgroundColor={isAndroid ? IOColors["blueIO-850"] : "transparent"}
-            translucent={false}
-          />
+          <FocusAwareStatusBar barStyle={"light-content"} translucent={true} />
           {/* FIXME: replace with new header */}
           <BaseHeader
             hideSafeArea={true}

ts/features/barcode/screens/BarcodeScanScreen.tsx

@@ -1,15 +1,16 @@
 import {
   Divider,
+  IOToast,
   ListItemNav,
-  VSpacer,
-  IOToast
+  VSpacer
 } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import { Alert, View } from "react-native";
 import ReactNativeHapticFeedback, {
   HapticFeedbackTypes
 } from "react-native-haptic-feedback";
+import { useHardwareBackButton } from "../../../hooks/useHardwareBackButton";
 import { useOpenDeepLink } from "../../../hooks/useOpenDeepLink";
 import I18n from "../../../i18n";
 import { mixpanelTrack } from "../../../mixpanel";
@@ -24,7 +25,10 @@ import {
 } from "../../../store/reducers/backendStatus/remoteConfig";
 import { emptyContextualHelp } from "../../../utils/emptyContextualHelp";
 import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
+import { FCI_ROUTES } from "../../fci/navigation/routes";
 import { IdPayPaymentRoutes } from "../../idpay/payment/navigation/routes";
+import { PaymentsBarcodeRoutes } from "../../payments/barcode/navigation/routes";
+import { usePagoPaPayment } from "../../payments/checkout/hooks/usePagoPaPayment";
 import { PaymentsCheckoutRoutes } from "../../payments/checkout/navigation/routes";
 import * as analytics from "../analytics";
 import { BarcodeScanBaseScreenComponent } from "../components/BarcodeScanBaseScreenComponent";
@@ -40,10 +44,6 @@ import {
 } from "../types/IOBarcode";
 import { BarcodeFailure } from "../types/failure";
 import { getIOBarcodesByType } from "../utils/getBarcodesByType";
-import { PaymentsBarcodeRoutes } from "../../payments/barcode/navigation/routes";
-import { useHardwareBackButton } from "../../../hooks/useHardwareBackButton";
-import { usePagoPaPayment } from "../../payments/checkout/hooks/usePagoPaPayment";
-import { FCI_ROUTES } from "../../fci/navigation/routes";
 
 const BarcodeScanScreen = () => {
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();

ts/screens/modal/IdentificationModal.tsx

@@ -2,12 +2,14 @@ import {
   ButtonLink,
   ContentWrapper,
   H2,
+  IOColors,
   IOPictograms,
   IOStyles,
   IconButton,
   Pictogram,
   ToastNotification,
-  VSpacer
+  VSpacer,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
 import { Millisecond } from "@pagopa/ts-commons/lib/units";
 import * as O from "fp-ts/lib/Option";
@@ -19,14 +21,19 @@ import {
   Alert,
   ColorSchemeName,
   Modal,
-  Platform,
   StatusBar,
   StyleSheet,
   View
 } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import { useDispatch } from "react-redux";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useDispatch } from "react-redux";
+import { areTwoMinElapsedFromLastActivity } from "../../features/fastLogin/store/actions/sessionRefreshActions";
+import { refreshSessionToken } from "../../features/fastLogin/store/actions/tokenRefreshActions";
+import {
+  hasTwoMinutesElapsedSinceLastActivitySelector,
+  isFastLoginEnabledSelector
+} from "../../features/fastLogin/store/selectors";
 import I18n from "../../i18n";
 import {
   identificationCancel,
@@ -46,20 +53,13 @@ import {
 import { profileNameSelector } from "../../store/reducers/profile";
 import { setAccessibilityFocus } from "../../utils/accessibility";
 import { biometricAuthenticationRequest } from "../../utils/biometrics";
-import { useAppBackgroundAccentColorName } from "../../utils/hooks/theme";
 import { useBiometricType } from "../../utils/hooks/useBiometricType";
 import { usePrevious } from "../../utils/hooks/usePrevious";
 import {
   FAIL_ATTEMPTS_TO_SHOW_ALERT,
   IdentificationInstructionsComponent,
   getBiometryIconName
 } from "../../utils/identification";
-import {
-  hasTwoMinutesElapsedSinceLastActivitySelector,
-  isFastLoginEnabledSelector
-} from "../../features/fastLogin/store/selectors";
-import { refreshSessionToken } from "../../features/fastLogin/store/actions/tokenRefreshActions";
-import { areTwoMinElapsedFromLastActivity } from "../../features/fastLogin/store/actions/sessionRefreshActions";
 import { IdentificationLockModal } from "./IdentificationLockModal";
 import { IdentificationNumberPad } from "./components/IdentificationNumberPad";
 
@@ -71,14 +71,13 @@ const onRequestCloseHandler = () => undefined;
 // eslint-disable-next-line sonarjs/cognitive-complexity, complexity
 const IdentificationModal = () => {
   const [isBiometricLocked, setIsBiometricLocked] = useState(false);
+  const theme = useIOTheme();
   const showRetryText = useRef(false);
   const headerRef = useRef<View>(null);
   const errorStatusRef = useRef<View>(null);
   const colorScheme: ColorSchemeName = "light";
   const numberPadVariant = colorScheme ? "dark" : "light";
 
-  const blueColor = useAppBackgroundAccentColorName();
-
   const appState = useIOSelector(appCurrentStateSelector);
   const previousAppState = usePrevious(appState);
   const identificationProgressState = useIOSelector(progressSelector);
@@ -378,8 +377,13 @@ const IdentificationModal = () => {
       transparent
       onRequestClose={onRequestCloseHandler}
     >
-      {Platform.OS === "ios" && <StatusBar barStyle={"light-content"} />}
-      <View style={[styles.contentWrapper, { backgroundColor: blueColor }]}>
+      <StatusBar barStyle={"light-content"} translucent />
+      <View
+        style={[
+          styles.contentWrapper,
+          { backgroundColor: IOColors[theme["appBackground-accent"]] }
+        ]}
+      >
         {isValidatingTask && (
           <View
             accessible

yarn.lock

@@ -13708,7 +13708,7 @@ __metadata:
     react-native-reanimated: ^3.15.0
     react-native-render-html: ^6.3.1
     react-native-responsive-screen: ^1.4.1
-    react-native-safe-area-context: ^4.10.5
+    react-native-safe-area-context: ^5.1.0
     react-native-screen-brightness: ^2.0.0-alpha
     react-native-screens: ^3.35.0
     react-native-share: ^10.2.1
@@ -19242,13 +19242,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-safe-area-context@npm:^4.10.5":
-  version: 4.11.1
-  resolution: "react-native-safe-area-context@npm:4.11.1"
+"react-native-safe-area-context@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "react-native-safe-area-context@npm:5.1.0"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: fddb4c72c8ec404602317a3d52c555a5f4173dcb94d8403c8368fb8a556ad41741f87419e052fa26e55a80732abb144f16bb6475d808dff392da5480ff7ec813
+  checksum: b03663c8567f24ff9e0fd96f0b06b8b4e3aebb77dd93995cc661996aa6e70f8e96588e78006696277b7c213b65ac9515604d57bd0321b96e42b0a055b3b49f7e
   languageName: node
   linkType: hard