From 2eb41db2e5f299256afc55501149b5136867c674 Mon Sep 17 00:00:00 2001 From: Mekan1206 Date: Thu, 11 Sep 2025 12:39:19 +0500 Subject: [PATCH] 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. --- App.js | 17 ++++++++++------- app.json | 14 +++++++++++--- package-lock.json | 27 +++++++++++++++++++++++++++ package.json | 3 ++- src/navigation/MainNavigator.js | 17 ++++++++++++++--- src/screens/Main/HomeScreen.js | 7 ++++--- src/screens/Main/ProfileScreen.js | 7 ++++--- 7 files changed, 72 insertions(+), 20 deletions(-) diff --git a/App.js b/App.js index a545f31..f9b992b 100644 --- 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 ( - - - - - - + + + + + + + + ); } diff --git a/app.json b/app.json index 5d1d617..96f7c44 100644 --- 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" ] } } diff --git a/package-lock.json b/package-lock.json index 3120e77..96dd7db 100644 --- 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", diff --git a/package.json b/package.json index e4e2958..931f712 100644 --- 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" diff --git a/src/navigation/MainNavigator.js b/src/navigation/MainNavigator.js index 4824110..72810c4 100644 --- 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 ( ({ @@ -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, }, })} > diff --git a/src/screens/Main/HomeScreen.js b/src/screens/Main/HomeScreen.js index acf0ddd..bbdfa23 100644 --- 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 ( - + { )} - + ); }; diff --git a/src/screens/Main/ProfileScreen.js b/src/screens/Main/ProfileScreen.js index eb9a032..803b2e8 100644 --- 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 ( - + @@ -388,7 +389,7 @@ const ProfileScreen = () => { initialData={profileData || user} isLoading={isUpdatingProfile} /> - + ); };