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.

2025-09-11 12:39:19 +05:00
parent 61bcb6aa3f
commit 2eb41db2e5
7 changed files with 72 additions and 20 deletions
--- a/App.js
+++ b/App.js
@@ -2,15 +2,18 @@ import React from 'react';
 import { AuthProvider } from './src/contexts/AuthContext';
 import RootNavigator from './src/navigation/RootNavigator';
 import { BaseEnumsProvider } from './src/contexts/BaseEnumsContext';
-import { StatusBar } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';

 export default function App() {
  return (
-    <AuthProvider>
-      <BaseEnumsProvider>
-        <StatusBar barStyle="dark-content" backgroundColor="#fff"/>
-        <RootNavigator />
-      </BaseEnumsProvider>
-    </AuthProvider>
+    <SafeAreaProvider>
+      <AuthProvider>
+        <BaseEnumsProvider>
+          <StatusBar style="dark" />
+          <RootNavigator />
+        </BaseEnumsProvider>
+      </AuthProvider>
+    </SafeAreaProvider>
  );
 }
--- a/app.json
+++ b/app.json
@@ -13,7 +13,10 @@
      "backgroundColor": "#17b69b"
    },
    "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "statusBar": {
+        "barStyle": "dark-content"
+      }
    },
    "android": {
      "adaptiveIcon": {
@@ -21,7 +24,11 @@
        "backgroundColor": "#17b69b"
      },
      "edgeToEdgeEnabled": true,
-      "package": "com.nurmuhammet.ali.tbbankonline"
+      "package": "com.nurmuhammet.ali.tbbankonline",
+      "statusBar": {
+        "barStyle": "dark-content",
+        "backgroundColor": "#ffffff"
+      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
@@ -40,7 +47,8 @@
          "image": "./assets/splash-icon.png",
          "imageWidth": 200
        }
-      ]
+      ],
+      "expo-system-ui"
    ]
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
        "expo-image-picker": "~16.1.4",
        "expo-splash-screen": "^31.0.8",
        "expo-status-bar": "~2.2.3",
+        "expo-system-ui": "~5.0.11",
        "react": "19.0.0",
        "react-native": "0.79.5",
        "react-native-gesture-handler": "~2.24.0",
@@ -4363,6 +4364,32 @@
        "react-native": "*"
      }
    },
+    "node_modules/expo-system-ui": {
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/expo-system-ui/-/expo-system-ui-5.0.11.tgz",
+      "integrity": "sha512-PG5VdaG5cwBe1Rj02mJdnsihKl9Iw/w/a6+qh2mH3f2K/IvQ+Hf7aG2kavSADtkGNCNj7CEIg7Rn4DQz/SE5rQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-native/normalize-colors": "0.79.6",
+        "debug": "^4.3.2"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react-native": "*",
+        "react-native-web": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-web": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/expo-system-ui/node_modules/@react-native/normalize-colors": {
+      "version": "0.79.6",
+      "resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.79.6.tgz",
+      "integrity": "sha512-0v2/ruY7eeKun4BeKu+GcfO+SHBdl0LJn4ZFzTzjHdWES0Cn+ONqKljYaIv8p9MV2Hx/kcdEvbY4lWI34jC/mQ==",
+      "license": "MIT"
+    },
    "node_modules/exponential-backoff": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.2.tgz",
--- a/package.json
+++ b/package.json
@@ -28,7 +28,8 @@
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "^4.11.1",
    "react-native-svg": "15.11.2",
-    "react-native-webview": "13.13.5"
+    "react-native-webview": "13.13.5",
+    "expo-system-ui": "~5.0.11"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
--- a/src/navigation/MainNavigator.js
+++ b/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,
        },
      })}
    >
--- a/src/screens/Main/HomeScreen.js
+++ b/src/screens/Main/HomeScreen.js
@@ -3,7 +3,6 @@ import {
  View,
  Text,
  StyleSheet,
-  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
@@ -12,6 +11,7 @@ import {
 } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import { Ionicons } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAuth } from '../../contexts/AuthContext';
 import { COLORS } from '../../constants/colors';
 import MetricCard from '../../components/MetricCard';
@@ -103,6 +103,7 @@ const STATIC_TRANSACTIONS = [

 const HomeScreen = () => {
  const { user, logout } = useAuth();
+  const insets = useSafeAreaInsets();
  const [metrics, setMetrics] = useState(null);
  const [loadingMetrics, setLoadingMetrics] = useState(true);
  const [cardBalance, setCardBalance] = useState(null);
@@ -244,7 +245,7 @@ const HomeScreen = () => {
  };

  return (
-    <SafeAreaView style={styles.container}>
+    <View style={[styles.container, { paddingTop: insets.top }]}>
      <StatusBar style="dark" />
      
      <ScrollView
@@ -320,7 +321,7 @@ const HomeScreen = () => {
          </View>
        )}
      </ScrollView>
-    </SafeAreaView>
+    </View>
  );
 };

--- a/src/screens/Main/ProfileScreen.js
+++ b/src/screens/Main/ProfileScreen.js
@@ -3,7 +3,6 @@ import {
  View,
  Text,
  StyleSheet,
-  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  Alert,
@@ -13,6 +12,7 @@ import {
 } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import { Ionicons } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAuth } from '../../contexts/AuthContext';
 import apiService from '../../services/apiService';
 import EditProfileModal from '../../components/EditProfileModal';
@@ -20,6 +20,7 @@ import { COLORS } from '../../constants/colors';

 const ProfileScreen = () => {
  const { user, logout, fetchUserProfile } = useAuth();
+  const insets = useSafeAreaInsets();
  const [isLoading, setIsLoading] = useState(false);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [profileData, setProfileData] = useState(null);
@@ -279,7 +280,7 @@ const ProfileScreen = () => {
  const currentUser = profileData || user;

  return (
-    <SafeAreaView style={styles.container}>
+    <View style={[styles.container, { paddingTop: insets.top }]}>
      <StatusBar style="dark" />
      
      <View style={styles.header}>
@@ -388,7 +389,7 @@ const ProfileScreen = () => {
        initialData={profileData || user}
        isLoading={isUpdatingProfile}
      />
-    </SafeAreaView>
+    </View>
  );
 };