Refactor MenuScreen to use useSafeAreaInsets for dynamic padding, replacing SafeAreaView with View for improved layout handling.

src/screens/Main/MenuScreen.js

@@ -4,16 +4,17 @@ import {
   View,
   Text,
   StyleSheet,
-  SafeAreaView,
   ScrollView,
   TouchableOpacity,
 } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import { Ionicons } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { COLORS } from '../../constants/colors';
 
 const MenuScreen = () => {
   const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
 
   const menuSections = [
     {
@@ -66,7 +67,7 @@ const MenuScreen = () => {
   };
 
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={[styles.container, { paddingTop: insets.top }]}>
       <StatusBar style="dark" />
       
       <View style={styles.header}>
@@ -105,7 +106,7 @@ const MenuScreen = () => {
         
         <View style={styles.bottomSpacing} />
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 };