Refactor ProfileScreen to improve account deletion UI; update styles for danger items and remove alert for app information.

app.json

@@ -16,7 +16,8 @@
       "supportsTablet": true,
       "statusBar": {
         "barStyle": "dark-content"
-      }
+      },
+      "bundleIdentifier": "com.nurmuhammet.ali.tbbankonline"
     },
     "android": {
       "adaptiveIcon": {

package-lock.json

@@ -23,6 +23,7 @@
         "expo-system-ui": "~5.0.11",
         "react": "19.0.0",
         "react-native": "0.79.5",
+        "react-native-confirmation-code-field": "^8.0.1",
         "react-native-gesture-handler": "~2.24.0",
         "react-native-modal-datetime-picker": "^15.0.1",
         "react-native-safe-area-context": "5.4.0",
@@ -6733,6 +6734,23 @@
         }
       }
     },
+    "node_modules/react-native-confirmation-code-field": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-confirmation-code-field/-/react-native-confirmation-code-field-8.0.1.tgz",
+      "integrity": "sha512-pwrhQtspFEp0y/gxZRp8hrra+UjAYfwAsW5Sn3yYtdUZVyRjAZPBnUb3rOc+z5L5o2ml03z5P3uvTK0yQwXsmA==",
+      "peerDependencies": {
+        "react": ">=16.4.0",
+        "react-native": ">=0.64.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-edge-to-edge": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/react-native-edge-to-edge/-/react-native-edge-to-edge-1.6.0.tgz",

package.json

@@ -21,15 +21,16 @@
     "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-confirmation-code-field": "^8.0.1",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-modal-datetime-picker": "^15.0.1",
     "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",
-    "expo-system-ui": "~5.0.11"
+    "react-native-webview": "13.13.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

src/components/EditProfileModal.js

@@ -104,13 +104,9 @@ const EditProfileModal = ({
     }
 
     // Card year validation (optional, 4 digits and reasonable year)
-    if (formData.card_year) {
-      const year = parseInt(formData.card_year.trim(), 10);
-      const currentYear = new Date().getFullYear();
-      if (!/^[0-9]{4}$/.test(formData.card_year.trim()) || year < currentYear - 10 || year > currentYear + 10) {
-        newErrors.card_year = `Ýyl ${currentYear - 10}-den ${currentYear + 10}-e çenli bolmaly`;
-      }
-    }
+    // if (formData.card_year) {
+      
+    // }
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;

src/screens/Auth/LoginScreen.js

@@ -3,7 +3,6 @@ import {
   View,
   Text,
   StyleSheet,
-  SafeAreaView,
   KeyboardAvoidingView,
   ScrollView,
   Platform,
@@ -12,6 +11,7 @@ import {
   TouchableWithoutFeedback,
   Keyboard,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { StatusBar } from 'expo-status-bar';
 import { useAuth } from '../../contexts/AuthContext';
 import Button from '../../components/Button';

src/screens/Auth/RegisterScreen.js

@@ -3,7 +3,6 @@ import {
   View,
   Text,
   StyleSheet,
-  SafeAreaView,
   KeyboardAvoidingView,
   ScrollView,
   Platform,
@@ -11,6 +10,7 @@ import {
   TouchableWithoutFeedback,
   Keyboard,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { StatusBar } from 'expo-status-bar';
 import { useAuth } from '../../contexts/AuthContext';
 import Button from '../../components/Button';

src/screens/Auth/VerificationScreen.js

@@ -3,7 +3,6 @@ import {
   View,
   Text,
   StyleSheet,
-  SafeAreaView,
   Alert,
   TouchableOpacity,
   TouchableWithoutFeedback,
@@ -12,19 +11,32 @@ import {
   Platform,
   KeyboardAvoidingView,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { StatusBar } from 'expo-status-bar';
 import { useFocusEffect } from '@react-navigation/native';
 import { useAuth } from '../../contexts/AuthContext';
 import Button from '../../components/Button';
-import Input from '../../components/Input';
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
 import { COLORS } from '../../constants/colors';
 
+const CELL_COUNT = 6;
+
 const VerificationScreen = ({ navigation }) => {
   const [code, setCode] = useState('');
   const [countdown, setCountdown] = useState(60);
   const [canResend, setCanResend] = useState(false);
   const { verify, isLoading, pendingVerification, clearPendingVerification } = useAuth();
   const countdownRef = useRef(null);
+  const ref = useBlurOnFulfill({ value: code, cellCount: CELL_COUNT });
+  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+    value: code,
+    setValue: setCode,
+  });
 
   useEffect(() => {
     if (!pendingVerification) {
@@ -74,18 +86,18 @@ const VerificationScreen = ({ navigation }) => {
     }, 1000);
   };
 
-  const handleVerify = async () => {
-    if (!code.trim()) {
+  const handleVerify = async (filledCode) => {
+    if (!filledCode.trim()) {
       Alert.alert('Ýalňyşlyk', 'Tassyklama koduny giriziň');
       return;
     }
 
-    if (!/^\d{6}$/.test(code.trim())) {
+    if (!/^\d{6}$/.test(filledCode.trim())) {
       Alert.alert('Ýalňyşlyk', 'Tassyklama kody 6 sanly bolmaly');
       return;
     }
 
-    const result = await verify(code.trim());
+    const result = await verify(filledCode.trim());
     
     if (result.success) {
       // Navigation will be handled by AuthContext
@@ -94,6 +106,8 @@ const VerificationScreen = ({ navigation }) => {
     }
   };
 
+  const handleVerifyWrapper = () => handleVerify(code);
+
   const handleResendCode = async () => {
     if (!canResend) return;
     
@@ -153,24 +167,29 @@ const VerificationScreen = ({ navigation }) => {
             </View>
 
             <View style={styles.formContainer}>
-              <Input
-                label="Tassyklama kody"
+              <CodeField
+                ref={ref}
+                {...props}
                 value={code}
                 onChangeText={setCode}
-                placeholder="123456"
-                keyboardType="numeric"
-                maxLength={6}
-                style={styles.codeInput}
-                textAlign="center"
-                returnKeyType="done"
-                onSubmitEditing={handleVerify}
+                cellCount={CELL_COUNT}
+                rootStyle={styles.otpContainer}
+                keyboardType="number-pad"
                 textContentType="oneTimeCode"
-                autoComplete="sms-otp"
+                renderCell={({ index, symbol, isFocused }) => (
+                  <Text
+                    key={index}
+                    style={[styles.otpInput, isFocused && styles.otpInputHighlight]}
+                    onLayout={getCellOnLayoutHandler(index)}>
+                    {symbol || (isFocused ? <Cursor/> : null)}
+                  </Text>
+                )}
+                onSubmitEditing={handleVerifyWrapper}
               />
 
               <Button
                 title="Tassykla"
-                onPress={handleVerify}
+                onPress={handleVerifyWrapper}
                 loading={isLoading}
                 style={styles.verifyButton}
               />
@@ -259,10 +278,25 @@ const styles = StyleSheet.create({
   formContainer: {
     alignItems: 'center',
   },
-  codeInput: {
-    width: '100%',
+  otpContainer: {
+    width: '90%',
     marginBottom: 32,
   },
+  otpInput: {
+    width: 45,
+    height: 60,
+    lineHeight: 58,
+    borderWidth: 1,
+    borderRadius: 12,
+    borderColor: COLORS.gray[300],
+    color: COLORS.textPrimary,
+    fontSize: 24,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  otpInputHighlight: {
+    borderColor: COLORS.primary,
+  },
   verifyButton: {
     width: '100%',
     marginBottom: 32,

src/screens/Card/CardBalanceOrderDetailsScreen.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, SafeAreaView, Modal } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, Modal } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import apiService from '../../services/apiService';

src/screens/Card/CardBalanceOrdersScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
-import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import apiService from '../../services/apiService';

src/screens/Card/CardOrderDetailsScreen.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, ScrollView, SafeAreaView, Image, Alert, Linking } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, ScrollView, Image, Alert, Linking } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { StatusBar } from 'expo-status-bar';

src/screens/Card/CardOrdersScreen.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import { StatusBar } from 'expo-status-bar';

src/screens/Card/CardPinOrderDetailsScreen.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, SafeAreaView, Image, Linking } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, Image, Linking } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { StatusBar } from 'expo-status-bar';

src/screens/Card/CardPinOrdersScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
-import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import { StatusBar } from 'expo-status-bar';

src/screens/Card/CardRequisiteOrderDetailsScreen.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, SafeAreaView, Image } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, Image } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { StatusBar } from 'expo-status-bar';
@@ -137,6 +138,9 @@ const CardRequisiteOrderDetailsScreen = () => {
         </View>
 
         {/* Actions */}
+        <TouchableOpacity style={styles.actionBtn} onPress={handleDownload}>
+          <Text style={styles.actionText}>Ýükle (PDF)</Text>
+        </TouchableOpacity>
         <TouchableOpacity style={styles.deleteBtn} onPress={handleDelete}>
           <Text style={styles.deleteText}>Poz</Text>
         </TouchableOpacity>

src/screens/Card/CardRequisiteOrdersScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useRef } from 'react';
-import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import { StatusBar } from 'expo-status-bar';

src/screens/Card/CardTransactionOrderDetailsScreen.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, SafeAreaView, Modal } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, Modal } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import apiService from '../../services/apiService';

src/screens/Card/CardTransactionOrdersScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
-import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import apiService from '../../services/apiService';

src/screens/Card/CreateCardBalanceOrderScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, SafeAreaView, ScrollView } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
 import apiService from '../../services/apiService';

src/screens/Card/CreateCardOrderScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, SafeAreaView, ScrollView, Modal } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, ScrollView, Modal } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
 import { StatusBar } from 'expo-status-bar';

src/screens/Card/CreateCardPinOrderScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, SafeAreaView, ScrollView } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
 import { StatusBar } from 'expo-status-bar';

src/screens/Card/CreateCardRequisiteOrderScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, SafeAreaView, ScrollView } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
 import { StatusBar } from 'expo-status-bar';

src/screens/Card/CreateCardTransactionOrderScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, SafeAreaView, ScrollView } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
 import apiService from '../../services/apiService';

src/screens/Loan/CreateLoanOrderScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, ScrollView, SafeAreaView, View } from 'react-native';
+import { Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
 import { COLORS } from '../../constants/colors';

src/screens/Loan/CreateLoanPaidOffLetterOrderScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, ScrollView, SafeAreaView } from 'react-native';
+import { Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
 import { COLORS } from '../../constants/colors';

src/screens/Loan/CreateLoanRemainingOrderScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
 import apiService from '../../services/apiService';

src/screens/Loan/LoanOrderDetailsScreen.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import apiService from '../../services/apiService';

src/screens/Loan/LoanOrdersScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
-import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, SafeAreaView, Alert } from 'react-native';
+import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, Alert } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import apiService from '../../services/apiService';

src/screens/Loan/LoanPaidOffLetterOrderDetailsScreen.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import apiService from '../../services/apiService';

src/screens/Loan/LoanPaidOffLetterOrdersScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
-import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, SafeAreaView, Alert } from 'react-native';
+import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, Alert } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import apiService from '../../services/apiService';

