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

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

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

android/app/src/main/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"

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
+        }
+    }
+}

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()
+    }
+}

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

@@ -5,6 +5,7 @@
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/ic_launcher_background"
+  android:fitsSystemWindows="false"
 >
 
 

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

@@ -6,7 +6,10 @@
         <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:windowOptOutEdgeToEdgeEnforcement">true</item>
+
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+        <!-- Optional: set to transparent if your app is drawing behind the status bar. -->
+        <item name="android:statusBarColor">@android:color/transparent</item>
     </style>
 
     <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">

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.8",
+    "@pagopa/io-app-design-system": "5.11.9-0",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-cie": "^1.2.0",
     "@pagopa/io-react-native-cieid": "^0.3.5",
@@ -139,7 +139,7 @@
     "react-native-push-notification": "^8.1.1",
     "react-native-qrcode-svg": "^6.3.12",
     "react-native-reanimated": "^3.17.5",
-    "react-native-safe-area-context": "^5.4.0",
+    "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",
@@ -292,4 +292,4 @@
     }
   },
   "packageManager": "[email protected]"
-}
+}

ts/RootContainer.tsx

@@ -6,7 +6,8 @@ import {
   AppState,
   AppStateStatus,
   EmitterSubscription,
-  NativeEventSubscription
+  NativeEventSubscription,
+  StatusBar
 } from "react-native";
 import SplashScreen from "react-native-splash-screen";
 import { connect } from "react-redux";
@@ -110,6 +111,11 @@ class RootContainer extends PureComponent<Props> {
 
     return (
       <>
+        <StatusBar
+          translucent
+          barStyle={"dark-content"}
+          backgroundColor={"transparent"}
+        />
         <IONavigationContainer />
 
         {/* When debug mode is enabled, the following information

ts/components/DebugInfoOverlay.tsx

@@ -8,13 +8,8 @@ import {
 } from "@pagopa/io-app-design-system";
 
 import { FunctionComponent, useState } from "react";
-import {
-  Platform,
-  Pressable,
-  SafeAreaView,
-  StyleSheet,
-  View
-} from "react-native";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { selectItwEnv } from "../features/itwallet/common/store/selectors/environment";
 import { ReduxProps } from "../store/actions/types";
@@ -69,11 +64,16 @@ const DebugInfoOverlay: 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
@@ -123,7 +123,7 @@ const DebugInfoOverlay: FunctionComponent<Props> = (props: Props) => {
             onPress={() => showDebugData(prevState => !prevState)}
           />
         </VStack>
-      </SafeAreaView>
+      </View>
       {isDebugDataVisibile && (
         <DebugDataOverlay onDismissed={() => showDebugData(false)} />
       )}