AAA Refactor app structure to use SafeAreaProvider, update StatusBar configuration, and enhance tab navigator styles. Add expo-system-ui dependency for improved status bar handling.

src/navigation/MainNavigator.js

@@ -3,6 +3,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Ionicons } from '@expo/vector-icons';
 import { COLORS } from '../constants/colors';
 import { View, ActivityIndicator, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import HomeScreen from '../screens/Main/HomeScreen';
 import MenuNavigator from './MenuNavigator';
@@ -11,6 +12,8 @@ import ProfileScreen from '../screens/Main/ProfileScreen';
 const Tab = createBottomTabNavigator();
 
 const MainNavigator = () => {
+  const insets = useSafeAreaInsets();
+  
   return (
     <Tab.Navigator
       screenOptions={({ route }) => ({
@@ -34,9 +37,17 @@ const MainNavigator = () => {
           backgroundColor: COLORS.white,
           borderTopWidth: 1,
           borderTopColor: COLORS.gray[200],
-          paddingBottom: Platform.OS === 'android' ? 16 : 8,
+          paddingBottom: Math.max(insets.bottom, Platform.OS === 'android' ? 16 : 8),
           paddingTop: 8,
-          height: Platform.OS === 'android' ? 96 : 88,
+          height: 82 + Math.max(insets.bottom, Platform.OS === 'android' ? 16 : 8),
+          elevation: 8,
+          shadowColor: COLORS.gray[900],
+          shadowOffset: {
+            width: 0,
+            height: -2,
+          },
+          shadowOpacity: 0.1,
+          shadowRadius: 4,
         },
         tabBarLabelStyle: {
           fontSize: 12,
@@ -44,7 +55,7 @@ const MainNavigator = () => {
           marginTop: 4,
         },
         tabBarItemStyle: {
-          paddingVertical: 4,
+          paddingVertical: 2,
         },
       })}
     >