src/screens/Loan/LoanRemainingOrderDetailsScreen.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import apiService from '../../services/apiService';
@@ -63,7 +64,7 @@ const LoanRemainingOrderDetailsScreen = () => {
   }
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <TouchableOpacity style={styles.backBtn} onPress={() => navigation.goBack()}>
         <Ionicons name="close" size={28} color={COLORS.textPrimary} />
       </TouchableOpacity>
@@ -82,7 +83,7 @@ const LoanRemainingOrderDetailsScreen = () => {
       <TouchableOpacity style={styles.deleteBtn} onPress={handleDelete}>
         <Text style={styles.deleteText}>Poz</Text>
       </TouchableOpacity>
-    </View>
+    </SafeAreaView>
   );
 };
 

src/screens/Loan/LoanRemainingOrdersScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
-import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, Modal, ScrollView, Alert, SafeAreaView, Pressable } from 'react-native';
+import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, Modal, ScrollView, Alert, Pressable } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import apiService from '../../services/apiService';
@@ -133,7 +134,7 @@ const LoanRemainingOrdersScreen = () => {
         renderItem={renderItem}
         contentContainerStyle={orders.length === 0 && styles.emptyContainer}
         refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
-        ListEmptyComponent={<Text style={styles.emptyText}>No orders yet</Text>}
+        ListEmptyComponent={<Text style={styles.emptyText}>Sargyt ýok</Text>}
       />
 
       {/* Floating Action Button */}

src/screens/Main/ProfileScreen.js

@@ -82,8 +82,8 @@ const ProfileScreen = () => {
       items: [
         // { id: 11, title: 'Ulanmak düzgünleri', icon: 'document-text', hasArrow: true },
         // { id: 12, title: 'Gizlinlik syýasaty', icon: 'lock-open', hasArrow: true },
-        { id: 13, title: 'Programma barada', icon: 'information-circle', value: 'v1.0.0', hasArrow: true },
-        { id: 14, title: 'Hasaby poz', icon: 'trash', hasArrow: false, color: COLORS.red },
+        { id: 13, title: 'Programma barada', icon: 'information-circle', value: 'v1.0.0', hasArrow: false },
+        { id: 14, title: 'Hasaby poz', icon: 'trash', hasArrow: false, danger: true },
       ],
     },
   ];
