From cd0452c8dbcb6d8f353fe6dfe8171406190f52f8 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 13 Jan 2025 18:17:23 +0100
Subject: [PATCH 01/24] Update `react-native-safe-area-context`

---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 4f2bd6e7a6a..b54719c3dbf 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 71d23fe4ef2..3a4650554f7 100644
--- a/yarn.lock
+++ b/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
 

From b7c7ad2773cedd9d6c176739fe006463fc118e6d Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 14 Jan 2025 09:42:48 +0100
Subject: [PATCH 02/24] Enable edge-to-edge navigation, fix BarcodeScanScreen

---
 .../java/it/pagopa/io/app/MainActivity.kt     |  5 +++++
 android/app/src/main/res/values/styles.xml    |  8 +++++++-
 ts/RootContainer.tsx                          |  4 ++--
 ts/components/DebugInfoOverlay.tsx            | 14 ++++++++++----
 ts/components/ui/AppHeader.tsx                |  4 ----
 .../BarcodeScanBaseScreenComponent.tsx        |  6 +-----
 .../barcode/screens/BarcodeScanScreen.tsx     | 19 ++++++++++++-------
 7 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/android/app/src/main/java/it/pagopa/io/app/MainActivity.kt b/android/app/src/main/java/it/pagopa/io/app/MainActivity.kt
index 664c16641c4..ae93d36660a 100644
--- a/android/app/src/main/java/it/pagopa/io/app/MainActivity.kt
+++ b/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
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index 4a97b5b6e19..a18bfe369f1 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -6,10 +6,16 @@
         <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>
+        <!-- Optional: set for a light status bar with dark content. -->
+        <item name="android:windowLightStatusBar">true</item>
     </style>
 
     <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
-        <item name="android:statusBarColor">@color/primary</item>
+        <item name="android:statusBarColor">@color/ic_launcher_background</item>
         <item name="android:windowTranslucentStatus">true</item>
         <item name="android:windowTranslucentNavigation">true</item>
         <item name="android:textColor">#FFFFFF</item>
diff --git a/ts/RootContainer.tsx b/ts/RootContainer.tsx
index 52e9434ce10..84d7f1a4a30 100644
--- a/ts/RootContainer.tsx
+++ b/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 />}
 
diff --git a/ts/components/DebugInfoOverlay.tsx b/ts/components/DebugInfoOverlay.tsx
index 377dc5c18a6..ae70a2d19a3 100644
--- a/ts/components/DebugInfoOverlay.tsx
+++ b/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)} />
       )}
diff --git a/ts/components/ui/AppHeader.tsx b/ts/components/ui/AppHeader.tsx
index 91191a01aea..36066f08dca 100644
--- a/ts/components/ui/AppHeader.tsx
+++ b/ts/components/ui/AppHeader.tsx
@@ -22,10 +22,6 @@ const AppHeader = (props: React.PropsWithChildren<Props>) => {
         backgroundColor: props.backgroundColor
       }}
     >
