[SELF-810] Edge-to-edge: add iOS-only SystemBars wrapper and update Android handling (#1610)

* Update edge-to-edge handling

* update lock file

* formatting

* agent feedback

app/android/app/build.gradle

@@ -231,8 +231,9 @@ dependencies {
     implementation "com.google.guava:guava:31.1-android"
     implementation "androidx.profileinstaller:profileinstaller:1.3.1"
 
-    implementation "androidx.activity:activity:1.9.3"
-    implementation "androidx.activity:activity-ktx:1.9.3"
+    implementation "androidx.activity:activity:1.10.1"
+    implementation "androidx.activity:activity-ktx:1.10.1"
+    implementation "com.google.android.material:material:1.12.0"
 
     implementation "com.google.android.play:app-update:2.1.0"
 }

app/android/app/src/main/java/com/proofofpassportapp/MainActivity.kt

@@ -5,9 +5,8 @@ package com.proofofpassportapp
 import android.content.Intent
 import android.os.Bundle
 import android.util.Log
-import android.graphics.Color
-import androidx.activity.SystemBarStyle
-import androidx.activity.enableEdgeToEdge
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsControllerCompat
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
@@ -44,12 +43,11 @@ class MainActivity : ReactActivity() {
     // Prevent fragment state restoration to avoid react-native-screens crash
     // See: https://github.com/software-mansion/react-native-screens/issues/17#issuecomment-424704978
     super.onCreate(null)
-    // Ensure edge-to-edge is enabled consistently across Android versions using
-    // the AndroidX helper so deprecated window color APIs are avoided.
-    enableEdgeToEdge(
-      statusBarStyle = SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT),
-      navigationBarStyle = SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT)
-    )
+    WindowCompat.setDecorFitsSystemWindows(window, false)
+    WindowInsetsControllerCompat(window, window.decorView).apply {
+      systemBarsBehavior =
+        WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
+    }
     // Allow system to manage orientation for large screens
   }
 }

app/ios/Podfile.lock

@@ -2065,7 +2065,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (4.15.3):
+  - RNScreens (4.17.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2086,9 +2086,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 4.15.3)
+    - RNScreens/common (= 4.17.0)
     - Yoga
