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

* Enable edge-to-edge system bars

* prettier

* fix lint errors

* podfile update and add lazy

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">