feat: replace statu bar with edge to edge systembar in focuseawarestatubar file

Author: hamzamekk

src/components/ui/focus-aware-status-bar.tsx

@@ -1,14 +1,11 @@
 import { useIsFocused } from '@react-navigation/native';
 import { useColorScheme } from 'nativewind';
-import React from 'react';
-import { StatusBar } from 'react-native';
+import { SystemBars } from 'react-native-edge-to-edge';
 
-type Props = React.ComponentProps<typeof StatusBar>;
-export const FocusAwareStatusBar = (props: Props) => {
+type Props = { hidden?: boolean };
+export const FocusAwareStatusBar = ({ hidden = false }: Props) => {
   const isFocused = useIsFocused();
   const { colorScheme } = useColorScheme();
-  const isDark = colorScheme === 'dark';
-  const barStyle = isDark ? 'light-content' : 'dark-content';
 
-  return isFocused ? <StatusBar barStyle={barStyle} {...props} /> : null;
+  return isFocused ? <SystemBars style={colorScheme} hidden={hidden} /> : null;
 };