Update app.json to change splash screen background color to white; refactor MainNavigator and screens to utilize dynamic padding with useSafeAreaInsets, enhancing layout consistency across Home, Menu, and Profile screens.

app.json

@@ -10,7 +10,7 @@
     "splash": {
       "image": "./assets/splash-icon.png",
       "resizeMode": "contain",
-      "backgroundColor": "#17b69b"
+      "backgroundColor": "#ffffff"
     },
     "ios": {
       "supportsTablet": true,
@@ -43,7 +43,7 @@
       [
         "expo-splash-screen",
         {
-          "backgroundColor": "#17b69b",
+          "backgroundColor": "#ffffff",
           "image": "./assets/splash-icon.png",
           "imageWidth": 200
         }

src/navigation/MainNavigator.js

@@ -2,7 +2,7 @@ import React from 'react';
 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 { View, ActivityIndicator, Platform, OS } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import HomeScreen from '../screens/Main/HomeScreen';
@@ -37,9 +37,9 @@ const MainNavigator = () => {
           backgroundColor: COLORS.white,
           borderTopWidth: 1,
           borderTopColor: COLORS.gray[200],
-          paddingBottom: Math.max(insets.bottom, Platform.OS === 'android' ? 16 : 8),
+          paddingBottom: (insets.bottom || 16),
           paddingTop: 8,
-          height: 82 + Math.max(insets.bottom, Platform.OS === 'android' ? 16 : 8),
+          height: Platform.OS === 'ios' ? 100 : (82 + (insets.bottom || 16)),
           elevation: 8,
           shadowColor: COLORS.gray[900],
           shadowOffset: {

src/screens/Main/HomeScreen.js

@@ -245,7 +245,7 @@ const HomeScreen = () => {
   };
 
   return (
-    <View style={[styles.container, { paddingTop: insets.top }]}>
+    <View style={styles.container}>
       <StatusBar style="dark" />
       
       <ScrollView
@@ -260,7 +260,7 @@ const HomeScreen = () => {
         }
       >
         {/* Header */}
-        <View style={styles.header}>
+        <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
           <View>
             <Text style={styles.greeting}>Salam,</Text>
             <Text style={styles.userName}>{user?.name || 'Ulanyjy'}</Text>
@@ -338,7 +338,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: 24,
-    paddingTop: 16,
     paddingBottom: 24,
     backgroundColor: COLORS.white,
     marginBottom: 16,

src/screens/Main/MenuScreen.js

@@ -67,10 +67,10 @@ const MenuScreen = () => {
   };
 
   return (
-    <View style={[styles.container, { paddingTop: insets.top }]}>
+    <View style={styles.container}>
       <StatusBar style="dark" />
       
-      <View style={styles.header}>
+      <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
         <Text style={styles.headerTitle}>Hyzmatlar</Text>
       </View>
 
@@ -117,7 +117,6 @@ const styles = StyleSheet.create({
   },
   header: {
     paddingHorizontal: 24,
-    paddingTop: 16,
     paddingBottom: 24,
     borderBottomWidth: 1,
     borderBottomColor: COLORS.gray[200],

src/screens/Main/ProfileScreen.js

@@ -280,10 +280,10 @@ const ProfileScreen = () => {
   const currentUser = profileData || user;
 
   return (
-    <View style={[styles.container, { paddingTop: insets.top }]}>
+    <View style={styles.container}>
       <StatusBar style="dark" />
       
-      <View style={styles.header}>
+      <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
         <Text style={styles.headerTitle}>Profil</Text>
       </View>
 
@@ -401,7 +401,6 @@ const styles = StyleSheet.create({
   header: {
     backgroundColor: COLORS.white,
     paddingHorizontal: 24,
-    paddingTop: 16,
     paddingBottom: 24,
     borderBottomWidth: 1,
     borderBottomColor: COLORS.gray[200],