@@ -106,7 +106,7 @@ const ProfileScreen = () => {
         handleSecuritySettings();
         break;
       case 13: // About App
-        Alert.alert('Üns beriň', 'Programma barada maglumatlar açylýar...');
+        // Alert.alert('Üns beriň', 'Programma barada maglumatlar açylýar...');
         break;
       case 14: // Delete Account
         handleDeleteAccount();
@@ -337,16 +337,16 @@ const ProfileScreen = () => {
                 >
                   <View style={styles.profileItemLeft}>
                     <View style={styles.profileItemIcon}>
-                      <Ionicons name={item.icon} size={20} color={item.color || COLORS.primary} />
+                      <Ionicons name={item.icon} size={20} color={item.danger ? COLORS.error : COLORS.primary} />
                     </View>
-                    <Text style={styles.profileItemTitle}>{item.title}</Text>
+                    <Text style={item.danger ? styles.profileItemTitleDanger : styles.profileItemTitle}>{item.title}</Text>
                   </View>
                   <View style={styles.profileItemRight}>
                     {item.value && (
-                      <Text style={styles.profileItemValue}>{item.value}</Text>
+                      <Text style={item.danger ? styles.profileItemValueDanger : styles.profileItemValue}>{item.value}</Text>
                     )}
                     {item.hasArrow && (
-                      <Ionicons name="chevron-forward" size={16} color={COLORS.gray[400]} />
+                      <Ionicons name="chevron-forward" size={16} color={item.danger ? COLORS.error : COLORS.gray[400]} />
                     )}
                   </View>
                 </TouchableOpacity>
@@ -550,6 +550,16 @@ const styles = StyleSheet.create({
   link: {
     color: COLORS.primary,
   },
+  profileItemTitleDanger: {
+    fontSize: 16,
+    color: COLORS.error,
+    fontWeight: 'bold',
+  },
+  profileItemValueDanger: {
+    fontSize: 14,
+    color: COLORS.error,
+    fontWeight: 'bold',
+  },
 });
 
 export default ProfileScreen;