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}
/>
-
+
);
};