-      <StatusBar
-        barStyle={"dark-content"}
-        backgroundColor={variables.androidStatusBarColor}
-      />
       <View
         style={{
           ...IOStyles.row,
diff --git a/ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx b/ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx
index 5ac7e5dd407..fa2f4b5b5eb 100644
--- a/ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx
+++ b/ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx
@@ -328,11 +328,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}
diff --git a/ts/features/barcode/screens/BarcodeScanScreen.tsx b/ts/features/barcode/screens/BarcodeScanScreen.tsx
index 756027c2acd..9a835cf1643 100644
--- a/ts/features/barcode/screens/BarcodeScanScreen.tsx
+++ b/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 { Alert, StatusBar, 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>>();
@@ -236,6 +236,11 @@ const BarcodeScanScreen = () => {
 
   return (
     <>
+      {/* <StatusBar
+        translucent
+        backgroundColor="transparent"
+        barStyle="dark-content"
+      /> */}
       <BarcodeScanBaseScreenComponent
         barcodeFormats={barcodeFormats}
         barcodeTypes={barcodeTypes}

From b8445496dc943ed0bf314ef95a378b5e54d0bcbc Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 14 Jan 2025 09:47:00 +0100
Subject: [PATCH 03/24] Add translucent status bar to `IdentificationModal`

---
 ts/screens/modal/IdentificationModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/screens/modal/IdentificationModal.tsx b/ts/screens/modal/IdentificationModal.tsx
index 3ee3f0fc112..8aeb7d5c52c 100644
--- a/ts/screens/modal/IdentificationModal.tsx
+++ b/ts/screens/modal/IdentificationModal.tsx
@@ -378,7 +378,7 @@ const IdentificationModal = () => {
       transparent
       onRequestClose={onRequestCloseHandler}
     >
-      {Platform.OS === "ios" && <StatusBar barStyle={"light-content"} />}
+      <StatusBar barStyle={"light-content"} translucent />
       <View style={[styles.contentWrapper, { backgroundColor: blueColor }]}>
         {isValidatingTask && (
           <View

From 14f0be876bd171ca371b5581b681465487892389 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 14 Jan 2025 12:33:42 +0100
Subject: [PATCH 04/24] Remove translucent bars from the splash screen

---
 android/app/src/main/res/layout/launch_screen.xml | 4 +++-
 android/app/src/main/res/values/styles.xml        | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/android/app/src/main/res/layout/launch_screen.xml b/android/app/src/main/res/layout/launch_screen.xml
index 783da7e2ec8..3463dd48d6e 100644
--- a/android/app/src/main/res/layout/launch_screen.xml
+++ b/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
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index a18bfe369f1..ab52dbf53cd 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -2,7 +2,6 @@
 
     <!-- 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>
@@ -16,8 +15,9 @@
 
     <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
         <item name="android:statusBarColor">@color/ic_launcher_background</item>
-        <item name="android:windowTranslucentStatus">true</item>
-        <item name="android:windowTranslucentNavigation">true</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>
 

From 9d190065a313094e090fdb453c4860a82acfb146 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 14 Jan 2025 15:53:11 +0100
Subject: [PATCH 05/24] Slightly refactor `IdentificationModal`

---
 android/app/src/main/res/values/styles.xml |  2 --
 ts/screens/modal/IdentificationModal.tsx   | 30 ++++++++++++----------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index ab52dbf53cd..585ed609489 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -9,8 +9,6 @@
         <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>
-        <!-- Optional: set for a light status bar with dark content. -->
-        <item name="android:windowLightStatusBar">true</item>
     </style>
 
     <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
diff --git a/ts/screens/modal/IdentificationModal.tsx b/ts/screens/modal/IdentificationModal.tsx
index 8aeb7d5c52c..2898d8a5258 100644
--- a/ts/screens/modal/IdentificationModal.tsx
+++ b/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,7 +53,6 @@ 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 {
@@ -54,12 +60,6 @@ import {
   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);
@@ -379,7 +378,12 @@ const IdentificationModal = () => {
       onRequestClose={onRequestCloseHandler}
     >
       <StatusBar barStyle={"light-content"} translucent />
-      <View style={[styles.contentWrapper, { backgroundColor: blueColor }]}>
+      <View
+        style={[
+          styles.contentWrapper,
+          { backgroundColor: IOColors[theme["appBackground-accent"]] }
+        ]}
+      >
         {isValidatingTask && (
           <View
             accessible

From 7521524e8d2d94294e2e6d27bb72ea7358cd720b Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 14 Jan 2025 16:25:20 +0100
Subject: [PATCH 06/24] Fix `tsc` errors

---
 ts/components/ui/AppHeader.tsx                             | 5 ++---
 .../barcode/components/BarcodeScanBaseScreenComponent.tsx  | 1 -
 ts/features/barcode/screens/BarcodeScanScreen.tsx          | 7 +------
 3 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/ts/components/ui/AppHeader.tsx b/ts/components/ui/AppHeader.tsx
index 36066f08dca..ec830c6251f 100644
--- a/ts/components/ui/AppHeader.tsx
+++ b/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;
diff --git a/ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx b/ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx
index fa2f4b5b5eb..70781d9b401 100644
--- a/ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx
+++ b/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
diff --git a/ts/features/barcode/screens/BarcodeScanScreen.tsx b/ts/features/barcode/screens/BarcodeScanScreen.tsx
index 9a835cf1643..5d573c550e9 100644
--- a/ts/features/barcode/screens/BarcodeScanScreen.tsx
+++ b/ts/features/barcode/screens/BarcodeScanScreen.tsx
@@ -6,7 +6,7 @@ import {
 } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
 import React from "react";
-import { Alert, StatusBar, View } from "react-native";
+import { Alert, View } from "react-native";
 import ReactNativeHapticFeedback, {
   HapticFeedbackTypes
 } from "react-native-haptic-feedback";
@@ -236,11 +236,6 @@ const BarcodeScanScreen = () => {
 
   return (
     <>
-      {/* <StatusBar
-        translucent
-        backgroundColor="transparent"
-        barStyle="dark-content"
-      /> */}
       <BarcodeScanBaseScreenComponent
         barcodeFormats={barcodeFormats}
         barcodeTypes={barcodeTypes}

From a3dc9944a0ca0c6c6d7d49de7ccbed0f473e5937 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 21 Jan 2025 10:31:39 +0100
Subject: [PATCH 07/24] Restore negative margin in `DebugInfoOverlay`

---
 ios/Podfile.lock                   | 4 ++--
 ts/components/DebugInfoOverlay.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 6a3873f96b5..1856fc321f0 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1496,7 +1496,7 @@ PODS:
     - React-Core
   - react-native-render-html (6.3.1):
     - React-Core
-  - react-native-safe-area-context (4.11.1):
+  - react-native-safe-area-context (5.1.0):
     - React-Core
   - react-native-screen-brightness (2.0.0-alpha):
     - React
@@ -2532,7 +2532,7 @@ SPEC CHECKSUMS:
   react-native-pdf: c089a365d5d3b9614cce4a1cca429a71eb037a55
   react-native-pdf-thumbnail: b811c3676a0799d49e4885817ad79aa1d5c05168
   react-native-render-html: 05a7d4490ffc85c88094601207f3e48a90533476
-  react-native-safe-area-context: 17a482f540310e2209f884fd49472d9e1c0e73d6
+  react-native-safe-area-context: e134b241010ebe2aacdcea013565963d13826faa
   react-native-screen-brightness: 16a7b26d12d89654fc6a2e9ff1e55c1a4a10afcb
   react-native-skia: 3054428a8b83ff083d7036e2bd73cda213326b1a
   react-native-slider: 5299110eb902bc5169b1dd94192aa28e1bf15ad8
diff --git a/ts/components/DebugInfoOverlay.tsx b/ts/components/DebugInfoOverlay.tsx
index 6b059a11741..5f19843b402 100644
--- a/ts/components/DebugInfoOverlay.tsx
+++ b/ts/components/DebugInfoOverlay.tsx
@@ -8,7 +8,7 @@ import {
 } from "@pagopa/io-app-design-system";
 
 import { FunctionComponent, useState } from "react";
-import { Pressable, StyleSheet, View } from "react-native";
+import { Platform, 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";
@@ -31,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

From d1fbaa0766a32cf9e3cf2d23cb72032980028deb Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Wed, 28 May 2025 14:27:54 +0200
Subject: [PATCH 08/24] Add resolution to fix `yarn` errors

---
 package.json | 3 ++-
 yarn.lock    | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 5f46434e024..557d05584d2 100644
--- a/package.json
+++ b/package.json
@@ -272,7 +272,8 @@
     "@babel/preset-typescript": "^7.23.3",
     "@babel/plugin-transform-typescript": "^7.23.6",
     "@babel/plugin-syntax-typescript": "^7.23.3",
-    "@babel/types": "^7.23.6"
+    "@babel/types": "^7.23.6",
+    "react-native-safe-area-context": "5.4.1"
   },
   "react-native": {
     "path": "path-browserify",
diff --git a/yarn.lock b/yarn.lock
index c9bb48517dc..3b21a914d1b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19318,13 +19318,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.4.1":
+  version: 5.4.1
+  resolution: "react-native-safe-area-context@npm:5.4.1"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: b03663c8567f24ff9e0fd96f0b06b8b4e3aebb77dd93995cc661996aa6e70f8e96588e78006696277b7c213b65ac9515604d57bd0321b96e42b0a055b3b49f7e
+  checksum: 695e2a46a988725ac7a948e2a0f52fa91dbf6cfd29e7fd8c4b9e511022279cc7530fcec5dc6430415dcb5d137c593c53dd88249d41d1e049a254c32421a12d44
   languageName: node
   linkType: hard
 

From e89e239723e88a0d78c6d19bd62d93f35b12d3ae Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 30 May 2025 13:09:15 +0200
Subject: [PATCH 09/24] Avoid StatusBar overlap over BS backdrop

---
 ts/utils/hooks/bottomSheet.tsx | 93 +++++++++++++++++++---------------
 1 file changed, 52 insertions(+), 41 deletions(-)

diff --git a/ts/utils/hooks/bottomSheet.tsx b/ts/utils/hooks/bottomSheet.tsx
index a3d20863504..3764c7f7e1e 100644
--- a/ts/utils/hooks/bottomSheet.tsx
+++ b/ts/utils/hooks/bottomSheet.tsx
@@ -28,6 +28,7 @@ import {
   Dimensions,
   Modal,
   Platform,
+  StatusBar,
   StyleSheet,
   View
 } from "react-native";
@@ -158,48 +159,58 @@ export const useIOBottomSheetModal = ({
   }, []);
 
   const bottomSheet = (
-    <BottomSheetModal
-      style={styles.bottomSheet}
-      backgroundStyle={{ backgroundColor }}
-      footerComponent={(props: BottomSheetFooterProps) =>
-        footer ? (
-          <BottomSheetFooter
-            {...props}
-            // bottomInset={insets.bottom}
-            style={{
-              paddingBottom: insets.bottom,
-              backgroundColor: IOColors[theme["appBackground-primary"]]
-            }}
-          >
-            {footer}
-          </BottomSheetFooter>
-        ) : null
-      }
-      enableDynamicSizing={!snapPoint}
-      maxDynamicContentSize={screenHeight - insets.top}
-      snapPoints={snapPoint}
-      ref={bottomSheetModalRef}
-      handleComponent={_ => header}
-      backdropComponent={BackdropElement}
-      enableDismissOnClose={true}
-      accessible={false}
-      importantForAccessibility={"yes"}
-      onDismiss={handleDismiss}
-    >
-      {screenReaderEnabled && Platform.OS === "android" ? (
-        <Modal>
-          <View style={{ flex: 1 }} accessible={true}>
-            {header}
-            {bottomSheetContent}
-          </View>
-          {footer && (
-            <View style={{ paddingBottom: insets.bottom }}>{footer}</View>
-          )}
-        </Modal>
-      ) : (
-        bottomSheetContent
+    <>
+      {/*
+        This is necessary to avoid the status bar overlaying the backdrop
+        of the bottom sheet on Android devices. For reference, see:
+        https://github.com/gorhom/react-native-bottom-sheet/issues/813
+      */}
+      {Platform.OS === "android" && (
+        <StatusBar backgroundColor={"transparent"} translucent />
       )}
-    </BottomSheetModal>
+      <BottomSheetModal
+        style={styles.bottomSheet}
+        backgroundStyle={{ backgroundColor }}
+        footerComponent={(props: BottomSheetFooterProps) =>
+          footer ? (
+            <BottomSheetFooter
+              {...props}
+              // bottomInset={insets.bottom}
+              style={{
+                paddingBottom: insets.bottom,
+                backgroundColor: IOColors[theme["appBackground-primary"]]
+              }}
+            >
+              {footer}
+            </BottomSheetFooter>
+          ) : null
+        }
+        enableDynamicSizing={!snapPoint}
+        maxDynamicContentSize={screenHeight - insets.top}
+        snapPoints={snapPoint}
+        ref={bottomSheetModalRef}
+        handleComponent={_ => header}
+        backdropComponent={BackdropElement}
+        enableDismissOnClose={true}
+        accessible={false}
+        importantForAccessibility={"yes"}
+        onDismiss={handleDismiss}
+      >
+        {screenReaderEnabled && Platform.OS === "android" ? (
+          <Modal>
+            <View style={{ flex: 1 }} accessible={true}>
+              {header}
+              {bottomSheetContent}
+            </View>
+            {footer && (
+              <View style={{ paddingBottom: insets.bottom }}>{footer}</View>
+            )}
+          </Modal>
+        ) : (
+          bottomSheetContent
+        )}
+      </BottomSheetModal>
+    </>
   );
   return { present, dismiss: dismissAll, bottomSheet };
 };

From a75d874dffa703dffd3ca55be19fa953e70f3011 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 30 May 2025 13:24:57 +0200
Subject: [PATCH 10/24] Add `useFooterActionsMargin` in the `LandingScreen`

---
 .../login/landing/screens/LandingScreen.tsx   | 105 +++++++++---------
 1 file changed, 54 insertions(+), 51 deletions(-)

diff --git a/ts/features/authentication/login/landing/screens/LandingScreen.tsx b/ts/features/authentication/login/landing/screens/LandingScreen.tsx
index 508f197d672..7f5159f4277 100644
--- a/ts/features/authentication/login/landing/screens/LandingScreen.tsx
+++ b/ts/features/authentication/login/landing/screens/LandingScreen.tsx
@@ -33,7 +33,6 @@ import { useHeaderSecondLevel } from "../../../../../hooks/useHeaderSecondLevel"
 import I18n from "../../../../../i18n";
 import { mixpanelTrack } from "../../../../../mixpanel";
 import { useIONavigation } from "../../../../../navigation/params/AppParamsList";
-import { sessionExpired } from "../../../common/store/actions";
 import {
   useIODispatch,
   useIOSelector,
@@ -56,7 +55,15 @@ import {
 } from "../../../common/analytics";
 import { Carousel } from "../../../common/components/Carousel";
 import { AUTHENTICATION_ROUTES } from "../../../common/navigation/routes";
+import { sessionExpired } from "../../../common/store/actions";
 
+import { useFooterActionsMargin } from "../../../../../hooks/useFooterActionsMargin";
+import { startupLoadSuccess } from "../../../../../store/actions/startup";
+import { StartupStatusEnum } from "../../../../../store/reducers/startup";
+import { identificationRequest } from "../../../../identification/store/actions";
+import { setOfflineAccessReason } from "../../../../ingress/store/actions";
+import { OfflineAccessReasonEnum } from "../../../../ingress/store/reducer";
+import { itwOfflineAccessAvailableSelector } from "../../../../itwallet/common/store/selectors";
 import { isSessionExpiredSelector } from "../../../common/store/selectors";
 import { cieIDDisableTourGuide } from "../../cie/store/actions";
 import {
@@ -67,12 +74,6 @@ import { SpidLevel } from "../../cie/utils";
 import useNavigateToLoginMethod from "../../hooks/useNavigateToLoginMethod";
 import { LandingSessionExpiredComponent } from "../components/LandingSessionExpiredComponent";
 import { useInfoBottomsheetComponent } from "../hooks/useInfoBottomsheetComponent";
-import { setOfflineAccessReason } from "../../../../ingress/store/actions";
-import { OfflineAccessReasonEnum } from "../../../../ingress/store/reducer";
-import { identificationRequest } from "../../../../identification/store/actions";
-import { startupLoadSuccess } from "../../../../../store/actions/startup";
-import { StartupStatusEnum } from "../../../../../store/reducers/startup";
-import { itwOfflineAccessAvailableSelector } from "../../../../itwallet/common/store/selectors";
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   title: "authentication.landing.contextualHelpTitle",
@@ -86,7 +87,8 @@ const SPID_LEVEL: SpidLevel = "SpidL2";
 export const LandingScreen = () => {
   const { error } = useIOToast();
   const store = useIOStore();
-  const insets = useSafeAreaInsets();
+  const { bottomMargin: paddingBottom } = useFooterActionsMargin();
+
   const isCieIDTourGuideEnabled = useIOSelector(
     isCieIDTourGuideEnabledSelector
   );
@@ -388,53 +390,54 @@ export const LandingScreen = () => {
 
         <SectionStatusComponent sectionKey={"login"} />
         <ContentWrapper>
-          <Tooltip
-            closeIconAccessibilityLabel={I18n.t("global.buttons.close")}
-            isVisible={isCieIDTourGuideEnabled}
-            onClose={() => dispatch(cieIDDisableTourGuide())}
-            title={I18n.t("authentication.landing.tour_guide.title")}
-            content={I18n.t("authentication.landing.tour_guide.content")}
-          >
+          <View style={{ paddingBottom }}>
+            <Tooltip
+              closeIconAccessibilityLabel={I18n.t("global.buttons.close")}
+              isVisible={isCieIDTourGuideEnabled}
+              onClose={() => dispatch(cieIDDisableTourGuide())}
+              title={I18n.t("authentication.landing.tour_guide.title")}
+              content={I18n.t("authentication.landing.tour_guide.content")}
+            >
+              <IOButton
+                fullWidth
+                variant="solid"
+                color={isCieUatEnabled ? "danger" : "primary"}
+                label={I18n.t("authentication.landing.loginCie")}
+                icon="cieLetter"
+                onPress={navigateToCiePinScreen}
+                testID="landing-button-login-cie"
+              />
+            </Tooltip>
+            <VSpacer size={SPACE_BETWEEN_BUTTONS} />
             <IOButton
               fullWidth
               variant="solid"
-              color={isCieUatEnabled ? "danger" : "primary"}
-              label={I18n.t("authentication.landing.loginCie")}
-              icon="cieLetter"
-              onPress={navigateToCiePinScreen}
-              testID="landing-button-login-cie"
+              color="primary"
+              // if CIE is not supported, since the new DS has not a
+              // "semi-enabled" state, we leave the button enabled
+              // but we navigate to the CIE unsupported info screen.
+              label={I18n.t("authentication.landing.loginSpid")}
+              icon="spid"
+              onPress={() => {
+                void trackSpidLoginSelected();
+                navigateToIdpSelection();
+              }}
+              testID="landing-button-login-spid"
             />
-          </Tooltip>
-          <VSpacer size={SPACE_BETWEEN_BUTTONS} />
-          <IOButton
-            fullWidth
-            variant="solid"
-            color="primary"
-            // if CIE is not supported, since the new DS has not a
-            // "semi-enabled" state, we leave the button enabled
-            // but we navigate to the CIE unsupported info screen.
-            label={I18n.t("authentication.landing.loginSpid")}
-            icon="spid"
-            onPress={() => {
-              void trackSpidLoginSelected();
-              navigateToIdpSelection();
-            }}
-            testID="landing-button-login-spid"
-          />
-          <VSpacer size={SPACE_AROUND_BUTTON_LINK} />
-          {itwOfflineAccessAvailable && isSessionExpired && (
-            <View style={{ alignSelf: "center" }}>
-              <IOButton
-                variant="link"
-                accessibilityRole="link"
-                color="primary"
-                label={I18n.t("authentication.landing.show_wallet")}
-                onPress={navigateToWallet}
-              />
-              <VSpacer size={SPACE_AROUND_BUTTON_LINK} />
-            </View>
-          )}
-          {insets.bottom !== 0 && <VSpacer size={SPACE_AROUND_BUTTON_LINK} />}
+            <VSpacer size={SPACE_AROUND_BUTTON_LINK} />
+            {itwOfflineAccessAvailable && isSessionExpired && (
+              <View style={{ alignSelf: "center" }}>
+                <IOButton
+                  variant="link"
+                  accessibilityRole="link"
+                  color="primary"
+                  label={I18n.t("authentication.landing.show_wallet")}
+                  onPress={navigateToWallet}
+                />
+                <VSpacer size={SPACE_AROUND_BUTTON_LINK} />
+              </View>
+            )}
+          </View>
           {bottomSheet}
           {infoBottomsheetComponent}
         </ContentWrapper>

From f58b679d248ddb365c4dd070c7efff13bda89253 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 30 May 2025 13:25:58 +0200
Subject: [PATCH 11/24] Remove unused import

---
 .../authentication/login/landing/screens/LandingScreen.tsx       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ts/features/authentication/login/landing/screens/LandingScreen.tsx b/ts/features/authentication/login/landing/screens/LandingScreen.tsx
index 7f5159f4277..2c349538e1e 100644
--- a/ts/features/authentication/login/landing/screens/LandingScreen.tsx
+++ b/ts/features/authentication/login/landing/screens/LandingScreen.tsx
@@ -23,7 +23,6 @@ import {
   useState
 } from "react";
 import { Alert, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { LandingCardComponent } from "../../../../../components/LandingCardComponent";
 import LoadingSpinnerOverlay from "../../../../../components/LoadingSpinnerOverlay";
 import SectionStatusComponent from "../../../../../components/SectionStatus";

From 1106f5b244472e3b3d7982526c88a9f005286f1d Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 30 May 2025 13:33:19 +0200
Subject: [PATCH 12/24] Update `react-native-safe-area-context` to `5.4.1`

---
 package.json |  5 ++---
 yarn.lock    | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e47300257e2..8a946313488 100644
--- a/package.json
+++ b/package.json
@@ -143,7 +143,7 @@
     "react-native-reanimated": "3.16.7",
     "react-native-render-html": "^6.3.1",
     "react-native-responsive-screen": "^1.4.1",
-    "react-native-safe-area-context": "^5.1.0",
+    "react-native-safe-area-context": "^5.4.1",
     "react-native-screen-brightness": "^2.0.0-alpha",
     "react-native-screens": "^3.35.0",
     "react-native-screenshot-prevent": "^1.2.1",
@@ -272,8 +272,7 @@
     "@babel/preset-typescript": "^7.23.3",
     "@babel/plugin-transform-typescript": "^7.23.6",
     "@babel/plugin-syntax-typescript": "^7.23.3",
-    "@babel/types": "^7.23.6",
-    "react-native-safe-area-context": "5.4.1"
+    "@babel/types": "^7.23.6"
   },
   "react-native": {
     "path": "path-browserify",
diff --git a/yarn.lock b/yarn.lock
index 3b21a914d1b..4ef02b79d4d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13817,7 +13817,7 @@ __metadata:
     react-native-reanimated: 3.16.7
     react-native-render-html: ^6.3.1
     react-native-responsive-screen: ^1.4.1
-    react-native-safe-area-context: ^5.1.0
+    react-native-safe-area-context: ^5.4.1
     react-native-screen-brightness: ^2.0.0-alpha
     react-native-screens: ^3.35.0
     react-native-screenshot-prevent: ^1.2.1
@@ -19318,7 +19318,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-safe-area-context@npm:5.4.1":
+"react-native-safe-area-context@npm:^4.10.5":
+  version: 4.14.1
+  resolution: "react-native-safe-area-context@npm:4.14.1"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: acf94ea2a30a3ec5594b467f8e0942ac48c10cbb5d34d16beba33cc0052f7c82dfd6ace754fa55f41d55143f134d3d3fa908eaf4cc9dec5743d6c4483b23520a
+  languageName: node
+  linkType: hard
+
+"react-native-safe-area-context@npm:^5.4.1":
   version: 5.4.1
   resolution: "react-native-safe-area-context@npm:5.4.1"
   peerDependencies:

From 798d147068301eda5a52c5ebfb288049f18e4423 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 30 May 2025 13:41:03 +0200
Subject: [PATCH 13/24] Fix warning in `DSLoaders`

---
 ts/features/design-system/core/DSLoaders.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ts/features/design-system/core/DSLoaders.tsx b/ts/features/design-system/core/DSLoaders.tsx
index 42464c7303f..af6c0d4f769 100644
--- a/ts/features/design-system/core/DSLoaders.tsx
+++ b/ts/features/design-system/core/DSLoaders.tsx
@@ -144,7 +144,9 @@ export const DSLoaders = () => {
           <H4 color={theme["textHeading-default"]}>Loading Spinner</H4>
           <VStack space={16}>
             <SpinnerViewerBox name="LoadingSpinner · Size 24, primary color">
-              <LoadingSpinner color="blueIO-500" />
+              <LoadingSpinner
+                color={IOColors[theme["interactiveElem-default"]]}
+              />
             </SpinnerViewerBox>
             <SpinnerViewerBox
               name="LoadingSpinner · Size 24, white color"

From 3f1c30f6cdafaea5356377b283e9331563d83ce4 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 30 May 2025 14:00:21 +0200
Subject: [PATCH 14/24] Update snapshots

---
 .../AuthenticationNavigator.test.tsx.snap     | 410 +++++++++---------
 .../__snapshots__/LandingScreen.test.tsx.snap | 410 +++++++++---------
 ...ntsCategoriesSelectionScreen.test.tsx.snap |  86 ++--
 .../screens/IdentificationModal.tsx           |   6 +-
 4 files changed, 467 insertions(+), 445 deletions(-)

diff --git a/ts/features/authentication/common/navigation/__test__/__snapshots__/AuthenticationNavigator.test.tsx.snap b/ts/features/authentication/common/navigation/__test__/__snapshots__/AuthenticationNavigator.test.tsx.snap
index 7a78977fe78..bdc8849cc5a 100644
--- a/ts/features/authentication/common/navigation/__test__/__snapshots__/AuthenticationNavigator.test.tsx.snap
+++ b/ts/features/authentication/common/navigation/__test__/__snapshots__/AuthenticationNavigator.test.tsx.snap
@@ -1374,10 +1374,210 @@ exports[`AuthenticationNavigator renders all routes (snapshot) 1`] = `
                           }
                         >
                           <View
-                            collapsable={false}
+                            style={
+                              {
+                                "paddingBottom": 24,
+                              }
+                            }
                           >
                             <View
-                              accessibilityLabel="Login with CIE"
+                              collapsable={false}
+                            >
+                              <View
+                                accessibilityLabel="Login with CIE"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  {
+                                    "busy": false,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignSelf": "stretch",
+                                    "flexShrink": 0,
+                                  }
+                                }
+                                testID="landing-button-login-cie"
+                              >
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "borderCurve": "continuous",
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "justifyContent": "center",
+                                        "overflow": "hidden",
+                                        "textAlignVertical": "center",
+                                      },
+                                      false,
+                                      {
+                                        "backgroundColor": undefined,
+                                      },
+                                      {
+                                        "paddingHorizontal": 16,
+                                      },
+                                      {
+                                        "backgroundColor": "#0B3EE3",
+                                        "borderColor": "#FFFFFF",
+                                        "borderRadius": 8,
+                                        "borderWidth": 0,
+                                        "height": 48,
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      [
+                                        {
+                                          "alignItems": "center",
+                                          "flexDirection": "row",
+                                          "justifyContent": "center",
+                                        },
+                                        {
+                                          "columnGap": 8,
+                                        },
+                                        false,
+                                      ]
+                                    }
+                                  >
+                                    <RNSVGSvgView
+                                      accessibilityElementsHidden={true}
+                                      accessibilityLabel=""
+                                      accessible={false}
+                                      align="xMidYMid"
+                                      animatedProps={
+                                        {
+                                          "color": undefined,
+                                        }
+                                      }
+                                      bbHeight={30}
+                                      bbWidth={30}
+                                      color="#555C70"
+                                      focusable={false}
+                                      height={30}
+                                      importantForAccessibility="no-hide-descendants"
+                                      meetOrSlice={0}
+                                      minX={0}
+                                      minY={0}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "borderWidth": 0,
+                                          },
+                                          {
+                                            "flex": 0,
+                                            "height": 30,
+                                            "width": 30,
+                                          },
+                                        ]
+                                      }
+                                      vbHeight={24}
+                                      vbWidth={24}
+                                      width={30}
+                                    >
+                                      <RNSVGGroup
+                                        fill={
+                                          {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
+                                      >
+                                        <RNSVGPath
+                                          clipRule={0}
+                                          d="M18.5855 18.458C17.0895 19.3667 15.3387 19.8894 13.46 19.8894C7.97044 19.8894 3.51498 15.4213 3.51498 9.94468C3.51498 4.45532 7.97044 0 13.4472 0C16.8534 0 19.8577 1.72055 21.6503 4.32706L21.9491 4.67563L17.9748 8.08194L17.7289 7.79506L17.7239 7.8C17.7047 7.77353 17.6852 7.74723 17.6655 7.72109L17.4763 7.50035L17.4846 7.49319C16.4164 6.2133 14.8146 5.4 13.0259 5.4C9.82156 5.4 7.20446 8.00426 7.20446 11.2213H6.34911C6.34911 7.54468 9.34921 4.54468 13.0259 4.54468C15.0687 4.54468 16.9055 5.47165 18.1353 6.93552L20.8254 4.62985C19.1728 2.33792 16.4768 0.842553 13.4472 0.842553C8.43003 0.842553 4.35756 4.91489 4.35756 9.93192C4.35756 14.9489 8.43003 19.0213 13.4472 19.0213C15.2037 19.0213 16.8522 18.5179 18.242 17.6506L18.6227 17.3243L21.5772 20.7718C21.5779 20.7713 21.5787 20.7707 21.5794 20.7702L22.1922 21.383C19.9708 23.0298 17.2133 24 14.2387 24C7.58745 24 2.05961 19.1362 1 12.7787H1.86811C2.91496 18.6638 8.0598 23.1447 14.2387 23.1447C16.6948 23.1447 18.9961 22.4328 20.9386 21.2037L18.5855 18.458Z"
+                                          fill={
+                                            {
+                                              "type": 2,
+                                            }
+                                          }
+                                          fillRule={0}
+                                          propList={
+                                            [
+                                              "fill",
+                                              "fillRule",
+                                            ]
+                                          }
+                                        />
+                                      </RNSVGGroup>
+                                    </RNSVGSvgView>
+                                    <Text
+                                      accessibilityElementsHidden={true}
+                                      accessible={false}
+                                      allowFontScaling={true}
+                                      ellipsizeMode="tail"
+                                      importantForAccessibility="no-hide-descendants"
+                                      maxFontSizeMultiplier={1.5}
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {},
+                                          {
+                                            "color": "#0E0F13",
+                                            "fontFamily": "Titillio",
+                                            "fontSize": 16,
+                                            "fontStyle": "normal",
+                                            "fontWeight": "600",
+                                            "lineHeight": undefined,
+                                          },
+                                          [
+                                            {
+                                              "textAlign": "auto",
+                                            },
+                                            {
+                                              "color": "#FFFFFF",
+                                            },
+                                            {
+                                              "color": undefined,
+                                            },
+                                          ],
+                                        ]
+                                      }
+                                    >
+                                      Login with CIE
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessibilityLabel="Login with SPID"
                               accessibilityRole="button"
                               accessibilityState={
                                 {
@@ -1414,7 +1614,7 @@ exports[`AuthenticationNavigator renders all routes (snapshot) 1`] = `
                                   "flexShrink": 0,
                                 }
                               }
-                              testID="landing-button-login-cie"
+                              testID="landing-button-login-spid"
                             >
                               <View
                                 style={
@@ -1507,7 +1707,7 @@ exports[`AuthenticationNavigator renders all routes (snapshot) 1`] = `
                                     >
                                       <RNSVGPath
                                         clipRule={0}
-                                        d="M18.5855 18.458C17.0895 19.3667 15.3387 19.8894 13.46 19.8894C7.97044 19.8894 3.51498 15.4213 3.51498 9.94468C3.51498 4.45532 7.97044 0 13.4472 0C16.8534 0 19.8577 1.72055 21.6503 4.32706L21.9491 4.67563L17.9748 8.08194L17.7289 7.79506L17.7239 7.8C17.7047 7.77353 17.6852 7.74723 17.6655 7.72109L17.4763 7.50035L17.4846 7.49319C16.4164 6.2133 14.8146 5.4 13.0259 5.4C9.82156 5.4 7.20446 8.00426 7.20446 11.2213H6.34911C6.34911 7.54468 9.34921 4.54468 13.0259 4.54468C15.0687 4.54468 16.9055 5.47165 18.1353 6.93552L20.8254 4.62985C19.1728 2.33792 16.4768 0.842553 13.4472 0.842553C8.43003 0.842553 4.35756 4.91489 4.35756 9.93192C4.35756 14.9489 8.43003 19.0213 13.4472 19.0213C15.2037 19.0213 16.8522 18.5179 18.242 17.6506L18.6227 17.3243L21.5772 20.7718C21.5779 20.7713 21.5787 20.7707 21.5794 20.7702L22.1922 21.383C19.9708 23.0298 17.2133 24 14.2387 24C7.58745 24 2.05961 19.1362 1 12.7787H1.86811C2.91496 18.6638 8.0598 23.1447 14.2387 23.1447C16.6948 23.1447 18.9961 22.4328 20.9386 21.2037L18.5855 18.458Z"
+                                        d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
                                         fill={
                                           {
                                             "type": 2,
@@ -1556,211 +1756,19 @@ exports[`AuthenticationNavigator renders all routes (snapshot) 1`] = `
                                       ]
                                     }
                                   >
-                                    Login with CIE
+                                    Login with SPID
                                   </Text>
                                 </View>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <View
-                            accessibilityLabel="Login with SPID"
-                            accessibilityRole="button"
-                            accessibilityState={
-                              {
-                                "busy": false,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignSelf": "stretch",
-                                "flexShrink": 0,
-                              }
-                            }
-                            testID="landing-button-login-spid"
-                          >
                             <View
                               style={
-                                [
-                                  {
-                                    "alignItems": "center",
-                                    "borderCurve": "continuous",
-                                    "elevation": 0,
-                                    "flexDirection": "row",
-                                    "justifyContent": "center",
-                                    "overflow": "hidden",
-                                    "textAlignVertical": "center",
-                                  },
-                                  false,
-                                  {
-                                    "backgroundColor": undefined,
-                                  },
-                                  {
-                                    "paddingHorizontal": 16,
-                                  },
-                                  {
-                                    "backgroundColor": "#0B3EE3",
-                                    "borderColor": "#FFFFFF",
-                                    "borderRadius": 8,
-                                    "borderWidth": 0,
-                                    "height": 48,
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              <View
-                                style={
-                                  [
-                                    {
-                                      "alignItems": "center",
-                                      "flexDirection": "row",
-                                      "justifyContent": "center",
-                                    },
-                                    {
-                                      "columnGap": 8,
-                                    },
-                                    false,
-                                  ]
+                                {
+                                  "height": 16,
                                 }
-                              >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  animatedProps={
-                                    {
-                                      "color": undefined,
-                                    }
-                                  }
-                                  bbHeight={30}
-                                  bbWidth={30}
-                                  color="#555C70"
-                                  focusable={false}
-                                  height={30}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      {
-                                        "flex": 0,
-                                        "height": 30,
-                                        "width": 30,
-                                      },
-                                    ]
-                                  }
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={30}
-                                >
-                                  <RNSVGGroup
-                                    fill={
-                                      {
-                                        "payload": 4278190080,
-                                        "type": 0,
-                                      }
-                                    }
-                                  >
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
-                                      fill={
-                                        {
-                                          "type": 2,
-                                        }
-                                      }
-                                      fillRule={0}
-                                      propList={
-                                        [
-                                          "fill",
-                                          "fillRule",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
-                                <Text
-                                  accessibilityElementsHidden={true}
-                                  accessible={false}
-                                  allowFontScaling={true}
-                                  ellipsizeMode="tail"
-                                  importantForAccessibility="no-hide-descendants"
-                                  maxFontSizeMultiplier={1.5}
-                                  numberOfLines={1}
-                                  style={
-                                    [
-                                      {},
-                                      {
-                                        "color": "#0E0F13",
-                                        "fontFamily": "Titillio",
-                                        "fontSize": 16,
-                                        "fontStyle": "normal",
-                                        "fontWeight": "600",
-                                        "lineHeight": undefined,
-                                      },
-                                      [
-                                        {
-                                          "textAlign": "auto",
-                                        },
-                                        {
-                                          "color": "#FFFFFF",
-                                        },
-                                        {
-                                          "color": undefined,
-                                        },
-                                      ],
-                                    ]
-                                  }
-                                >
-                                  Login with SPID
-                                </Text>
-                              </View>
-                            </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "height": 16,
                               }
-                            }
-                          />
+                            />
+                          </View>
                           <Modal
                             accessible={false}
                             backdropComponent={[Function]}
diff --git a/ts/features/authentication/login/landing/__tests__/__snapshots__/LandingScreen.test.tsx.snap b/ts/features/authentication/login/landing/__tests__/__snapshots__/LandingScreen.test.tsx.snap
index 26a42309c9f..3bd90dbc5a8 100644
--- a/ts/features/authentication/login/landing/__tests__/__snapshots__/LandingScreen.test.tsx.snap
+++ b/ts/features/authentication/login/landing/__tests__/__snapshots__/LandingScreen.test.tsx.snap
@@ -1374,10 +1374,210 @@ exports[`LandingScreen Should match the snapshot 1`] = `
                           }
                         >
                           <View
-                            collapsable={false}
+                            style={
+                              {
+                                "paddingBottom": 24,
+                              }
+                            }
                           >
                             <View
-                              accessibilityLabel="Login with CIE"
+                              collapsable={false}
+                            >
+                              <View
+                                accessibilityLabel="Login with CIE"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  {
+                                    "busy": false,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignSelf": "stretch",
+                                    "flexShrink": 0,
+                                  }
+                                }
+                                testID="landing-button-login-cie"
+                              >
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "borderCurve": "continuous",
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "justifyContent": "center",
+                                        "overflow": "hidden",
+                                        "textAlignVertical": "center",
+                                      },
+                                      false,
+                                      {
+                                        "backgroundColor": undefined,
+                                      },
+                                      {
+                                        "paddingHorizontal": 16,
+                                      },
+                                      {
+                                        "backgroundColor": "#0B3EE3",
+                                        "borderColor": "#FFFFFF",
+                                        "borderRadius": 8,
+                                        "borderWidth": 0,
+                                        "height": 48,
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      [
+                                        {
+                                          "alignItems": "center",
+                                          "flexDirection": "row",
+                                          "justifyContent": "center",
+                                        },
+                                        {
+                                          "columnGap": 8,
+                                        },
+                                        false,
+                                      ]
+                                    }
+                                  >
+                                    <RNSVGSvgView
+                                      accessibilityElementsHidden={true}
+                                      accessibilityLabel=""
+                                      accessible={false}
+                                      align="xMidYMid"
+                                      animatedProps={
+                                        {
+                                          "color": undefined,
+                                        }
+                                      }
+                                      bbHeight={30}
+                                      bbWidth={30}
+                                      color="#555C70"
+                                      focusable={false}
+                                      height={30}
+                                      importantForAccessibility="no-hide-descendants"
+                                      meetOrSlice={0}
+                                      minX={0}
+                                      minY={0}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "borderWidth": 0,
+                                          },
+                                          {
+                                            "flex": 0,
+                                            "height": 30,
+                                            "width": 30,
+                                          },
+                                        ]
+                                      }
+                                      vbHeight={24}
+                                      vbWidth={24}
+                                      width={30}
+                                    >
+                                      <RNSVGGroup
+                                        fill={
+                                          {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
+                                      >
+                                        <RNSVGPath
+                                          clipRule={0}
+                                          d="M18.5855 18.458C17.0895 19.3667 15.3387 19.8894 13.46 19.8894C7.97044 19.8894 3.51498 15.4213 3.51498 9.94468C3.51498 4.45532 7.97044 0 13.4472 0C16.8534 0 19.8577 1.72055 21.6503 4.32706L21.9491 4.67563L17.9748 8.08194L17.7289 7.79506L17.7239 7.8C17.7047 7.77353 17.6852 7.74723 17.6655 7.72109L17.4763 7.50035L17.4846 7.49319C16.4164 6.2133 14.8146 5.4 13.0259 5.4C9.82156 5.4 7.20446 8.00426 7.20446 11.2213H6.34911C6.34911 7.54468 9.34921 4.54468 13.0259 4.54468C15.0687 4.54468 16.9055 5.47165 18.1353 6.93552L20.8254 4.62985C19.1728 2.33792 16.4768 0.842553 13.4472 0.842553C8.43003 0.842553 4.35756 4.91489 4.35756 9.93192C4.35756 14.9489 8.43003 19.0213 13.4472 19.0213C15.2037 19.0213 16.8522 18.5179 18.242 17.6506L18.6227 17.3243L21.5772 20.7718C21.5779 20.7713 21.5787 20.7707 21.5794 20.7702L22.1922 21.383C19.9708 23.0298 17.2133 24 14.2387 24C7.58745 24 2.05961 19.1362 1 12.7787H1.86811C2.91496 18.6638 8.0598 23.1447 14.2387 23.1447C16.6948 23.1447 18.9961 22.4328 20.9386 21.2037L18.5855 18.458Z"
+                                          fill={
+                                            {
+                                              "type": 2,
+                                            }
+                                          }
+                                          fillRule={0}
+                                          propList={
+                                            [
+                                              "fill",
+                                              "fillRule",
+                                            ]
+                                          }
+                                        />
+                                      </RNSVGGroup>
+                                    </RNSVGSvgView>
+                                    <Text
+                                      accessibilityElementsHidden={true}
+                                      accessible={false}
+                                      allowFontScaling={true}
+                                      ellipsizeMode="tail"
+                                      importantForAccessibility="no-hide-descendants"
+                                      maxFontSizeMultiplier={1.5}
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {},
+                                          {
+                                            "color": "#0E0F13",
+                                            "fontFamily": "Titillio",
+                                            "fontSize": 16,
+                                            "fontStyle": "normal",
+                                            "fontWeight": "600",
+                                            "lineHeight": undefined,
+                                          },
+                                          [
+                                            {
+                                              "textAlign": "auto",
+                                            },
+                                            {
+                                              "color": "#FFFFFF",
+                                            },
+                                            {
+                                              "color": undefined,
+                                            },
+                                          ],
+                                        ]
+                                      }
+                                    >
+                                      Login with CIE
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessibilityLabel="Login with SPID"
                               accessibilityRole="button"
                               accessibilityState={
                                 {
@@ -1414,7 +1614,7 @@ exports[`LandingScreen Should match the snapshot 1`] = `
                                   "flexShrink": 0,
                                 }
                               }
-                              testID="landing-button-login-cie"
+                              testID="landing-button-login-spid"
                             >
                               <View
                                 style={
@@ -1507,7 +1707,7 @@ exports[`LandingScreen Should match the snapshot 1`] = `
                                     >
                                       <RNSVGPath
                                         clipRule={0}
-                                        d="M18.5855 18.458C17.0895 19.3667 15.3387 19.8894 13.46 19.8894C7.97044 19.8894 3.51498 15.4213 3.51498 9.94468C3.51498 4.45532 7.97044 0 13.4472 0C16.8534 0 19.8577 1.72055 21.6503 4.32706L21.9491 4.67563L17.9748 8.08194L17.7289 7.79506L17.7239 7.8C17.7047 7.77353 17.6852 7.74723 17.6655 7.72109L17.4763 7.50035L17.4846 7.49319C16.4164 6.2133 14.8146 5.4 13.0259 5.4C9.82156 5.4 7.20446 8.00426 7.20446 11.2213H6.34911C6.34911 7.54468 9.34921 4.54468 13.0259 4.54468C15.0687 4.54468 16.9055 5.47165 18.1353 6.93552L20.8254 4.62985C19.1728 2.33792 16.4768 0.842553 13.4472 0.842553C8.43003 0.842553 4.35756 4.91489 4.35756 9.93192C4.35756 14.9489 8.43003 19.0213 13.4472 19.0213C15.2037 19.0213 16.8522 18.5179 18.242 17.6506L18.6227 17.3243L21.5772 20.7718C21.5779 20.7713 21.5787 20.7707 21.5794 20.7702L22.1922 21.383C19.9708 23.0298 17.2133 24 14.2387 24C7.58745 24 2.05961 19.1362 1 12.7787H1.86811C2.91496 18.6638 8.0598 23.1447 14.2387 23.1447C16.6948 23.1447 18.9961 22.4328 20.9386 21.2037L18.5855 18.458Z"
+                                        d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
                                         fill={
                                           {
                                             "type": 2,
@@ -1556,211 +1756,19 @@ exports[`LandingScreen Should match the snapshot 1`] = `
                                       ]
                                     }
                                   >
-                                    Login with CIE
+                                    Login with SPID
                                   </Text>
                                 </View>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <View
-                            accessibilityLabel="Login with SPID"
-                            accessibilityRole="button"
-                            accessibilityState={
-                              {
-                                "busy": false,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignSelf": "stretch",
-                                "flexShrink": 0,
-                              }
-                            }
-                            testID="landing-button-login-spid"
-                          >
                             <View
                               style={
-                                [
-                                  {
-                                    "alignItems": "center",
-                                    "borderCurve": "continuous",
-                                    "elevation": 0,
-                                    "flexDirection": "row",
-                                    "justifyContent": "center",
-                                    "overflow": "hidden",
-                                    "textAlignVertical": "center",
-                                  },
-                                  false,
-                                  {
-                                    "backgroundColor": undefined,
-                                  },
-                                  {
-                                    "paddingHorizontal": 16,
-                                  },
-                                  {
-                                    "backgroundColor": "#0B3EE3",
-                                    "borderColor": "#FFFFFF",
-                                    "borderRadius": 8,
-                                    "borderWidth": 0,
-                                    "height": 48,
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              <View
-                                style={
-                                  [
-                                    {
-                                      "alignItems": "center",
-                                      "flexDirection": "row",
-                                      "justifyContent": "center",
-                                    },
-                                    {
-                                      "columnGap": 8,
-                                    },
-                                    false,
-                                  ]
+                                {
+                                  "height": 16,
                                 }
-                              >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  animatedProps={
-                                    {
-                                      "color": undefined,
-                                    }
-                                  }
-                                  bbHeight={30}
-                                  bbWidth={30}
-                                  color="#555C70"
-                                  focusable={false}
-                                  height={30}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      {
-                                        "flex": 0,
-                                        "height": 30,
-                                        "width": 30,
-                                      },
-                                    ]
-                                  }
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={30}
-                                >
-                                  <RNSVGGroup
-                                    fill={
-                                      {
-                                        "payload": 4278190080,
-                                        "type": 0,
-                                      }
-                                    }
-                                  >
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
-                                      fill={
-                                        {
-                                          "type": 2,
-                                        }
-                                      }
-                                      fillRule={0}
-                                      propList={
-                                        [
-                                          "fill",
-                                          "fillRule",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
-                                <Text
-                                  accessibilityElementsHidden={true}
-                                  accessible={false}
-                                  allowFontScaling={true}
-                                  ellipsizeMode="tail"
-                                  importantForAccessibility="no-hide-descendants"
-                                  maxFontSizeMultiplier={1.5}
-                                  numberOfLines={1}
-                                  style={
-                                    [
-                                      {},
-                                      {
-                                        "color": "#0E0F13",
-                                        "fontFamily": "Titillio",
-                                        "fontSize": 16,
-                                        "fontStyle": "normal",
-                                        "fontWeight": "600",
-                                        "lineHeight": undefined,
-                                      },
-                                      [
-                                        {
-                                          "textAlign": "auto",
-                                        },
-                                        {
-                                          "color": "#FFFFFF",
-                                        },
-                                        {
-                                          "color": undefined,
-                                        },
-                                      ],
-                                    ]
-                                  }
-                                >
-                                  Login with SPID
-                                </Text>
-                              </View>
-                            </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "height": 16,
                               }
-                            }
-                          />
+                            />
+                          </View>
                           <RCTScrollView
                             overScrollMode="never"
                             style={
diff --git a/ts/features/bonus/cgn/screens/merchants/__tests__/__snapshots__/CgnMerchantsCategoriesSelectionScreen.test.tsx.snap b/ts/features/bonus/cgn/screens/merchants/__tests__/__snapshots__/CgnMerchantsCategoriesSelectionScreen.test.tsx.snap
index a8d96e4fdad..65535b2cb1b 100644
--- a/ts/features/bonus/cgn/screens/merchants/__tests__/__snapshots__/CgnMerchantsCategoriesSelectionScreen.test.tsx.snap
+++ b/ts/features/bonus/cgn/screens/merchants/__tests__/__snapshots__/CgnMerchantsCategoriesSelectionScreen.test.tsx.snap
@@ -205,60 +205,62 @@ exports[`CgnMerchantsCategoriesSelectionScreen should render correctly 1`] = `
                                 onPress={[Function]}
                                 variant="primary"
                               />
-                              <Modal
-                                accessible={false}
-                                backdropComponent={[Function]}
-                                backgroundStyle={
-                                  {
-                                    "backgroundColor": "#FFFFFF",
-                                  }
-                                }
-                                enableDismissOnClose={true}
-                                enableDynamicSizing={true}
-                                footerComponent={[Function]}
-                                handleComponent={[Function]}
-                                hardwareAccelerated={false}
-                                importantForAccessibility="yes"
-                                maxDynamicContentSize={1334}
-                                onDismiss={[Function]}
-                                style={
-                                  {
-                                    "borderCurve": "continuous",
-                                    "borderTopLeftRadius": 24,
-                                    "borderTopRightRadius": 24,
-                                    "overflow": "hidden",
+                              <React.Fragment>
+                                <Modal
+                                  accessible={false}
+                                  backdropComponent={[Function]}
+                                  backgroundStyle={
+                                    {
+                                      "backgroundColor": "#FFFFFF",
+                                    }
                                   }
-                                }
-                                visible={true}
-                              >
-                                <ScrollView
-                                  overScrollMode="never"
+                                  enableDismissOnClose={true}
+                                  enableDynamicSizing={true}
+                                  footerComponent={[Function]}
+                                  handleComponent={[Function]}
+                                  hardwareAccelerated={false}
+                                  importantForAccessibility="yes"
+                                  maxDynamicContentSize={1334}
+                                  onDismiss={[Function]}
                                   style={
                                     {
-                                      "paddingHorizontal": 24,
+                                      "borderCurve": "continuous",
+                                      "borderTopLeftRadius": 24,
+                                      "borderTopRightRadius": 24,
+                                      "overflow": "hidden",
                                     }
                                   }
+                                  visible={true}
                                 >
-                                  <View
+                                  <ScrollView
+                                    overScrollMode="never"
                                     style={
                                       {
-                                        "paddingBottom": 0,
+                                        "paddingHorizontal": 24,
                                       }
                                     }
                                   >
-                                    <ForwardRef>
-                                      To facilitate your search and improve your experience, we have organized the categories according to frequency of use. This information is not tied to your profile, but is based on aggregate data from all users who use Carta Giovani Nazionale and have consented to data processing.
-                                    </ForwardRef>
-                                  </View>
-                                  <View
-                                    style={
-                                      {
-                                        "height": 0,
+                                    <View
+                                      style={
+                                        {
+                                          "paddingBottom": 0,
+                                        }
                                       }
-                                    }
-                                  />
-                                </ScrollView>
-                              </Modal>
+                                    >
+                                      <ForwardRef>
+                                        To facilitate your search and improve your experience, we have organized the categories according to frequency of use. This information is not tied to your profile, but is based on aggregate data from all users who use Carta Giovani Nazionale and have consented to data processing.
+                                      </ForwardRef>
+                                    </View>
+                                    <View
+                                      style={
+                                        {
+                                          "height": 0,
+                                        }
+                                      }
+                                    />
+                                  </ScrollView>
+                                </Modal>
+                              </React.Fragment>
                             </React.Fragment>
                           </React.Fragment>
                         }
diff --git a/ts/features/identification/screens/IdentificationModal.tsx b/ts/features/identification/screens/IdentificationModal.tsx
index c479f0d56a4..bec41486203 100644
--- a/ts/features/identification/screens/IdentificationModal.tsx
+++ b/ts/features/identification/screens/IdentificationModal.tsx
@@ -377,7 +377,11 @@ export const IdentificationModal = () => {
       transparent
       onRequestClose={onRequestCloseHandler}
     >
-      <StatusBar barStyle={"light-content"} translucent />
+      <StatusBar
+        barStyle={"light-content"}
+        backgroundColor={"transparent"}
+        translucent
+      />
       <View
         style={[
           styles.contentWrapper,

From b4a2c5221cf6197ba591cfe81e0cd8c461bd9f8d Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 30 May 2025 14:30:35 +0200
Subject: [PATCH 15/24] Add temporary workaround to `useFooterActionsMargin`

---
 ts/hooks/useFooterActionsMargin.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/ts/hooks/useFooterActionsMargin.tsx b/ts/hooks/useFooterActionsMargin.tsx
index db8d4dac42d..ac5f4e80489 100644
--- a/ts/hooks/useFooterActionsMargin.tsx
+++ b/ts/hooks/useFooterActionsMargin.tsx
@@ -1,4 +1,5 @@
 import { IOVisualCostants } from "@pagopa/io-app-design-system";
+import { Platform } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type FooterActionsMargin = {
@@ -25,6 +26,15 @@ export const useFooterActionsMargin = (
 
   const needSafeAreaMargin = insets.bottom !== 0;
 
+  /* When `edge-to-edge` on Android is enabled, the margin
+  from the bottom of the screen is too small. This extra margin
+  is applied to prevent to display the actions too close to the
+  screen edge.
+  This margin is a temporary workaround to be removed when
+  this issue is fixed:
+  https://github.com/AppAndFlow/react-native-safe-area-context/issues/603 */
+  const edgeToEdgeMargin = Platform.OS === "ios" ? 0 : 8;
+
   /* Check if the iPhone bottom handle is present.
      If not, or if you don't need safe area insets,
      add a default margin to prevent the button
@@ -32,7 +42,7 @@ export const useFooterActionsMargin = (
   const bottomMargin =
     !needSafeAreaMargin || excludeSafeAreaMargins
       ? IOVisualCostants.appMarginDefault
-      : insets.bottom;
+      : insets.bottom + edgeToEdgeMargin;
 
   return {
     bottomMargin,

From 4094b9b565d74922ea81d19cf03c21a890c8b4d1 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 30 May 2025 15:26:38 +0200
Subject: [PATCH 16/24] Update snapshots

---
 .../screens/__test__/__snapshots__/wizards.test.tsx.snap  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ts/features/authentication/login/cie/screens/__test__/__snapshots__/wizards.test.tsx.snap b/ts/features/authentication/login/cie/screens/__test__/__snapshots__/wizards.test.tsx.snap
index 6fb980cf9b2..7d3e39c678a 100644
--- a/ts/features/authentication/login/cie/screens/__test__/__snapshots__/wizards.test.tsx.snap
+++ b/ts/features/authentication/login/cie/screens/__test__/__snapshots__/wizards.test.tsx.snap
@@ -257,7 +257,7 @@ To enter the IO app without physically using the Electronic Identity Card, you m
         },
         {
           "height": NaN,
-          "paddingBottom": undefined,
+          "paddingBottom": NaN,
         },
       ]
     }
@@ -1276,7 +1276,7 @@ exports[`CiePinWizard Should match the snapshot 1`] = `
         },
         {
           "height": NaN,
-          "paddingBottom": undefined,
+          "paddingBottom": NaN,
         },
       ]
     }
@@ -2347,7 +2347,7 @@ exports[`IDActivationWizard Should match the snapshot 1`] = `
         },
         {
           "height": NaN,
-          "paddingBottom": undefined,
+          "paddingBottom": NaN,
         },
       ]
     }
@@ -2702,7 +2702,7 @@ exports[`SpidWizard Should match the snapshot 1`] = `
         },
         {
           "height": NaN,
-          "paddingBottom": undefined,
+          "paddingBottom": NaN,
         },
       ]
     }

From 22618e33fed789f3c8e405180f8c3cac789bbc1f Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Thu, 31 Jul 2025 11:27:42 +0200
Subject: [PATCH 17/24] Update `react-native-safe-area-context`

---
 ios/Podfile.lock |  4 ++--
 package.json     |  2 +-
 yarn.lock        | 12 +++++++++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 8c17882d4e7..82b4a4ad751 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1560,7 +1560,7 @@ PODS:
     - Yoga
   - react-native-render-html (6.3.1):
     - React-Core
-  - react-native-safe-area-context (5.5.1):
+  - react-native-safe-area-context (5.5.2):
     - React-Core
   - react-native-screen-brightness (2.0.0-alpha):
     - React
@@ -2696,7 +2696,7 @@ SPEC CHECKSUMS:
   react-native-pdf: 6a51a22ccefb23eb93298771e4bf090913e86d70
   react-native-pdf-thumbnail: 2d69e506eb4ea4940f284a228b975f5ab74ab61b
   react-native-render-html: 05a7d4490ffc85c88094601207f3e48a90533476
-  react-native-safe-area-context: 827032edf27079702cbd006f11dc79451a2d744b
+  react-native-safe-area-context: 0f7bf11598f9a61b7ceac8dc3f59ef98697e99e1
   react-native-screen-brightness: 16a7b26d12d89654fc6a2e9ff1e55c1a4a10afcb
   react-native-skia: 33146f57c307b433e89080d628b43132774c5c7f
   react-native-slider: 5299110eb902bc5169b1dd94192aa28e1bf15ad8
diff --git a/package.json b/package.json
index 01c1bc84160..9e76bed65d1 100644
--- a/package.json
+++ b/package.json
@@ -145,7 +145,7 @@
     "react-native-reanimated": "^3.17.5",
     "react-native-render-html": "^6.3.1",
     "react-native-responsive-screen": "^1.4.1",
-    "react-native-safe-area-context": "^5.4.1",
+    "react-native-safe-area-context": "^5.5.2",
     "react-native-screen-brightness": "^2.0.0-alpha",
     "react-native-screens": "^4.10.0",
     "react-native-screenshot-prevent": "^1.2.1",
diff --git a/yarn.lock b/yarn.lock
index bcc32f13053..1fbe3868db8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13096,7 +13096,7 @@ __metadata:
     react-native-reanimated: ^3.17.5
     react-native-render-html: ^6.3.1
     react-native-responsive-screen: ^1.4.1
-    react-native-safe-area-context: ^5.4.1
+    react-native-safe-area-context: ^5.5.2
     react-native-screen-brightness: ^2.0.0-alpha
     react-native-screens: ^4.10.0
     react-native-screenshot-prevent: ^1.2.1
@@ -17848,6 +17848,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-safe-area-context@npm:^5.5.2":
+  version: 5.5.2
+  resolution: "react-native-safe-area-context@npm:5.5.2"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 694e293b474b0738899c6e09da9f001d8087b382b5a40b8b227765c861a8137f0ff0209f1c9d8ae94337bc9c170eb114a9b897a8661b8181f48759a21baeb265
+  languageName: node
+  linkType: hard
+
 "react-native-screen-brightness@npm:^2.0.0-alpha":
   version: 2.0.0-alpha
   resolution: "react-native-screen-brightness@npm:2.0.0-alpha"

From f6e426f095c5dbb2a7fcd081a9f060dbcf5cb4cc Mon Sep 17 00:00:00 2001
From: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com>
Date: Mon, 8 Sep 2025 17:39:10 +0200
Subject: [PATCH 18/24] test: update snaps

---
 .../AuthenticationNavigator.test.tsx.snap     | 353 ++++++++++--------
 .../__snapshots__/LandingScreen.test.tsx.snap | 353 ++++++++++--------
 2 files changed, 396 insertions(+), 310 deletions(-)

diff --git a/ts/features/authentication/common/navigation/__test__/__snapshots__/AuthenticationNavigator.test.tsx.snap b/ts/features/authentication/common/navigation/__test__/__snapshots__/AuthenticationNavigator.test.tsx.snap
index 68cf783f94e..60e1d121c59 100644
--- a/ts/features/authentication/common/navigation/__test__/__snapshots__/AuthenticationNavigator.test.tsx.snap
+++ b/ts/features/authentication/common/navigation/__test__/__snapshots__/AuthenticationNavigator.test.tsx.snap
@@ -1395,7 +1395,203 @@ exports[`AuthenticationNavigator renders all routes (snapshot) 1`] = `
                             }
                           >
                             <View
-                              accessibilityLabel="Entra con CIE"
+                              collapsable={false}
+                            >
+                              <View
+                                accessibilityLabel="Entra con CIE"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  {
+                                    "busy": false,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignSelf": "stretch",
+                                    "flexShrink": 0,
+                                  }
+                                }
+                                testID="landing-button-login-cie"
+                              >
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "borderCurve": "continuous",
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "justifyContent": "center",
+                                        "overflow": "hidden",
+                                        "textAlignVertical": "center",
+                                      },
+                                      false,
+                                      {
+                                        "backgroundColor": undefined,
+                                      },
+                                      {
+                                        "paddingHorizontal": 16,
+                                      },
+                                      {
+                                        "backgroundColor": "#0B3EE3",
+                                        "borderColor": "#FFFFFF",
+                                        "borderRadius": 8,
+                                        "borderWidth": 0,
+                                        "height": 48,
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      [
+                                        {
+                                          "alignItems": "center",
+                                          "flexDirection": "row",
+                                          "justifyContent": "center",
+                                        },
+                                        {
+                                          "columnGap": 8,
+                                        },
+                                        false,
+                                      ]
+                                    }
+                                  >
+                                    <RNSVGSvgView
+                                      accessibilityElementsHidden={true}
+                                      accessibilityLabel=""
+                                      accessible={false}
+                                      align="xMidYMid"
+                                      animatedProps={
+                                        {
+                                          "color": undefined,
+                                        }
+                                      }
+                                      bbHeight={30}
+                                      bbWidth={30}
+                                      color="#555C70"
+                                      focusable={false}
+                                      height={30}
+                                      importantForAccessibility="no-hide-descendants"
+                                      meetOrSlice={0}
+                                      minX={0}
+                                      minY={0}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "borderWidth": 0,
+                                          },
+                                          {
+                                            "flex": 0,
+                                            "height": 30,
+                                            "width": 30,
+                                          },
+                                        ]
+                                      }
+                                      vbHeight={24}
+                                      vbWidth={24}
+                                      width={30}
+                                    >
+                                      <RNSVGGroup
+                                        fill={
+                                          {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
+                                      >
+                                        <RNSVGPath
+                                          clipRule={0}
+                                          d="M18.5855 18.458C17.0895 19.3667 15.3387 19.8894 13.46 19.8894C7.97044 19.8894 3.51498 15.4213 3.51498 9.94468C3.51498 4.45532 7.97044 0 13.4472 0C16.8534 0 19.8577 1.72055 21.6503 4.32706L21.9491 4.67563L17.9748 8.08194L17.7289 7.79506L17.7239 7.8C17.7047 7.77353 17.6852 7.74723 17.6655 7.72109L17.4763 7.50035L17.4846 7.49319C16.4164 6.2133 14.8146 5.4 13.0259 5.4C9.82156 5.4 7.20446 8.00426 7.20446 11.2213H6.34911C6.34911 7.54468 9.34921 4.54468 13.0259 4.54468C15.0687 4.54468 16.9055 5.47165 18.1353 6.93552L20.8254 4.62985C19.1728 2.33792 16.4768 0.842553 13.4472 0.842553C8.43003 0.842553 4.35756 4.91489 4.35756 9.93192C4.35756 14.9489 8.43003 19.0213 13.4472 19.0213C15.2037 19.0213 16.8522 18.5179 18.242 17.6506L18.6227 17.3243L21.5772 20.7718C21.5779 20.7713 21.5787 20.7707 21.5794 20.7702L22.1922 21.383C19.9708 23.0298 17.2133 24 14.2387 24C7.58745 24 2.05961 19.1362 1 12.7787H1.86811C2.91496 18.6638 8.0598 23.1447 14.2387 23.1447C16.6948 23.1447 18.9961 22.4328 20.9386 21.2037L18.5855 18.458Z"
+                                          fill={
+                                            {
+                                              "type": 2,
+                                            }
+                                          }
+                                          fillRule={0}
+                                          propList={
+                                            [
+                                              "fill",
+                                              "fillRule",
+                                            ]
+                                          }
+                                        />
+                                      </RNSVGGroup>
+                                    </RNSVGSvgView>
+                                    <Text
+                                      accessibilityElementsHidden={true}
+                                      accessible={false}
+                                      allowFontScaling={true}
+                                      ellipsizeMode="tail"
+                                      importantForAccessibility="no-hide-descendants"
+                                      maxFontSizeMultiplier={1.5}
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {},
+                                          {
+                                            "color": "#0E0F13",
+                                            "fontFamily": "Titillio",
+                                            "fontSize": 16,
+                                            "fontStyle": "normal",
+                                            "fontWeight": "600",
+                                            "lineHeight": undefined,
+                                          },
+                                          [
+                                            {
+                                              "textAlign": "auto",
+                                            },
+                                            {
+                                              "color": "#FFFFFF",
+                                            },
+                                            {
+                                              "color": undefined,
+                                            },
+                                          ],
+                                        ]
+                                      }
+                                    >
+                                      Entra con CIE
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessibilityLabel="Entra con SPID"
                               accessibilityRole="button"
                               accessibilityState={
                                 {
@@ -1574,169 +1770,16 @@ exports[`AuthenticationNavigator renders all routes (snapshot) 1`] = `
                                       ]
                                     }
                                   >
-                                    Entra con CIE
+                                    Entra con SPID
                                   </Text>
                                 </View>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <View
-                            accessibilityLabel="Entra con SPID"
-                            accessibilityRole="button"
-                            accessibilityState={
-                              {
-                                "busy": false,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignSelf": "stretch",
-                                "flexShrink": 0,
-                              }
-                            }
-                            testID="landing-button-login-spid"
-                          >
                             <View
                               style={
                                 {
                                   "height": 16,
                                 }
-                              >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  animatedProps={
-                                    {
-                                      "color": undefined,
-                                    }
-                                  }
-                                  bbHeight={30}
-                                  bbWidth={30}
-                                  color="#555C70"
-                                  focusable={false}
-                                  height={30}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      {
-                                        "flex": 0,
-                                        "height": 30,
-                                        "width": 30,
-                                      },
-                                    ]
-                                  }
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={30}
-                                >
-                                  <RNSVGGroup
-                                    fill={
-                                      {
-                                        "payload": 4278190080,
-                                        "type": 0,
-                                      }
-                                    }
-                                  >
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
-                                      fill={
-                                        {
-                                          "type": 2,
-                                        }
-                                      }
-                                      fillRule={0}
-                                      propList={
-                                        [
-                                          "fill",
-                                          "fillRule",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
-                                <Text
-                                  accessibilityElementsHidden={true}
-                                  accessible={false}
-                                  allowFontScaling={true}
-                                  ellipsizeMode="tail"
-                                  importantForAccessibility="no-hide-descendants"
-                                  maxFontSizeMultiplier={1.5}
-                                  numberOfLines={1}
-                                  style={
-                                    [
-                                      {},
-                                      {
-                                        "color": "#0E0F13",
-                                        "fontFamily": "Titillio",
-                                        "fontSize": 16,
-                                        "fontStyle": "normal",
-                                        "fontWeight": "600",
-                                        "lineHeight": undefined,
-                                      },
-                                      [
-                                        {
-                                          "textAlign": "auto",
-                                        },
-                                        {
-                                          "color": "#FFFFFF",
-                                        },
-                                        {
-                                          "color": undefined,
-                                        },
-                                      ],
-                                    ]
-                                  }
-                                >
-                                  Entra con SPID
-                                </Text>
-                              </View>
-                            </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "height": 16,
                               }
                             />
                           </View>
diff --git a/ts/features/authentication/login/landing/__tests__/__snapshots__/LandingScreen.test.tsx.snap b/ts/features/authentication/login/landing/__tests__/__snapshots__/LandingScreen.test.tsx.snap
index 6e525685015..9f05bfb3b25 100644
--- a/ts/features/authentication/login/landing/__tests__/__snapshots__/LandingScreen.test.tsx.snap
+++ b/ts/features/authentication/login/landing/__tests__/__snapshots__/LandingScreen.test.tsx.snap
@@ -1395,7 +1395,203 @@ exports[`LandingScreen Should match the snapshot 1`] = `
                             }
                           >
                             <View
-                              accessibilityLabel="Entra con CIE"
+                              collapsable={false}
+                            >
+                              <View
+                                accessibilityLabel="Entra con CIE"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  {
+                                    "busy": false,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignSelf": "stretch",
+                                    "flexShrink": 0,
+                                  }
+                                }
+                                testID="landing-button-login-cie"
+                              >
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "borderCurve": "continuous",
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "justifyContent": "center",
+                                        "overflow": "hidden",
+                                        "textAlignVertical": "center",
+                                      },
+                                      false,
+                                      {
+                                        "backgroundColor": undefined,
+                                      },
+                                      {
+                                        "paddingHorizontal": 16,
+                                      },
+                                      {
+                                        "backgroundColor": "#0B3EE3",
+                                        "borderColor": "#FFFFFF",
+                                        "borderRadius": 8,
+                                        "borderWidth": 0,
+                                        "height": 48,
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      [
+                                        {
+                                          "alignItems": "center",
+                                          "flexDirection": "row",
+                                          "justifyContent": "center",
+                                        },
+                                        {
+                                          "columnGap": 8,
+                                        },
+                                        false,
+                                      ]
+                                    }
+                                  >
+                                    <RNSVGSvgView
+                                      accessibilityElementsHidden={true}
+                                      accessibilityLabel=""
+                                      accessible={false}
+                                      align="xMidYMid"
+                                      animatedProps={
+                                        {
+                                          "color": undefined,
+                                        }
+                                      }
+                                      bbHeight={30}
+                                      bbWidth={30}
+                                      color="#555C70"
+                                      focusable={false}
+                                      height={30}
+                                      importantForAccessibility="no-hide-descendants"
+                                      meetOrSlice={0}
+                                      minX={0}
+                                      minY={0}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "borderWidth": 0,
+                                          },
+                                          {
+                                            "flex": 0,
+                                            "height": 30,
+                                            "width": 30,
+                                          },
+                                        ]
+                                      }
+                                      vbHeight={24}
+                                      vbWidth={24}
+                                      width={30}
+                                    >
+                                      <RNSVGGroup
+                                        fill={
+                                          {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
+                                      >
+                                        <RNSVGPath
+                                          clipRule={0}
+                                          d="M18.5855 18.458C17.0895 19.3667 15.3387 19.8894 13.46 19.8894C7.97044 19.8894 3.51498 15.4213 3.51498 9.94468C3.51498 4.45532 7.97044 0 13.4472 0C16.8534 0 19.8577 1.72055 21.6503 4.32706L21.9491 4.67563L17.9748 8.08194L17.7289 7.79506L17.7239 7.8C17.7047 7.77353 17.6852 7.74723 17.6655 7.72109L17.4763 7.50035L17.4846 7.49319C16.4164 6.2133 14.8146 5.4 13.0259 5.4C9.82156 5.4 7.20446 8.00426 7.20446 11.2213H6.34911C6.34911 7.54468 9.34921 4.54468 13.0259 4.54468C15.0687 4.54468 16.9055 5.47165 18.1353 6.93552L20.8254 4.62985C19.1728 2.33792 16.4768 0.842553 13.4472 0.842553C8.43003 0.842553 4.35756 4.91489 4.35756 9.93192C4.35756 14.9489 8.43003 19.0213 13.4472 19.0213C15.2037 19.0213 16.8522 18.5179 18.242 17.6506L18.6227 17.3243L21.5772 20.7718C21.5779 20.7713 21.5787 20.7707 21.5794 20.7702L22.1922 21.383C19.9708 23.0298 17.2133 24 14.2387 24C7.58745 24 2.05961 19.1362 1 12.7787H1.86811C2.91496 18.6638 8.0598 23.1447 14.2387 23.1447C16.6948 23.1447 18.9961 22.4328 20.9386 21.2037L18.5855 18.458Z"
+                                          fill={
+                                            {
+                                              "type": 2,
+                                            }
+                                          }
+                                          fillRule={0}
+                                          propList={
+                                            [
+                                              "fill",
+                                              "fillRule",
+                                            ]
+                                          }
+                                        />
+                                      </RNSVGGroup>
+                                    </RNSVGSvgView>
+                                    <Text
+                                      accessibilityElementsHidden={true}
+                                      accessible={false}
+                                      allowFontScaling={true}
+                                      ellipsizeMode="tail"
+                                      importantForAccessibility="no-hide-descendants"
+                                      maxFontSizeMultiplier={1.5}
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {},
+                                          {
+                                            "color": "#0E0F13",
+                                            "fontFamily": "Titillio",
+                                            "fontSize": 16,
+                                            "fontStyle": "normal",
+                                            "fontWeight": "600",
+                                            "lineHeight": undefined,
+                                          },
+                                          [
+                                            {
+                                              "textAlign": "auto",
+                                            },
+                                            {
+                                              "color": "#FFFFFF",
+                                            },
+                                            {
+                                              "color": undefined,
+                                            },
+                                          ],
+                                        ]
+                                      }
+                                    >
+                                      Entra con CIE
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessibilityLabel="Entra con SPID"
                               accessibilityRole="button"
                               accessibilityState={
                                 {
@@ -1574,169 +1770,16 @@ exports[`LandingScreen Should match the snapshot 1`] = `
                                       ]
                                     }
                                   >
-                                    Entra con CIE
+                                    Entra con SPID
                                   </Text>
                                 </View>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <View
-                            accessibilityLabel="Entra con SPID"
-                            accessibilityRole="button"
-                            accessibilityState={
-                              {
-                                "busy": false,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignSelf": "stretch",
-                                "flexShrink": 0,
-                              }
-                            }
-                            testID="landing-button-login-spid"
-                          >
                             <View
                               style={
                                 {
                                   "height": 16,
                                 }
-                              >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  animatedProps={
-                                    {
-                                      "color": undefined,
-                                    }
-                                  }
-                                  bbHeight={30}
-                                  bbWidth={30}
-                                  color="#555C70"
-                                  focusable={false}
-                                  height={30}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      {
-                                        "flex": 0,
-                                        "height": 30,
-                                        "width": 30,
-                                      },
-                                    ]
-                                  }
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={30}
-                                >
-                                  <RNSVGGroup
-                                    fill={
-                                      {
-                                        "payload": 4278190080,
-                                        "type": 0,
-                                      }
-                                    }
-                                  >
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
-                                      fill={
-                                        {
-                                          "type": 2,
-                                        }
-                                      }
-                                      fillRule={0}
-                                      propList={
-                                        [
-                                          "fill",
-                                          "fillRule",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
-                                <Text
-                                  accessibilityElementsHidden={true}
-                                  accessible={false}
-                                  allowFontScaling={true}
-                                  ellipsizeMode="tail"
-                                  importantForAccessibility="no-hide-descendants"
-                                  maxFontSizeMultiplier={1.5}
-                                  numberOfLines={1}
-                                  style={
-                                    [
-                                      {},
-                                      {
-                                        "color": "#0E0F13",
-                                        "fontFamily": "Titillio",
-                                        "fontSize": 16,
-                                        "fontStyle": "normal",
-                                        "fontWeight": "600",
-                                        "lineHeight": undefined,
-                                      },
-                                      [
-                                        {
-                                          "textAlign": "auto",
-                                        },
-                                        {
-                                          "color": "#FFFFFF",
-                                        },
-                                        {
-                                          "color": undefined,
-                                        },
-                                      ],
-                                    ]
-                                  }
-                                >
-                                  Entra con SPID
-                                </Text>
-                              </View>
-                            </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "height": 16,
                               }
                             />
                           </View>

From 3d3dac10453b0ecbb6e89794548f18b5b51e85c4 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 12 Sep 2025 11:39:35 +0200
Subject: [PATCH 19/24] Fix iOS build

---
 ios/ItaliaApp.xcodeproj/project.pbxproj | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/ios/ItaliaApp.xcodeproj/project.pbxproj b/ios/ItaliaApp.xcodeproj/project.pbxproj
index 486810f43eb..23dca7cdf6e 100644
--- a/ios/ItaliaApp.xcodeproj/project.pbxproj
+++ b/ios/ItaliaApp.xcodeproj/project.pbxproj
@@ -80,7 +80,6 @@
 		2AFAC65324C9B7C300E85199 /* ItaliaApp-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "ItaliaApp-Bridging-Header.h"; sourceTree = "<group>"; };
 		3CA5B0F4CFD44E78900FE43A /* TitilliumSansPro-LightItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumSansPro-LightItalic.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-LightItalic.otf"; sourceTree = "<group>"; };
 		3E5721DADB56490699700FBF /* Titillio-ThinItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Titillio-ThinItalic.otf"; path = "../assets/fonts/Titillio/Titillio-ThinItalic.otf"; sourceTree = "<group>"; };
-		492C60DC22CB52A0DF589428 /* Pods-ItaliaApp.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp.debug.xcconfig"; path = "Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp.debug.xcconfig"; sourceTree = "<group>"; };
 		4F54E8E3A56A4E139D5DC82D /* Titillio-BoldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Titillio-BoldItalic.otf"; path = "../assets/fonts/Titillio/Titillio-BoldItalic.otf"; sourceTree = "<group>"; };
 		59423B676D254801BFAA4C5E /* Titillio-Extrabold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Titillio-Extrabold.otf"; path = "../assets/fonts/Titillio/Titillio-Extrabold.otf"; sourceTree = "<group>"; };
 		63C062964A43B2B6E44AA4D0 /* Pods-ItaliaApp.canary.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp.canary.xcconfig"; path = "Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp.canary.xcconfig"; sourceTree = "<group>"; };
@@ -92,7 +91,6 @@
 		872A6A79E0CF4C4DA0AEAF3E /* TitilliumSansPro-BoldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumSansPro-BoldItalic.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-BoldItalic.otf"; sourceTree = "<group>"; };
 		875B0C3A5326413494A9311A /* DMMono-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "DMMono-Medium.ttf"; path = "../assets/fonts/DMMono/DMMono-Medium.ttf"; sourceTree = "<group>"; };
 		9205B2AD16D94BDAA69E880E /* Titillio-Black.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Titillio-Black.otf"; path = "../assets/fonts/Titillio/Titillio-Black.otf"; sourceTree = "<group>"; };
-		95FCD02945D3E70ED459F836 /* Pods-ItaliaApp.canary.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp.canary.xcconfig"; path = "Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp.canary.xcconfig"; sourceTree = "<group>"; };
 		96C2E93186814D36AD451D83 /* Titillio-ExtrablackItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Titillio-ExtrablackItalic.otf"; path = "../assets/fonts/Titillio/Titillio-ExtrablackItalic.otf"; sourceTree = "<group>"; };
 		A245EDE7064D4143BF1857DB /* Titillio-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Titillio-Regular.otf"; path = "../assets/fonts/Titillio/Titillio-Regular.otf"; sourceTree = "<group>"; };
 		B242A588B065130DE65386E4 /* Pods-ItaliaApp.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp.debug.xcconfig"; path = "Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp.debug.xcconfig"; sourceTree = "<group>"; };
@@ -102,7 +100,6 @@
 		B57C5DCC2D8B129A00173EF4 /* AppReviewModule.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = AppReviewModule.m; sourceTree = "<group>"; };
 		B57C5DCE2D8B12D200173EF4 /* AppReviewModule.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppReviewModule.swift; sourceTree = "<group>"; };
 		B58BBAC865EA4651B828C92B /* Titillio-Bold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Titillio-Bold.otf"; path = "../assets/fonts/Titillio/Titillio-Bold.otf"; sourceTree = "<group>"; };
-		B6DC0A9967E152725E36A793 /* libPods-ItaliaApp.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-ItaliaApp.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		C9E629838F224B4F9823D692 /* Titillio-Thin.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Titillio-Thin.otf"; path = "../assets/fonts/Titillio/Titillio-Thin.otf"; sourceTree = "<group>"; };
 		D688263BB87C4DFBA007CD92 /* Titillio-SemiboldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Titillio-SemiboldItalic.otf"; path = "../assets/fonts/Titillio/Titillio-SemiboldItalic.otf"; sourceTree = "<group>"; };
 		E65EB458FCBA5EA05FA80A1F /* Pods-ItaliaApp.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp.release.xcconfig"; path = "Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp.release.xcconfig"; sourceTree = "<group>"; };
@@ -344,6 +341,7 @@
 				16471906574A44719FD557C5 /* TitilliumSansPro-BoldItalic.otf in Resources */,
 				8D51BCD77547410BBC7E6050 /* TitilliumSansPro-Italic.otf in Resources */,
 				1024B7E387E34295AFBA19B6 /* TitilliumSansPro-LightItalic.otf in Resources */,
+				B572E1E42DC12161009BA244 /* Images.xcassets in Resources */,
 				A5C4E8CE93074865A66DFAC1 /* TitilliumSansPro-SemiboldItalic.otf in Resources */,
 				45678F6126F1401FB03B1B02 /* TitilliumSansPro-ThinItalic.otf in Resources */,
 				13F005FA91AA4EF5BAD12096 /* Titillio-Black.otf in Resources */,
@@ -426,19 +424,15 @@
 			inputFileListPaths = (
 			);
 			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
 			);
-			name = "[CP] Check Pods Manifest.lock";
+			name = "Start Packager";
 			outputFileListPaths = (
 			);
 			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-ItaliaApp-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
-			showEnvVarsInLog = 0;
+			shellScript = "# Type a script or drag a script file from your workspace to insert its path.\nexport RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\nif nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\nif ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\necho \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\nexit 2\nfi\nelse\nopen \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\nfi\nfi\n";
 		};
 		E23AA837AE8C328E85F7E88A /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;

From c30facc426b678dc3e31b0420d595e7c4b557d3e Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 12 Sep 2025 12:09:02 +0200
Subject: [PATCH 20/24] Fix buggy HelpCenter on Android

---
 ts/features/zendesk/screens/ZendeskAskPermissions.tsx |  3 ++-
 .../screens/ZendeskAskSeeReportsPermissions.tsx       |  4 ++--
 ts/features/zendesk/screens/ZendeskChooseCategory.tsx |  4 ++--
 .../zendesk/screens/ZendeskChooseSubCategory.tsx      |  4 ++--
 .../zendesk/screens/ZendeskSupportHelpCenter.tsx      |  5 +++--
 ts/navigation/AuthenticatedStackNavigator.tsx         |  5 +++--
 ts/navigation/NotAuthenticatedStackNavigator.tsx      | 11 ++++++++---
 7 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/ts/features/zendesk/screens/ZendeskAskPermissions.tsx b/ts/features/zendesk/screens/ZendeskAskPermissions.tsx
index 684416f6156..30ab5d96a25 100644
--- a/ts/features/zendesk/screens/ZendeskAskPermissions.tsx
+++ b/ts/features/zendesk/screens/ZendeskAskPermissions.tsx
@@ -391,7 +391,8 @@ const ZendeskAskPermissions = () => {
       }}
       testID={"ZendeskAskPermissions"}
       description={I18n.t("support.askPermissions.body")}
-      ignoreSafeAreaMargin={true}
+      /* Avoid status bar overlapping on Android */
+      ignoreSafeAreaMargin={Platform.OS === "ios" ? true : false}
       actions={buttonConf}
     >
       <ContentWrapper>
diff --git a/ts/features/zendesk/screens/ZendeskAskSeeReportsPermissions.tsx b/ts/features/zendesk/screens/ZendeskAskSeeReportsPermissions.tsx
index a5766c5e9bd..edaa4149a18 100644
--- a/ts/features/zendesk/screens/ZendeskAskSeeReportsPermissions.tsx
+++ b/ts/features/zendesk/screens/ZendeskAskSeeReportsPermissions.tsx
@@ -12,7 +12,7 @@ import { useNavigation } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import { ComponentProps } from "react";
-import { FlatList, ListRenderItemInfo } from "react-native";
+import { FlatList, ListRenderItemInfo, Platform } from "react-native";
 import I18n from "i18next";
 import { IOScrollViewWithLargeHeader } from "../../../components/ui/IOScrollViewWithLargeHeader";
 import { zendeskPrivacyUrl } from "../../../config";
@@ -122,8 +122,8 @@ const ZendeskAskSeeReportsPermissions = (props: Props) => {
       }}
       testID={"ZendeskAskPermissions"}
       description={I18n.t("support.askPermissions.listBody")}
+      ignoreSafeAreaMargin={Platform.OS === "ios" ? true : false}
       actions={buttonConf}
-      ignoreSafeAreaMargin={true}
     >
       <ContentWrapper>
         <IOButton
diff --git a/ts/features/zendesk/screens/ZendeskChooseCategory.tsx b/ts/features/zendesk/screens/ZendeskChooseCategory.tsx
index aaf01977740..9cc361a21c0 100644
--- a/ts/features/zendesk/screens/ZendeskChooseCategory.tsx
+++ b/ts/features/zendesk/screens/ZendeskChooseCategory.tsx
@@ -3,7 +3,7 @@ import {
   IOVisualCostants,
   ListItemNav
 } from "@pagopa/io-app-design-system";
-import { FlatList, ListRenderItemInfo } from "react-native";
+import { FlatList, ListRenderItemInfo, Platform } from "react-native";
 import I18n from "i18next";
 import { ZendeskCategory } from "../../../../definitions/content/ZendeskCategory";
 import { isReady } from "../../../common/model/RemoteValue";
@@ -97,7 +97,7 @@ const ZendeskChooseCategory = (props: Props) => {
         section: I18n.t("support.chooseCategory.header")
       }}
       description={I18n.t("support.chooseCategory.subTitle.category")}
-      ignoreSafeAreaMargin={true}
+      ignoreSafeAreaMargin={Platform.OS === "ios" ? true : false}
       testID={"ZendeskChooseCategory"}
     >
       <FlatList
diff --git a/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx b/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx
index 00df2b86e34..113a441fd61 100644
--- a/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx
+++ b/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx
@@ -7,7 +7,7 @@ import {
   useIOToast,
   VSpacer
 } from "@pagopa/io-app-design-system";
-import { FlatList, ListRenderItemInfo } from "react-native";
+import { FlatList, ListRenderItemInfo, Platform } from "react-native";
 import I18n from "i18next";
 import { ZendeskSubCategory } from "../../../../definitions/content/ZendeskSubCategory";
 import { IOScrollViewWithLargeHeader } from "../../../components/ui/IOScrollViewWithLargeHeader";
@@ -100,7 +100,7 @@ const ZendeskChooseSubCategory = (props: Props) => {
         label: I18n.t("support.chooseCategory.title.subCategory"),
         section: selectedCategory.description[locale]
       }}
-      ignoreSafeAreaMargin={true}
+      ignoreSafeAreaMargin={Platform.OS === "ios" ? true : false}
       testID={"ZendeskChooseCategory"}
     >
       {bannerEducational && (
diff --git a/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx b/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx
index 59c39e008c0..a8980bf00ff 100644
--- a/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx
+++ b/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx
@@ -26,7 +26,7 @@ import {
   useMemo,
   useState
 } from "react";
-import { FlatList, ListRenderItemInfo } from "react-native";
+import { FlatList, ListRenderItemInfo, Platform } from "react-native";
 import Animated, { useAnimatedRef } from "react-native-reanimated";
 import { InitializedProfile } from "../../../../definitions/backend/InitializedProfile";
 import IOMarkdown from "../../../components/IOMarkdown";
@@ -381,7 +381,8 @@ const ZendeskSupportHelpCenter = () => {
     navigation.setOptions({
       header: () => (
         <HeaderSecondLevel
-          ignoreSafeAreaMargin={true}
+          /* Avoid status bar overlapping on Android */
+          ignoreSafeAreaMargin={Platform.OS === "ios" ? true : false}
           title={I18n.t("support.helpCenter.header")}
           transparent={false}
           type="singleAction"
diff --git a/ts/navigation/AuthenticatedStackNavigator.tsx b/ts/navigation/AuthenticatedStackNavigator.tsx
index 53384007264..7a980c773b6 100644
--- a/ts/navigation/AuthenticatedStackNavigator.tsx
+++ b/ts/navigation/AuthenticatedStackNavigator.tsx
@@ -42,6 +42,7 @@ import CheckEmailNavigator from "../features/mailCheck/navigation/CheckEmailNavi
 import { MessagesStackNavigator } from "../features/messages/navigation/MessagesNavigator";
 import { MESSAGES_ROUTES } from "../features/messages/navigation/routes";
 import { MessagesSearchScreen } from "../features/messages/screens/MessagesSearchScreen";
+import OnboardingNavigator from "../features/onboarding/navigation/OnboardingNavigator.tsx";
 import { PageNotFound } from "../features/pageNotFound/screens/index.tsx";
 import { WalletBarcodeNavigator } from "../features/payments/barcode/navigation/navigator";
 import { PaymentsBarcodeRoutes } from "../features/payments/barcode/navigation/routes";
@@ -70,7 +71,6 @@ import {
   isIdPayEnabledSelector
 } from "../store/reducers/backendStatus/remoteConfig";
 import { isGestureEnabled } from "../utils/navigation";
-import OnboardingNavigator from "../features/onboarding/navigation/OnboardingNavigator.tsx";
 import { AppParamsList } from "./params/AppParamsList";
 import ROUTES from "./routes";
 import { MainTabNavigator } from "./TabNavigator";
@@ -236,7 +236,8 @@ const AuthenticatedStackNavigator = () => {
       <Stack.Group
         screenOptions={{
           headerShown: false,
-          presentation: "modal"
+          /* Avoid buggy modal behavior on Android */
+          presentation: Platform.OS === "ios" ? "modal" : "card"
         }}
       >
         <Stack.Screen
diff --git a/ts/navigation/NotAuthenticatedStackNavigator.tsx b/ts/navigation/NotAuthenticatedStackNavigator.tsx
index 92bbc63db36..2f1c578b042 100644
--- a/ts/navigation/NotAuthenticatedStackNavigator.tsx
+++ b/ts/navigation/NotAuthenticatedStackNavigator.tsx
@@ -1,8 +1,9 @@
 import { createStackNavigator } from "@react-navigation/stack";
-import { ZendeskStackNavigator } from "../features/zendesk/navigation/navigator";
-import ZENDESK_ROUTES from "../features/zendesk/navigation/routes";
+import { Platform } from "react-native";
 import AuthenticationNavigator from "../features/authentication/common/navigation/AuthenticationNavigator";
 import { AUTHENTICATION_ROUTES } from "../features/authentication/common/navigation/routes";
+import { ZendeskStackNavigator } from "../features/zendesk/navigation/navigator";
+import ZENDESK_ROUTES from "../features/zendesk/navigation/routes";
 import { AppParamsList } from "./params/AppParamsList";
 
 const Stack = createStackNavigator<AppParamsList>();
@@ -17,7 +18,11 @@ const NotAuthenticatedStackNavigator = () => (
     />
 
     <Stack.Group
-      screenOptions={{ headerMode: "screen", presentation: "modal" }}
+      screenOptions={{
+        headerMode: "screen",
+        /* Avoid buggy modal behavior on Android */
+        presentation: Platform.OS === "ios" ? "modal" : "card"
+      }}
     >
       <Stack.Screen
         name={ZENDESK_ROUTES.MAIN}

From 5d31b4f8f58f4e3cf2d52fa537b9c371bdf5d6e5 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 15 Sep 2025 13:43:53 +0200
Subject: [PATCH 21/24] Update the DS package version with pre-release

---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 7b3f13b6a4f..33295ff3bb9 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "@babel/plugin-transform-react-jsx": "^7.25.9",
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^5.1.2",
-    "@pagopa/io-app-design-system": "5.11.0",
+    "@pagopa/io-app-design-system": "5.11.1-0",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-cie": "^1.1.0",
     "@pagopa/io-react-native-cieid": "^0.3.5",
diff --git a/yarn.lock b/yarn.lock
index dd085bd8585..68dcb0c7201 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3870,9 +3870,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pagopa/io-app-design-system@npm:5.11.0":
-  version: 5.11.0
-  resolution: "@pagopa/io-app-design-system@npm:5.11.0"
+"@pagopa/io-app-design-system@npm:5.11.1-0":
+  version: 5.11.1-0
+  resolution: "@pagopa/io-app-design-system@npm:5.11.1-0"
   dependencies:
     auto-changelog: ^2.4.0
     lodash: ^4.17.21
@@ -3893,7 +3893,7 @@ __metadata:
     react-native-reanimated: "*"
     react-native-safe-area-context: "*"
     react-native-svg: "*"
-  checksum: f9d499cd816e7087529a05e96ef9efd4ca957bb556bab4b11004eebac9da30c0326852c3bee34f8d7f35cb8e65394ebce3b98ec1aae7cd0ccc3fce53752beefd
+  checksum: 44ba49abcb4a2bdc36fd3820652837c2ad6545393f5d164c1b45f4f9bea63c85cb1886391954eb990be7923431786f0581bf2dfe200a902ad9bc68f5d29e3b33
   languageName: node
   linkType: hard
 
@@ -12954,7 +12954,7 @@ __metadata:
     "@babel/runtime": ^7.25.0
     "@gorhom/bottom-sheet": ^5.1.2
     "@jambit/eslint-plugin-typed-redux-saga": ^0.4.0
-    "@pagopa/io-app-design-system": 5.11.0
+    "@pagopa/io-app-design-system": 5.11.1-0
     "@pagopa/io-pagopa-commons": ^3.1.0
     "@pagopa/io-react-native-cie": ^1.1.0
     "@pagopa/io-react-native-cieid": ^0.3.5

From 28144980a91b0f95fd487fddf1870d6f5027175c Mon Sep 17 00:00:00 2001
From: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com>
Date: Thu, 18 Sep 2025 15:40:53 +0200
Subject: [PATCH 22/24] feat: custom navigation Android bar color

---
 .../java/it/pagopa/io/app/MainApplication.kt  |  1 +
 .../io/app/NavigationBarManagerModule.kt      | 96 +++++++++++++++++++
 .../io/app/NavigationBarManagerPackage.kt     | 16 ++++
 .../screens/AppearancePreferenceScreen.tsx    | 32 ++++++-
 ts/hooks/useAppThemeConfiguration.tsx         | 21 ++--
 5 files changed, 156 insertions(+), 10 deletions(-)
 create mode 100644 android/app/src/main/java/it/pagopa/io/app/NavigationBarManagerModule.kt
 create mode 100644 android/app/src/main/java/it/pagopa/io/app/NavigationBarManagerPackage.kt

diff --git a/android/app/src/main/java/it/pagopa/io/app/MainApplication.kt b/android/app/src/main/java/it/pagopa/io/app/MainApplication.kt
index 8074ae98482..ec4607e7725 100644
--- a/android/app/src/main/java/it/pagopa/io/app/MainApplication.kt
+++ b/android/app/src/main/java/it/pagopa/io/app/MainApplication.kt
@@ -24,6 +24,7 @@ class MainApplication : Application(), ReactApplication {
             // add(MyReactNativePackage())
             add(CiePackage())
             add(AppReviewPackage())
+            add(NavigationBarManagerPackage())
           }
  
         override fun getJSMainModuleName(): String = "index"
diff --git a/android/app/src/main/java/it/pagopa/io/app/NavigationBarManagerModule.kt b/android/app/src/main/java/it/pagopa/io/app/NavigationBarManagerModule.kt
new file mode 100644
index 00000000000..045afa30ab0
--- /dev/null
+++ b/android/app/src/main/java/it/pagopa/io/app/NavigationBarManagerModule.kt
@@ -0,0 +1,96 @@
+package it.pagopa.io.app
+
+import android.app.Activity
+import android.graphics.Color
+import android.os.Build
+import android.view.WindowInsetsController
+import com.facebook.react.bridge.*
+import com.facebook.react.module.annotations.ReactModule
+
+@ReactModule(name = NavigationBarManagerModule.NAME)
+class NavigationBarManagerModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
+    
+    companion object {
+        const val NAME = "NavigationBarManager"
+    }
+
+    override fun getName(): String {
+        return NAME
+    }
+
+    @ReactMethod
+    fun setNavigationBarColor(theme: String, backgroundColor: String, promise: Promise) {
+        val activity = currentActivity
+        if (activity == null) {
+            promise.reject("NO_ACTIVITY", "No current activity available")
+            return
+        }
+
+        try {
+            activity.runOnUiThread {
+                when (theme.lowercase()) {
+                    "light" -> setLightNavBar(activity, backgroundColor)
+                    "dark" -> setDarkNavBar(activity, backgroundColor)
+                    else -> setLightNavBar(activity, backgroundColor) // Default to light
+                }
+            }
+            promise.resolve(true)
+        } catch (e: Exception) {
+            promise.reject("ERROR", "Failed to set navigation bar color: ${e.message}")
+        }
+    }
+
+    private fun setLightNavBar(activity: Activity, backgroundColor: String) {
+        val navBarColor = try {
+            Color.parseColor(backgroundColor)
+        } catch (e: IllegalArgumentException) {
+            Color.parseColor("#FFFFFF") // Fallback to white
+        }
+        
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+            // Android 11+ (API 30+)
+            val controller = activity.window.insetsController
+            controller?.setSystemBarsAppearance(
+                WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS,
+                WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS
+            )
+            activity.window.navigationBarColor = navBarColor
+        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            // Android 8.0+ (API 26+)
+            activity.window.decorView.systemUiVisibility = 
+                activity.window.decorView.systemUiVisibility or 
+                android.view.View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
+            activity.window.navigationBarColor = navBarColor
+        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            // Android 5.0+ (API 21+) - no light navigation bar support
+            activity.window.navigationBarColor = navBarColor
+        }
+    }
+
+    private fun setDarkNavBar(activity: Activity, backgroundColor: String) {
+        val navBarColor = try {
+            Color.parseColor(backgroundColor)
+        } catch (e: IllegalArgumentException) {
+            Color.parseColor("#000000") // Fallback to black
+        }
+        
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+            // Android 11+ (API 30+)
+            val controller = activity.window.insetsController
+            controller?.setSystemBarsAppearance(
+                0,
+                WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS
+            )
+            activity.window.navigationBarColor = navBarColor
+        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            // Android 8.0+ (API 26+)
+            activity.window.decorView.systemUiVisibility = 
+                activity.window.decorView.systemUiVisibility and 
+                android.view.View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR.inv()
+            activity.window.navigationBarColor = navBarColor
+        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            // Android 5.0+ (API 21+)
+            activity.window.navigationBarColor = navBarColor
+        }
+    }
+}
\ No newline at end of file
diff --git a/android/app/src/main/java/it/pagopa/io/app/NavigationBarManagerPackage.kt b/android/app/src/main/java/it/pagopa/io/app/NavigationBarManagerPackage.kt
new file mode 100644
index 00000000000..f3fb8586b06
--- /dev/null
+++ b/android/app/src/main/java/it/pagopa/io/app/NavigationBarManagerPackage.kt
@@ -0,0 +1,16 @@
+package it.pagopa.io.app
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class NavigationBarManagerPackage : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return listOf(NavigationBarManagerModule(reactContext))
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return emptyList()
+    }
+}
\ No newline at end of file
diff --git a/ts/features/settings/preferences/screens/AppearancePreferenceScreen.tsx b/ts/features/settings/preferences/screens/AppearancePreferenceScreen.tsx
index fcc6cf5571f..1480fac9c0f 100644
--- a/ts/features/settings/preferences/screens/AppearancePreferenceScreen.tsx
+++ b/ts/features/settings/preferences/screens/AppearancePreferenceScreen.tsx
@@ -3,14 +3,23 @@ import {
   RadioGroup,
   useIONewTypeface,
   useIOThemeContext,
-  VStack
+  VStack,
+  IOColors,
+  IOThemeLight,
+  IOThemeDark
 } from "@pagopa/io-app-design-system";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useFocusEffect } from "@react-navigation/native";
 import { constVoid } from "fp-ts/lib/function";
 import I18n from "i18next";
 import { ReactElement, useState } from "react";
-import { Appearance, useColorScheme, View } from "react-native";
+import {
+  Appearance,
+  useColorScheme,
+  View,
+  NativeModules,
+  Platform
+} from "react-native";
 import { FONT_PERSISTENCE_KEY } from "../../../../common/context/DSTypefaceContext";
 import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
 import {
@@ -29,6 +38,23 @@ import {
   trackAppearancePreferenceTypefaceUpdate
 } from "../../common/analytics";
 
+const { NavigationBarManager } = NativeModules;
+
+export const updateNavigationBarColor = (theme?: ColorModeChoice | null) => {
+  if (Platform.OS === "android" && NavigationBarManager && theme) {
+    const resolvedTheme = theme === "auto" ? "light" : theme;
+    const backgroundColor =
+      resolvedTheme === "dark"
+        ? IOColors[IOThemeDark["appBackground-primary"]]
+        : IOColors[IOThemeLight["appBackground-primary"]];
+
+    NavigationBarManager.setNavigationBarColor(
+      resolvedTheme,
+      backgroundColor
+    ).catch(constVoid);
+  }
+};
+
 /**
  * Display the appearance related settings
  * @param props
@@ -74,10 +100,12 @@ const AppearancePreferenceScreen = (): ReactElement => {
       if (choice === "auto") {
         Appearance.setColorScheme(undefined);
         setTheme(systemColorScheme);
+        updateNavigationBarColor(systemColorScheme || "light");
         return;
       }
       Appearance.setColorScheme(choice);
       setTheme(choice);
+      updateNavigationBarColor(choice);
     });
   };
 
diff --git a/ts/hooks/useAppThemeConfiguration.tsx b/ts/hooks/useAppThemeConfiguration.tsx
index b02c5d0160b..22b0a4b661c 100644
--- a/ts/hooks/useAppThemeConfiguration.tsx
+++ b/ts/hooks/useAppThemeConfiguration.tsx
@@ -1,8 +1,9 @@
 import { useIOThemeContext } from "@pagopa/io-app-design-system";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { Appearance, ColorSchemeName, useColorScheme } from "react-native";
-import { useEffect } from "react";
 import { constVoid } from "fp-ts/lib/function";
+import { useEffect } from "react";
+import { Appearance, ColorSchemeName, useColorScheme } from "react-native";
+import { updateNavigationBarColor } from "../features/settings/preferences/screens/AppearancePreferenceScreen";
 import { useOnFirstRender } from "../utils/hooks/useOnFirstRender";
 
 export const THEME_PERSISTENCE_KEY = "selectedAppThemeConfiguration";
@@ -18,18 +19,21 @@ export const useAppThemeConfiguration = () => {
         if (value === undefined || value === null) {
           Appearance.setColorScheme("light");
           setTheme("light");
+          updateNavigationBarColor("light");
           return;
         }
-        Appearance.setColorScheme(
-          value === "auto" ? undefined : (value as ColorSchemeName)
-        );
-        setTheme(
-          value === "auto" ? systemColorScheme : (value as ColorSchemeName)
-        );
+        const themeValue =
+          value === "auto" ? undefined : (value as ColorSchemeName);
+        const resolvedTheme =
+          value === "auto" ? systemColorScheme : (value as ColorSchemeName);
+        Appearance.setColorScheme(themeValue);
+        setTheme(resolvedTheme);
+        updateNavigationBarColor(resolvedTheme);
       })
       .catch(() => {
         Appearance.setColorScheme("light");
         setTheme("light");
+        updateNavigationBarColor("light");
       });
   });
 
@@ -38,6 +42,7 @@ export const useAppThemeConfiguration = () => {
       .then(value => {
         if (value === "auto") {
           setTheme(systemColorScheme);
+          updateNavigationBarColor(systemColorScheme);
         }
       })
       .catch(constVoid);

From 46933c82031fe5abd6c69da85b1f8b4b60e6e140 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 23 Sep 2025 17:19:52 +0200
Subject: [PATCH 23/24] Update `package.json` and `yarn.lock`

---
 package.json |  2 +-
 yarn.lock    | 32 ++++----------------------------
 2 files changed, 5 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index c920f1ca5aa..50bed641a7a 100644
--- a/package.json
+++ b/package.json
@@ -294,4 +294,4 @@
     }
   },
   "packageManager": "yarn@3.6.4"
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index f15cdee6bb6..d35bbe219df 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1,3 +1,6 @@
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
+
 __metadata:
   version: 6
   cacheKey: 8
@@ -3867,33 +3870,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pagopa/io-app-design-system@npm:5.11.1":
-  version: 5.11.1
-  resolution: "@pagopa/io-app-design-system@npm:5.11.1"
-  dependencies:
-    auto-changelog: ^2.4.0
-    lodash: ^4.17.21
-    react-native-easing-gradient: ^1.1.1
-    react-native-gesture-handler: ^2.25.0
-    react-native-haptic-feedback: ^2.3.3
-    react-native-linear-gradient: ^2.8.3
-    react-native-reanimated: 3.17.5
-    react-native-safe-area-context: ^5.4.1
-    react-native-svg: ^15.12.0
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-    react-native-easing-gradient: "*"
-    react-native-gesture-handler: "*"
-    react-native-haptic-feedback: "*"
-    react-native-linear-gradient: "*"
-    react-native-reanimated: "*"
-    react-native-safe-area-context: "*"
-    react-native-svg: "*"
-  checksum: 3783399999ebf6f6b7b9feaaa6ae1909b219685c67b1c5ba808124f848ff219c0a292f17f83ca5ee21378613df7c57d1f291b4c6113a65c6ca3c4612b37f3921
-  languageName: node
-  linkType: hard
-
 "@pagopa/io-app-design-system@npm:5.11.1-0":
   version: 5.11.1-0
   resolution: "@pagopa/io-app-design-system@npm:5.11.1-0"
@@ -12978,7 +12954,7 @@ __metadata:
     "@babel/runtime": ^7.25.0
     "@gorhom/bottom-sheet": ^5.1.2
     "@jambit/eslint-plugin-typed-redux-saga": ^0.4.0
-    "@pagopa/io-app-design-system": 5.11.1
+    "@pagopa/io-app-design-system": 5.11.1-0
     "@pagopa/io-pagopa-commons": ^3.1.0
     "@pagopa/io-react-native-cie": ^1.1.1
     "@pagopa/io-react-native-cieid": ^0.3.5

From faba0a2406375a745bcdb80bdbfda8fa8eb8e00f Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Thu, 23 Oct 2025 10:56:24 +0200
Subject: [PATCH 24/24] Update `jest` snapshots

---
 ...useSendActivationBottomSheet.test.tsx.snap | 100 +++++-----
 ...useSendAreYouSureBottomSheet.test.tsx.snap | 182 +++++++++---------
 2 files changed, 143 insertions(+), 139 deletions(-)

diff --git a/ts/features/pn/loginEngagement/hooks/__tests__/__snapshots__/useSendActivationBottomSheet.test.tsx.snap b/ts/features/pn/loginEngagement/hooks/__tests__/__snapshots__/useSendActivationBottomSheet.test.tsx.snap
index b3c206e9d41..719be70db6f 100644
--- a/ts/features/pn/loginEngagement/hooks/__tests__/__snapshots__/useSendActivationBottomSheet.test.tsx.snap
+++ b/ts/features/pn/loginEngagement/hooks/__tests__/__snapshots__/useSendActivationBottomSheet.test.tsx.snap
@@ -1,64 +1,66 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`useSendActivationBottomSheet should match the snapshot 1`] = `
-<Modal
-  accessible={false}
-  backdropComponent={[Function]}
-  backgroundStyle={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
-  enableDismissOnClose={true}
-  enableDynamicSizing={true}
-  footerComponent={[Function]}
-  handleComponent={[Function]}
-  importantForAccessibility="yes"
-  maxDynamicContentSize={NaN}
-  onDismiss={[Function]}
-  ref={
-    {
-      "current": null,
+<React.Fragment>
+  <Modal
+    accessible={false}
+    backdropComponent={[Function]}
+    backgroundStyle={
+      {
+        "backgroundColor": "#FFFFFF",
+      }
     }
-  }
-  style={
-    {
-      "borderCurve": "continuous",
-      "borderTopLeftRadius": 24,
-      "borderTopRightRadius": 24,
-      "overflow": "hidden",
+    enableDismissOnClose={true}
+    enableDynamicSizing={true}
+    footerComponent={[Function]}
+    handleComponent={[Function]}
+    importantForAccessibility="yes"
+    maxDynamicContentSize={NaN}
+    onDismiss={[Function]}
+    ref={
+      {
+        "current": null,
+      }
     }
-  }
->
-  <ScrollView
-    overScrollMode="never"
     style={
       {
-        "paddingHorizontal": 24,
+        "borderCurve": "continuous",
+        "borderTopLeftRadius": 24,
+        "borderTopRightRadius": 24,
+        "overflow": "hidden",
       }
     }
   >
-    <VStack
-      space={24}
-    >
-      <Memo(IOMarkdown)
-        content="Premendo **Continua** dichiari di aver letto l'[Informativa Privacy](PRIVACY_URL) e di accettare i [Termini e Condizioni d'uso](TOS_URL)."
-      />
-      <ForwardRef
-        label="Continua"
-        loading={false}
-        onPress={[Function]}
-        testID="sendActivationID"
-      />
-      <View />
-    </VStack>
-    <View
+    <ScrollView
+      overScrollMode="never"
       style={
         {
-          "height": 0,
+          "paddingHorizontal": 24,
         }
       }
-    />
-  </ScrollView>
-</Modal>
+    >
+      <VStack
+        space={24}
+      >
+        <Memo(IOMarkdown)
+          content="Premendo **Continua** dichiari di aver letto l'[Informativa Privacy](PRIVACY_URL) e di accettare i [Termini e Condizioni d'uso](TOS_URL)."
+        />
+        <ForwardRef
+          label="Continua"
+          loading={false}
+          onPress={[Function]}
+          testID="sendActivationID"
+        />
+        <View />
+      </VStack>
+      <View
+        style={
+          {
+            "height": 0,
+          }
+        }
+      />
+    </ScrollView>
+  </Modal>
+</React.Fragment>
 `;
diff --git a/ts/features/pn/loginEngagement/hooks/__tests__/__snapshots__/useSendAreYouSureBottomSheet.test.tsx.snap b/ts/features/pn/loginEngagement/hooks/__tests__/__snapshots__/useSendAreYouSureBottomSheet.test.tsx.snap
index de1b28da27a..7319587e39f 100644
--- a/ts/features/pn/loginEngagement/hooks/__tests__/__snapshots__/useSendAreYouSureBottomSheet.test.tsx.snap
+++ b/ts/features/pn/loginEngagement/hooks/__tests__/__snapshots__/useSendAreYouSureBottomSheet.test.tsx.snap
@@ -1,111 +1,113 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`useSendAreYouSureBottomSheet should match the snapshot 1`] = `
-<Modal
-  accessible={false}
-  backdropComponent={[Function]}
-  backgroundStyle={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
-  enableDismissOnClose={true}
-  enableDynamicSizing={true}
-  footerComponent={[Function]}
-  handleComponent={[Function]}
-  importantForAccessibility="yes"
-  maxDynamicContentSize={NaN}
-  onDismiss={[Function]}
-  ref={
-    {
-      "current": null,
+<React.Fragment>
+  <Modal
+    accessible={false}
+    backdropComponent={[Function]}
+    backgroundStyle={
+      {
+        "backgroundColor": "#FFFFFF",
+      }
     }
-  }
-  style={
-    {
-      "borderCurve": "continuous",
-      "borderTopLeftRadius": 24,
-      "borderTopRightRadius": 24,
-      "overflow": "hidden",
+    enableDismissOnClose={true}
+    enableDynamicSizing={true}
+    footerComponent={[Function]}
+    handleComponent={[Function]}
+    importantForAccessibility="yes"
+    maxDynamicContentSize={NaN}
+    onDismiss={[Function]}
+    ref={
+      {
+        "current": null,
+      }
     }
-  }
->
-  <ScrollView
-    overScrollMode="never"
     style={
       {
-        "paddingHorizontal": 24,
+        "borderCurve": "continuous",
+        "borderTopLeftRadius": 24,
+        "borderTopRightRadius": 24,
+        "overflow": "hidden",
       }
     }
   >
-    <VStack
-      space={24}
-    >
-      <FeatureInfo
-        body={
-          <Memo(IOMarkdown)
-            content="Se leggi le comunicazioni a valore legale online in tempo, **eviti le raccomandate e risparmi.**"
-          />
+    <ScrollView
+      overScrollMode="never"
+      style={
+        {
+          "paddingHorizontal": 24,
         }
-        pictogramProps={
-          {
-            "name": "savingMoney",
-            "pictogramStyle": "default",
+      }
+    >
+      <VStack
+        space={24}
+      >
+        <FeatureInfo
+          body={
+            <Memo(IOMarkdown)
+              content="Se leggi le comunicazioni a valore legale online in tempo, **eviti le raccomandate e risparmi.**"
+            />
           }
-        }
-      />
-      <FeatureInfo
-        body={
-          <Memo(IOMarkdown)
-            content="Con il servizio SEND su IO, **ti avvisiamo subito** quando c’è una comunicazione importante per te."
-          />
-        }
-        pictogramProps={
-          {
-            "name": "message",
-            "pictogramStyle": "default",
+          pictogramProps={
+            {
+              "name": "savingMoney",
+              "pictogramStyle": "default",
+            }
           }
-        }
-      />
-      <Memo(IOMarkdown)
-        content="Premendo **Attiva SEND su IO** dichiari di aver letto l'[Informativa Privacy](PRIVACY_URL) e di accettare i [Termini e Condizioni d'uso](TOS_URL)."
-      />
-      <VStack
-        space={16}
-        style={
-          {
-            "alignItems": "center",
+        />
+        <FeatureInfo
+          body={
+            <Memo(IOMarkdown)
+              content="Con il servizio SEND su IO, **ti avvisiamo subito** quando c’è una comunicazione importante per te."
+            />
           }
-        }
-      >
-        <ForwardRef
-          fullWidth={true}
-          label="Attiva SEND su IO"
-          loading={false}
-          onPress={[Function]}
-          testID="sendActivationID"
+          pictogramProps={
+            {
+              "name": "message",
+              "pictogramStyle": "default",
+            }
+          }
+        />
+        <Memo(IOMarkdown)
+          content="Premendo **Attiva SEND su IO** dichiari di aver letto l'[Informativa Privacy](PRIVACY_URL) e di accettare i [Termini e Condizioni d'uso](TOS_URL)."
         />
-        <View>
+        <VStack
+          space={16}
+          style={
+            {
+              "alignItems": "center",
+            }
+          }
+        >
           <ForwardRef
-            label="Non attivare SEND su IO"
+            fullWidth={true}
+            label="Attiva SEND su IO"
+            loading={false}
             onPress={[Function]}
-            testID="sendDismissalID"
-            textAlign="center"
-            variant="link"
+            testID="sendActivationID"
           />
-        </View>
-        <VSpacer
-          size={8}
-        />
+          <View>
+            <ForwardRef
+              label="Non attivare SEND su IO"
+              onPress={[Function]}
+              testID="sendDismissalID"
+              textAlign="center"
+              variant="link"
+            />
+          </View>
+          <VSpacer
+            size={8}
+          />
+        </VStack>
       </VStack>
-    </VStack>
-    <View
-      style={
-        {
-          "height": 0,
+      <View
+        style={
+          {
+            "height": 0,
+          }
         }
-      }
-    />
-  </ScrollView>
-</Modal>
+      />
+    </ScrollView>
+  </Modal>
+</React.Fragment>
 `;