Enable edge-to-edge system bars (#817)

* Enable edge-to-edge system bars

* prettier

* fix lint errors

* podfile update and add lazy

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

@@ -1,13 +1,8 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
-        <!-- Customize your theme here. -->
+    <style name="AppTheme" parent="Theme.EdgeToEdge">
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-        <item name="android:statusBarColor">#000000</item>
-        <item name="android:navigationBarColor">#000000</item>
-        <item name="android:windowLightStatusBar">false</item>
-        <item name="android:windowLightNavigationBar">false</item>
         <item name="android:windowBackground">#000000</item>
     </style>
 

app/ios/Podfile.lock

@@ -1868,9 +1868,9 @@ PODS:
   - segment-analytics-react-native (2.21.1):
     - React-Core
     - sovran-react-native
-  - Sentry (8.53.1):
-    - Sentry/Core (= 8.53.1)
-  - Sentry/Core (8.53.1)
+  - Sentry (8.54.0):
+    - Sentry/Core (= 8.54.0)
+  - Sentry/Core (8.54.0)
   - Sentry/HybridSDK (8.48.0)
   - SentryPrivate (8.21.0)
   - SocketRocket (0.7.0)

app/package.json

@@ -114,6 +114,7 @@
     "react-native-cloud-storage": "^2.2.2",
     "react-native-device-info": "^14.0.4",
     "react-native-dotenv": "^3.4.11",
+    "react-native-edge-to-edge": "^1.6.2",
     "react-native-gesture-handler": "2.24.0",
     "react-native-get-random-values": "^1.11.0",
     "react-native-haptic-feedback": "^2.3.3",

app/src/components/NavBar/BaseNavBar.tsx

@@ -2,7 +2,7 @@
 
 import { ChevronLeft, X } from '@tamagui/lucide-icons';
 import React, { useMemo } from 'react';
-import { StatusBar, StatusBarStyle } from 'react-native';
+import { SystemBars, SystemBarStyle } from 'react-native-edge-to-edge';
 import {
   Button,
   TextProps,
@@ -17,7 +17,7 @@ import { Title } from '../typography/Title';
 interface NavBarProps extends XStackProps {
   children: React.ReactNode;
   backgroundColor?: string;
-  barStyle?: StatusBarStyle;
+  barStyle?: SystemBarStyle;
 }
 interface LeftActionProps extends ViewProps {
   component?: 'back' | 'close' | React.ReactNode;
@@ -114,7 +114,7 @@ const Container: React.FC<NavBarProps> = ({
 }) => {
   return (
     <>
-      <StatusBar backgroundColor={backgroundColor} barStyle={barStyle} />
+      <SystemBars style={barStyle} />
       <XStack
         backgroundColor={backgroundColor}
         flexGrow={1}

app/src/components/NavBar/DefaultNavBar.tsx

@@ -25,8 +25,8 @@ export const DefaultNavBar = (props: NativeStackHeaderProps) => {
       barStyle={
         options.headerTintColor === white ||
         (options.headerTitleStyle as TextStyle)?.color === white
-          ? 'light-content'
-          : 'dark-content'
+          ? 'light'
+          : 'dark'
       }
     >
       <NavBar.LeftAction

app/src/components/NavBar/HomeNavBar.tsx

@@ -17,7 +17,7 @@ export const HomeNavBar = (props: NativeStackHeaderProps) => {
   return (
     <NavBar.Container
       backgroundColor={black}
-      barStyle={'light-content'}
+      barStyle={'light'}
       padding={16}
       justifyContent="space-between"
       paddingTop={Math.max(insets.top, 15) + extraYPadding}

app/src/components/NavBar/ProgressNavBar.tsx

@@ -53,8 +53,8 @@ export const ProgressNavBar = (props: NativeStackHeaderProps) => {
         barStyle={
           options.headerTintColor === white ||
           (options.headerTitleStyle as TextStyle)?.color === white
-            ? 'light-content'
-            : 'dark-content'
+            ? 'light'
+            : 'dark'
         }
       >
         <XStack width="100%" alignItems="center">

app/src/layouts/ExpandableBottomLayout.tsx

@@ -6,9 +6,9 @@ import {
   PixelRatio,
   Platform,
   ScrollView,
-  StatusBar,
   StyleSheet,
 } from 'react-native';
+import { SystemBars } from 'react-native-edge-to-edge';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { View, ViewProps } from 'tamagui';
 
@@ -42,10 +42,7 @@ const Layout: React.FC<ExpandableBottomLayoutProps> = ({
 }) => {
   return (
     <View flex={1} flexDirection="column" backgroundColor={backgroundColor}>
-      <StatusBar
-        barStyle={backgroundColor === black ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundColor}
-      />
+      <SystemBars style={backgroundColor === black ? 'light' : 'dark'} />
       {children}
     </View>
   );

app/src/navigation/misc.tsx

@@ -2,7 +2,7 @@
 
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import React, { lazy } from 'react';
-import { StatusBar } from 'react-native';
+import { SystemBars } from 'react-native-edge-to-edge';
 
 // Important: SplashScreen is imported directly and not lazy-loaded.
 // This is because it's used as a fallback for the Suspense boundary in the root navigator,
@@ -18,9 +18,7 @@ const miscScreens = {
   Launch: {
     screen: LaunchScreen,
     options: {
-      header: () => (
-        <StatusBar barStyle="light-content" backgroundColor={black} />
-      ),
+      header: () => <SystemBars style="light" />,
       navigationBarColor: black,
     },
   },
@@ -43,9 +41,7 @@ const miscScreens = {
   Splash: {
     screen: SplashScreen,
     options: {
-      header: () => (
-        <StatusBar barStyle="light-content" backgroundColor={black} />
-      ),
+      header: () => <SystemBars style="light" />,
       navigationBarColor: black,
     },
   },

app/src/screens/aesop/PassportOnboardingScreen.tsx

@@ -2,7 +2,8 @@
 
 import LottieView from 'lottie-react-native';
 import React, { useEffect, useRef } from 'react';
-import { StatusBar, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { SystemBars } from 'react-native-edge-to-edge';
 
 import passportOnboardingAnimation from '../../assets/animations/passport_onboarding.json';
 import { PrimaryButton } from '../../components/buttons/PrimaryButton';
@@ -47,7 +48,7 @@ const PassportOnboardingScreen: React.FC<
 
   return (
     <ExpandableBottomLayout.Layout backgroundColor={white}>
-      <StatusBar barStyle="light-content" backgroundColor={white} />
+      <SystemBars style="light" />
       <ExpandableBottomLayout.TopSection backgroundColor={white}>
         <LottieView
           ref={animationRef}

app/src/screens/passport/PassportOnboardingScreen.tsx

@@ -3,7 +3,8 @@
 import { useNavigation } from '@react-navigation/native';
 import LottieView from 'lottie-react-native';
 import React, { useEffect, useRef } from 'react';
-import { StatusBar, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { SystemBars } from 'react-native-edge-to-edge';
 
 import passportOnboardingAnimation from '../../assets/animations/passport_onboarding.json';
 import { PrimaryButton } from '../../components/buttons/PrimaryButton';
@@ -39,7 +40,7 @@ const PassportOnboardingScreen: React.FC<
 
   return (
     <ExpandableBottomLayout.Layout backgroundColor={black}>
-      <StatusBar barStyle="light-content" backgroundColor={black} />
+      <SystemBars style="light" />
       <ExpandableBottomLayout.TopSection roundTop backgroundColor={black}>
         <LottieView
           ref={animationRef}

app/src/screens/prove/ProofRequestStatusScreen.tsx

@@ -3,7 +3,8 @@
 import { useIsFocused } from '@react-navigation/native';
 import LottieView from 'lottie-react-native';
 import React, { useEffect, useState } from 'react';
-import { Linking, StatusBar, StyleSheet, View } from 'react-native';
+import { Linking, StyleSheet, View } from 'react-native';
+import { SystemBars } from 'react-native-edge-to-edge';
 import { ScrollView, Spinner } from 'tamagui';
 
 import loadingAnimation from '../../assets/animations/loading/misc.json';
@@ -169,7 +170,7 @@ const SuccessScreen: React.FC = () => {
 
   return (
     <ExpandableBottomLayout.Layout backgroundColor={white}>
-      <StatusBar barStyle="dark-content" backgroundColor={white} />
+      <SystemBars style="dark" />
       <ExpandableBottomLayout.TopSection
         roundTop
         marginTop={20}

yarn.lock

@@ -4696,6 +4696,7 @@ __metadata:
     react-native-cloud-storage: "npm:^2.2.2"
     react-native-device-info: "npm:^14.0.4"
     react-native-dotenv: "npm:^3.4.11"
+    react-native-edge-to-edge: "npm:^1.6.2"
     react-native-gesture-handler: "npm:2.24.0"
     react-native-get-random-values: "npm:^1.11.0"
     react-native-haptic-feedback: "npm:^2.3.3"
@@ -21020,6 +21021,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-edge-to-edge@npm:^1.6.2":
+  version: 1.6.2
+  resolution: "react-native-edge-to-edge@npm:1.6.2"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/4c9defc3075aedff2bcef2a39ed97d037f220342baa95d374f3c68dee9e4493429f2f8f3b3dbb7ba355cdfb89a00d6400218c90944cc80e84283d3eb8646c584
+  languageName: node
+  linkType: hard
+
 "react-native-gesture-handler@npm:2.24.0":
   version: 2.24.0
   resolution: "react-native-gesture-handler@npm:2.24.0"