-  - RNScreens/common (4.15.3):
+  - RNScreens/common (4.17.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2639,7 +2639,7 @@ SPEC CHECKSUMS:
   RNKeychain: 471ceef8c13f15a5534c3cd2674dbbd9d0680e52
   RNLocalize: 4f5e4a46d2bccd04ccb96721e438dcb9de17c2e0
   RNReactNativeHapticFeedback: e526ac4a7ca9fb23c7843ea4fd7d823166054c73
-  RNScreens: 806e1449a8ec63c2a4e4cf8a63cc80203ccda9b8
+  RNScreens: 8049d2198d60c2b8f00b115270ab7a08edfa4190
   RNSentry: 6ad982be2c8e32dab912afb4132b6a0d88484ea0
   RNSVG: e1cf5a9a5aa12c69f2ec47031defbd87ae7fb697
   segment-analytics-react-native: 0eae155b0e9fa560fa6b17d78941df64537c35b7

app/package.json

@@ -161,7 +161,7 @@
     "react-native-passkey": "^3.3.1",
     "react-native-passport-reader": "1.0.3",
     "react-native-safe-area-context": "^5.6.1",
-    "react-native-screens": "4.15.3",
+    "react-native-screens": "4.17.0",
     "react-native-sqlite-storage": "^6.0.1",
     "react-native-svg": "15.14.0",
     "react-native-svg-web": "1.0.9",

app/src/components/SystemBars.tsx

@@ -0,0 +1,19 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import React from 'react';
+import { Platform } from 'react-native';
+import { SystemBars as EdgeToEdgeSystemBars } from 'react-native-edge-to-edge';
+
+export type { SystemBarStyle } from 'react-native-edge-to-edge';
+
+type SystemBarsProps = React.ComponentProps<typeof EdgeToEdgeSystemBars>;
+
+export const SystemBars: React.FC<SystemBarsProps> = props => {
+  if (Platform.OS === 'android' || Platform.OS === 'web') {
+    return null;
+  }
+
+  return <EdgeToEdgeSystemBars {...props} />;
+};

app/src/components/navbar/BaseNavBar.tsx

@@ -4,8 +4,6 @@
 
 import React, { useMemo } from 'react';
 import type { TextProps } from 'react-native';
-import type { SystemBarStyle } from 'react-native-edge-to-edge';
-import { SystemBars } from 'react-native-edge-to-edge';
 import { ChevronLeft, X } from '@tamagui/lucide-icons';
 
 import type { ViewProps } from '@selfxyz/mobile-sdk-alpha/components';
@@ -16,6 +14,9 @@ import {
   XStack,
 } from '@selfxyz/mobile-sdk-alpha/components';
 
+import type { SystemBarStyle } from '@/components/SystemBars';
+import { SystemBars } from '@/components/SystemBars';
+
 interface NavBarProps extends ViewProps {
   children: React.ReactNode;
   backgroundColor?: string;

app/src/components/navbar/HeadlessNavForEuclid.tsx

@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import { SystemBars } from 'react-native-edge-to-edge';
 import type { NativeStackHeaderProps } from '@react-navigation/native-stack';
 
+import { SystemBars } from '@/components/SystemBars';
+
 export const HeadlessNavForEuclid = (props: NativeStackHeaderProps) => {
   return (
     <>

app/src/layouts/ExpandableBottomLayout.tsx

@@ -3,7 +3,6 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import React from 'react';
-import { SystemBars } from 'react-native-edge-to-edge';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type {
@@ -15,6 +14,8 @@ import type {
 import { ExpandableBottomLayout as BaseExpandableBottomLayout } from '@selfxyz/mobile-sdk-alpha';
 import { black } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
+import { SystemBars } from '@/components/SystemBars';
+
 const Layout: React.FC<LayoutProps> = ({
   children,
   backgroundColor,

app/src/navigation/app.tsx

@@ -3,11 +3,11 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import React from 'react';
-import { SystemBars } from 'react-native-edge-to-edge';
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 
 import type { DocumentCategory } from '@selfxyz/common/utils/types';
 
+import { SystemBars } from '@/components/SystemBars';
 import DeferredLinkingInfoScreen from '@/screens/app/DeferredLinkingInfoScreen';
 import GratificationScreen from '@/screens/app/GratificationScreen';
 import LoadingScreen from '@/screens/app/LoadingScreen';

app/src/screens/app/GratificationScreen.tsx

@@ -9,7 +9,6 @@ import {
   StyleSheet,
   Text as RNText,
 } from 'react-native';
-import { SystemBars } from 'react-native-edge-to-edge';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Text, View, YStack } from 'tamagui';
 import { useNavigation, useRoute } from '@react-navigation/native';
@@ -28,6 +27,7 @@ import { dinot, dinotBold } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
 
 import GratificationBg from '@/assets/images/gratification_bg.svg';
 import SelfLogo from '@/assets/logos/self.svg';
+import { SystemBars } from '@/components/SystemBars';
 import type { RootStackParamList } from '@/navigation';
 
 const GratificationScreen: React.FC = () => {

app/src/screens/documents/selection/DocumentOnboardingScreen.tsx

@@ -5,7 +5,6 @@
 import LottieView from 'lottie-react-native';
 import React, { useEffect, useRef } from 'react';
 import { StyleSheet } from 'react-native';
-import { SystemBars } from 'react-native-edge-to-edge';
 import { useNavigation } from '@react-navigation/native';
 
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
@@ -58,7 +57,6 @@ const DocumentOnboardingScreen: React.FC = () => {
 
   return (
     <ExpandableBottomLayout.Layout backgroundColor={black}>
-      <SystemBars style="light" />
       <ExpandableBottomLayout.TopSection roundTop backgroundColor={black}>
         <LottieView
           ref={animationRef}

app/src/screens/verification/ProofRequestStatusScreen.tsx

@@ -6,7 +6,6 @@ import type { LottieViewProps } from 'lottie-react-native';
 import LottieView from 'lottie-react-native';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Linking, StyleSheet, View } from 'react-native';
-import { SystemBars } from 'react-native-edge-to-edge';
 import { ScrollView, Spinner } from 'tamagui';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -210,7 +209,6 @@ const SuccessScreen: React.FC = () => {
 
   return (
     <ExpandableBottomLayout.Layout backgroundColor={white}>
-      <SystemBars style="dark" />
       <ExpandableBottomLayout.TopSection
         roundTop
         marginTop={20}

app/tests/src/screens/GratificationScreen.test.tsx

@@ -23,6 +23,7 @@ jest.mock('react-native', () => {
   return {
     __esModule: true,
     Dimensions: mockDimensions,
+    Platform: { OS: 'ios', select: jest.fn() },
     Pressable: ({ onPress, children }: any) => (
       <button onClick={onPress} type="button">
         {children}

yarn.lock

@@ -8670,7 +8670,7 @@ __metadata:
     react-native-passkey: "npm:^3.3.1"
     react-native-passport-reader: "npm:1.0.3"
     react-native-safe-area-context: "npm:^5.6.1"
-    react-native-screens: "npm:4.15.3"
+    react-native-screens: "npm:4.17.0"
     react-native-sqlite-storage: "npm:^6.0.1"
     react-native-svg: "npm:15.14.0"
     react-native-svg-transformer: "npm:^1.5.1"
@@ -29878,16 +29878,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-is-edge-to-edge@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "react-native-is-edge-to-edge@npm:1.2.1"
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: 10c0/87d20b900aded7d44c90afb946a7aa03c23a94ca3dd547bdddc2303b85357e4aab22567a57b19f1558d6c8be7058e3dcf34faa1e15182d1604f90974266d9a1d
-  languageName: node
-  linkType: hard
-
 "react-native-keychain@npm:^10.0.0":
   version: 10.0.0
   resolution: "react-native-keychain@npm:10.0.0"
@@ -29980,17 +29970,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-screens@npm:4.15.3":
-  version: 4.15.3
-  resolution: "react-native-screens@npm:4.15.3"
+"react-native-screens@npm:4.17.0":
+  version: 4.17.0
+  resolution: "react-native-screens@npm:4.17.0"
   dependencies:
     react-freeze: "npm:^1.0.0"
-    react-native-is-edge-to-edge: "npm:^1.2.1"
     warn-once: "npm:^0.1.0"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/e5cdc82d58c4d25b7d439dfc78206bc8e0b0240ec73d18468fcf48631d5c92f500db722db8de8ae38ded3a6e9201fef77b0ede9f0bc2ba7754d5d76f61d69a61
+  checksum: 10c0/a57ff39e2d2c7b38f8b1a1a5d52f4450bb1aa7d72eef9749901db1f1df07a112c1187d9559607bae6d6680bd7b6e45e94de241948b71c8b92fd7b2fc46404a0f
   languageName: node
   linkType: hard