delete safeAreaView

App.tsx

@@ -214,20 +214,3 @@ export default function App() {
     </QueryClientProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  headerWrap: { flex: 1 },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#28A7E8',
-    height: 60,
-    paddingHorizontal: 12,
-  },
-  headerTitle: {
-    color: '#fff',
-    fontSize: 20,
-    fontWeight: '600',
-    marginLeft: 8,
-  },
-});

src/components/Layout.tsx

@@ -1,7 +1,5 @@
-// src/components/Layout.tsx
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import Navbar from './Navbar';
 import Navigation from './Navigation';
 
@@ -11,13 +9,11 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
-    <SafeAreaView style={styles.safeArea}>
     <View style={styles.container}>
       <Navbar />
-        <View style={styles.content}>{children}</View>
+      {children}
       <Navigation />
     </View>
-    </SafeAreaView>
   );
 };
 
@@ -30,20 +26,6 @@ const styles = StyleSheet.create({
   },
   container: {
     flex: 1,
-  },
+    backgroundColor: '#fff',
-  header: {
-    height: 60,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
-  },
-  content: {
-    flex: 1,
-  },
-  footer: {
-    height: 50,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#eee',
   },
 });

src/components/LayoutTwo.tsx

@@ -1,7 +1,5 @@
-// src/components/Layout.tsx
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import NavbarBack from './NavbarBack';
 import Navigation from './Navigation';
 
@@ -12,13 +10,11 @@ interface LayoutProps {
 
 const LayoutTwo: React.FC<LayoutProps> = ({ title, children }) => {
   return (
-    <SafeAreaView style={styles.safeArea}>
     <View style={styles.container}>
       <NavbarBack title={title} />
-        <View style={styles.content}>{children}</View>
+      {children}
       <Navigation />
     </View>
-    </SafeAreaView>
   );
 };
 
@@ -31,20 +27,6 @@ const styles = StyleSheet.create({
   },
   container: {
     flex: 1,
-  },
+    backgroundColor: '#fff',
-  header: {
-    height: 60,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
-  },
-  content: {
-    flex: 1,
-  },
-  footer: {
-    height: 50,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#eee',
   },
 });

src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   Dimensions,
   Image,
@@ -12,6 +12,7 @@ import {
   View,
 } from 'react-native';
 import AppLink from 'react-native-app-link';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Logo from 'screens/../../assets/bootsplash/logo.png';
 import Bell from 'svg/Bell';
 import Instagram from 'svg/Instagram';
@@ -23,17 +24,9 @@ const isSmallScreen = width < 360;
 
 const Navbar = () => {
   const [browserUrl, setBrowserUrl] = useState('');
+  const { top } = useSafeAreaInsets();
   const [modalVisible, setModalVisible] = useState(false);
   const navigation = useNavigation<NativeStackNavigationProp<any>>();
-  const iconSizes = useMemo(
-    () => ({
-      telegram: isSmallScreen ? 20 : 24,
-      instagram: isSmallScreen ? 18 : 22,
-      facebook: isSmallScreen ? 22 : 26,
-      bell: isSmallScreen ? 20 : 24,
-    }),
-    [],
-  );
 
   const openTelegram = useCallback(async () => {
     try {
@@ -82,7 +75,7 @@ const Navbar = () => {
 
   return (
     <>
-      <View style={styles.header}>
+      <View style={[styles.header, { marginTop: top }]}>
         <View style={styles.logo}>
           <Image source={Logo} style={styles.logoImage} />
           <Text style={styles.title}>CPOST</Text>

src/components/NavbarBack.tsx

@@ -2,6 +2,7 @@ import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import ArrowLeft from 'svg/ArrowLeft';
 
 interface NavbarBackProps {
@@ -10,8 +11,9 @@ interface NavbarBackProps {
 
 const NavbarBack = ({ title }: NavbarBackProps) => {
   const navigation = useNavigation<NativeStackNavigationProp<any>>();
+  const { top } = useSafeAreaInsets();
   return (
-    <View style={styles.header}>
+    <View style={[styles.header, { marginTop: top }]}>
       <TouchableOpacity onPress={() => navigation.goBack()}>
         <ArrowLeft color="#fff" width={20} height={20} />
       </TouchableOpacity>

src/components/Navigation.tsx

@@ -9,6 +9,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import HomeIcon from 'svg/HomeIcon';
 import Passport from 'svg/Passport';
@@ -23,6 +24,7 @@ type RouteName = 'Home' | 'Status' | 'Passports' | 'Wallet' | 'Profile';
 
 const Navigation = () => {
   const navigation = useNavigation<NativeStackNavigationProp<any>>();
+  const { bottom } = useSafeAreaInsets();
   const route = useRoute();
   const { t } = useTranslation();
   const links = useMemo(
@@ -84,7 +86,7 @@ const Navigation = () => {
   );
 
   return (
-    <View style={styles.wrapper}>
+    <View style={[styles.wrapper, { marginBottom: bottom }]}>
       <View style={containerStyle}>{navItems}</View>
     </View>
   );
@@ -95,20 +97,18 @@ const styles = StyleSheet.create({
     bottom: 0,
     width: '100%',
     height: 70,
+    backgroundColor: '#fff',
   },
   container: {
+    width: '100%',
     height: '100%',
     backgroundColor: '#fff',
+    borderColor: '#eee',
+    borderWidth: 1,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     flexDirection: 'row',
-    shadowColor: '#000',
-    shadowOpacity: 0.1,
     justifyContent: 'space-around',
-    shadowOffset: { width: 0, height: -2 },
-    shadowRadius: 10,
-    elevation: 10,
-    width: '100%',
   },
   links: {
     justifyContent: 'center',

src/screens/passport/createPassport/ui/CreatePassword.tsx

@@ -3,8 +3,7 @@ import { useMutation } from '@tanstack/react-query';
 import passportApi, { AddPassportPayload } from 'api/passport';
 import DatePickerInput from 'components/DatePicker';
 import SingleFileDrop from 'components/FileDrop';
-import NavbarBack from 'components/NavbarBack';
+import LayoutTwo from 'components/LayoutTwo';
-import Navigation from 'components/Navigation';
 import React, { useEffect, useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -19,7 +18,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import Calendar from 'svg/Calendar';
 import { PassportStyle } from '../../myPassport/ui/styled';
 import { CreatePassSchema, CreatePassSchemaType } from '../lib/form';
@@ -107,8 +105,7 @@ const CreatePassword = () => {
     });
   };
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <LayoutTwo title="Yangi pasport qo'shish">
-      <NavbarBack title={t("Yangi pasport qo'shish")} />
       <KeyboardAvoidingView
         style={PassportStyle.container}
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -392,8 +389,7 @@ const CreatePassword = () => {
       {success && (
         <CreateModal visible={success} setVisible={setSuccess} error={error} />
       )}
-      <Navigation />
+    </LayoutTwo>
-    </SafeAreaView>
   );
 };
 

src/screens/passport/myPassport/ui/MyPassport.tsx

@@ -166,7 +166,7 @@ const styles = StyleSheet.create({
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.1,
     shadowRadius: 4,
-    elevation: 4,
+    elevation: 2,
     marginBottom: 20,
   },
   title: {

src/screens/passport/myPassport/ui/Passport.tsx

@@ -3,6 +3,7 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useQuery } from '@tanstack/react-query';
 import { authApi } from 'api/auth';
 import passportApi from 'api/passport';
+import Layout from 'components/Layout';
 import LoadingScreen from 'components/LoadingScreen';
 import Navbar from 'components/Navbar';
 import Navigation from 'components/Navigation';
@@ -17,7 +18,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import PassportIcon from 'svg/Passport';
 import Plus from 'svg/Plus';
 import MyPassport from './MyPassport';
@@ -65,32 +65,26 @@ const Passport = () => {
 
   if (passportLoad || getMeLoad || passFetching) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
       <View style={styles.container}>
         <Navbar />
         <LoadingScreen message="Pasport sahifasi yuklanmoqda..." />
         <Navigation />
       </View>
-      </SafeAreaView>
     );
   }
 
   if (isErrorPass) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
       <View style={styles.container}>
         <Navbar />
         <NoResult message="Xatolik yuz berdi" />
         <Navigation />
       </View>
-      </SafeAreaView>
     );
   }
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <Layout>
-      <View style={styles.container}>
-        <Navbar />
       <ScrollView
         refreshControl={refreshControl}
         removeClippedSubviews={true}
@@ -121,13 +115,9 @@ const Passport = () => {
         activeOpacity={0.7}
       >
         <Plus color="#fff" width={24} height={24} />
-          <Text style={styles.addButtonText}>
+        <Text style={styles.addButtonText}>{t("Yangi pasport qo'shish")}</Text>
-            {t("Yangi pasport qo'shish")}
-          </Text>
       </TouchableOpacity>
-        <Navigation />
+    </Layout>
-      </View>
-    </SafeAreaView>
   );
 };
 

src/screens/profile/myProfile/ui/Profile.tsx

@@ -1,9 +1,7 @@
+import Layout from 'components/Layout';
 import LoadingScreen from 'components/LoadingScreen';
-import Navbar from 'components/Navbar';
-import Navigation from 'components/Navigation';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { RefreshControl, ScrollView, StyleSheet, View } from 'react-native';
+import { RefreshControl, ScrollView, StyleSheet } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import ProfileHeader from './ProfileHeader';
 import ProfilePages from './ProfilePages';
 
@@ -43,20 +41,14 @@ const Profile = () => {
 
   if (loading) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <Layout>
-        <View style={styles.container}>
-          <Navbar />
         <LoadingScreen />
-          <Navigation />
+      </Layout>
-        </View>
-      </SafeAreaView>
     );
   }
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <Layout>
-      <View style={styles.container}>
-        <Navbar />
       <ScrollView
         keyboardShouldPersistTaps="handled"
         refreshControl={refreshControl}
@@ -65,9 +57,7 @@ const Profile = () => {
         <ProfileHeader />
         <ProfilePages />
       </ScrollView>
-        <Navigation />
+    </Layout>
-      </View>
-    </SafeAreaView>
   );
 };
 

src/screens/profile/notifications/ui/Notifications.tsx

@@ -1,5 +1,4 @@
-import NavbarBack from 'components/NavbarBack';
+import LayoutTwo from 'components/LayoutTwo';
-import Navigation from 'components/Navigation';
 import NoResult from 'components/NoResult';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,9 +8,7 @@ import {
   StyleSheet,
   Text,
   TouchableOpacity,
-  View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import Clock from 'svg/Clock';
 import { fakeNotifications, NotificationsData } from '../lib/data';
 import NotificationsModal from './NotificationsModal';
@@ -44,20 +41,14 @@ const Notifications = (props: NotificationsProps) => {
 
   if (!(fakeNotifications.length > 0)) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <LayoutTwo title={t('Bildirishnomalar')}>
-        <NavbarBack title={t('Bildirishnomalar')} />
-        <View style={styles.container}>
         <NoResult />
-        </View>
+      </LayoutTwo>
-        <Navigation />
-      </SafeAreaView>
     );
   }
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <LayoutTwo title={t('Bildirishnomalar')}>
-      <View style={styles.container}>
-        <NavbarBack title={t('Bildirishnomalar')} />
       <ScrollView
         keyboardShouldPersistTaps="handled"
         refreshControl={refreshControl}
@@ -78,9 +69,7 @@ const Notifications = (props: NotificationsProps) => {
         setVisible={setModalVisible}
         selectedOrder={selectedOrder}
       />
-        <Navigation />
+    </LayoutTwo>
-      </View>
-    </SafeAreaView>
   );
 };
 

src/screens/profile/settings/ui/Settings.tsx

@@ -1,10 +1,8 @@
-import { useNavigation } from '@react-navigation/native';
+import LayoutTwo from 'components/LayoutTwo';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import NavbarBack from 'components/NavbarBack';
-import Navigation from 'components/Navigation';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
+  ActivityIndicator,
   Image,
   RefreshControl,
   ScrollView,
@@ -13,28 +11,29 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import RU from 'screens/../../assets/bootsplash/RU.png';
 import UZ from 'screens/../../assets/bootsplash/UZ.png';
 import Check from 'svg/Check';
 import { changeLanguage } from 'utils/changeLanguage';
 
-interface SettingsProps {}
-
 const languages = [
   { code: 'uz', label: "O'zbek tili", Icon: UZ },
   { code: 'ru', label: 'Rus tili', Icon: RU },
 ];
 
-const Settings = (props: SettingsProps) => {
+const Settings = () => {
   const [refreshing, setRefreshing] = React.useState(false);
+  const [loadingLang, setLoadingLang] = React.useState<string | null>(null);
   const { i18n, t } = useTranslation();
-  const navigation = useNavigation<NativeStackNavigationProp<any>>();
-
   const selectedLang = languages.find(l => l.code === i18n.language);
 
-  const handlechangeLanguage = (lang: string) => {
+  const handlechangeLanguage = async (lang: string) => {
-    changeLanguage(lang);
+    try {
+      setLoadingLang(lang);
+      await changeLanguage(lang);
+    } finally {
+      setLoadingLang(null);
+    }
   };
 
   const onRefresh = React.useCallback(() => {
@@ -44,46 +43,36 @@ const Settings = (props: SettingsProps) => {
     }, 1500);
   }, []);
 
-  const refreshControl = React.useMemo(
-    () => <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />,
-    [refreshing, onRefresh],
-  );
-
-  const contentContainerStyle = React.useMemo(
-    () => ({ paddingBottom: 10 }),
-    [],
-  );
-
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <LayoutTwo title={t('Sozlamalar')}>
-      <View style={styles.container}>
-        <NavbarBack title={t('Sozlamalar')} />
       <ScrollView
         keyboardShouldPersistTaps="handled"
-          refreshControl={refreshControl}
+        refreshControl={
-          contentContainerStyle={contentContainerStyle}
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        contentContainerStyle={{ paddingBottom: 10 }}
       >
         <View style={{ marginTop: 10, width: '95%', margin: 'auto' }}>
           <Text style={{ fontSize: 20, fontWeight: '500' }}>
             {t('select_language')}
           </Text>
-            {languages.map(item => (
+          {languages.map(item => {
+            const isSelected = selectedLang?.code === item.code;
+            const isLoading = loadingLang === item.code;
+
+            return (
               <TouchableOpacity
                 style={[
                   styles.card,
                   {
-                    backgroundColor:
+                    backgroundColor: isSelected ? '#28A7E81A' : '#FFFFFF',
-                      selectedLang?.code === item.code
+                    shadowColor: isSelected ? '#28A7E81A' : '#F3FAFF',
-                        ? '#28A7E81A'
+                    opacity: isLoading ? 0.6 : 1,
-                        : '#FFFFFF',
-                    shadowColor:
-                      selectedLang?.code === item.code
-                        ? '#28A7E81A'
-                        : '#F3FAFF',
                   },
                 ]}
                 key={item.code}
                 onPress={() => handlechangeLanguage(item.code)}
+                disabled={isLoading}
               >
                 <View
                   style={{
@@ -94,17 +83,12 @@ const Settings = (props: SettingsProps) => {
                 >
                   <Image
                     source={item.Icon}
-                    style={{ width: 30, height: 30, objectFit: 'contain' }}
+                    style={{ width: 30, height: 30, resizeMode: 'contain' }}
                   />
                   <Text
                     style={[
                       styles.label,
-                      {
+                      { color: isSelected ? '#28A7E8' : '#000000' },
-                        color:
-                          selectedLang?.code === item.code
-                            ? '#28A7E8'
-                            : '#000000',
-                      },
                     ]}
                   >
                     {item.label}
@@ -114,64 +98,53 @@ const Settings = (props: SettingsProps) => {
                   style={[
                     styles.check,
                     {
-                      backgroundColor:
+                      backgroundColor: isSelected ? '#28A7E8' : '#FFFFFF',
-                        selectedLang?.code === item.code
+                      borderColor: isSelected ? '#28A7E8' : '#383838',
-                          ? '#28A7E8'
-                          : '#FFFFFF',
-                      borderColor:
-                        selectedLang?.code === item.code
-                          ? '#28A7E8'
-                          : '#383838',
                     },
                   ]}
                 >
-                  {selectedLang?.code === item.code && (
+                  {isLoading ? (
-                    <Check width={20} height={20} color="#ffff" />
+                    <ActivityIndicator size="small" color="#28A7E8" />
+                  ) : (
+                    isSelected && <Check width={20} height={20} color="#fff" />
                   )}
                 </View>
               </TouchableOpacity>
-            ))}
+            );
+          })}
         </View>
-          {/* <TouchableOpacity
-            style={[styles.card, { width: '95%', margin: 'auto' }]}
-            onPress={() => navigation.navigate('SettingsLock')}
-          >
-            <Text>Parol o'rnatish</Text>
-            <ArrowRightUnderline width={20} height={20} color="#383838" />
-          </TouchableOpacity> */}
       </ScrollView>
-        <Navigation />
+    </LayoutTwo>
-      </View>
-    </SafeAreaView>
   );
 };
 
 export default Settings;
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   card: {
     backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#eee',
     shadowColor: '#F3FAFF',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.3,
     shadowRadius: 4,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    padding: 15,
+    paddingVertical: 15,
-    marginTop: 10,
+    paddingHorizontal: 12,
     borderRadius: 10,
+    marginTop: 10,
     alignItems: 'center',
+    elevation: 1,
   },
   label: {
     fontWeight: '400',
     fontSize: 16,
   },
   check: {
-    width: 20,
+    width: 24,
-    height: 20,
+    height: 24,
     borderWidth: 1,
     borderColor: '#383838',
     borderRadius: 6,

src/screens/profile/warehouses/ui/Warehouses.tsx

@@ -1,6 +1,5 @@
 import SingleFileDrop from 'components/FileDrop';
-import NavbarBack from 'components/NavbarBack';
+import LayoutTwo from 'components/LayoutTwo';
-import Navigation from 'components/Navigation';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -11,7 +10,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import TabsAutoWarehouses from './TabsAutoWarehouses';
 import TabsAviaWarehouses from './TabsAviaWarehouses';
 
@@ -38,9 +36,7 @@ const Warehouses = (props: WarehousesProps) => {
     [],
   );
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <LayoutTwo title={t('Xitoy omborlari manzili')}>
-      <View style={styles.container}>
-        <NavbarBack title={t('Xitoy omborlari manzili')} />
       <ScrollView
         keyboardShouldPersistTaps="handled"
         refreshControl={refreshControl}
@@ -82,9 +78,7 @@ const Warehouses = (props: WarehousesProps) => {
           </TouchableOpacity>
         </View>
       </ScrollView>
-        <Navigation />
+    </LayoutTwo>
-      </View>
-    </SafeAreaView>
   );
 };
 

src/screens/wallet/payment/lib/data.ts

@@ -6,7 +6,7 @@ interface PaymentData {
   weight: string;
   count: number;
   totalPrice: string;
-  status: PaymentStatus;
+  paymentStatus: PaymentStatus;
 }
 
 export const fakePayments: PaymentData[] = [
@@ -16,7 +16,7 @@ export const fakePayments: PaymentData[] = [
     weight: '10kg',
     count: 5,
     totalPrice: '78 980 so’m',
-    status: 'unpaid',
+    paymentStatus: 'unpaid',
   },
   {
     id: '2',
@@ -24,7 +24,7 @@ export const fakePayments: PaymentData[] = [
     weight: '8kg',
     count: 3,
     totalPrice: '52 000 so’m',
-    status: 'paid',
+    paymentStatus: 'paid',
   },
   {
     id: '3',
@@ -32,7 +32,7 @@ export const fakePayments: PaymentData[] = [
     weight: '15kg',
     count: 7,
     totalPrice: '100 500 so’m',
-    status: 'paid',
+    paymentStatus: 'paid',
   },
   {
     id: '4',
@@ -40,6 +40,6 @@ export const fakePayments: PaymentData[] = [
     weight: '12kg',
     count: 6,
     totalPrice: '88 200 so’m',
-    status: 'paid',
+    paymentStatus: 'paid',
   },
 ];

src/screens/wallet/payment/ui/Wallet.tsx

@@ -1,8 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import packetsApi from 'api/packets';
+import Layout from 'components/Layout';
 import LoadingScreen from 'components/LoadingScreen';
-import Navbar from 'components/Navbar';
-import Navigation from 'components/Navigation';
 import NoResult from 'components/NoResult';
 import Pagination from 'components/Pagination';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -15,7 +14,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import Payment from './Payment';
 
 const Wallet = () => {
@@ -94,25 +92,17 @@ const Wallet = () => {
 
   if (isLoading || isFetching || isLoadingAvia || isFetchingAvia) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <Layout>
-        <View style={styles.container}>
-          <Navbar />
         <LoadingScreen />
-          <Navigation />
+      </Layout>
-        </View>
-      </SafeAreaView>
     );
   }
 
   if (isError || isErrorAvia) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <Layout>
-        <View style={styles.container}>
-          <Navbar />
         <NoResult message="Xatolik yuz berdi" />
-          <Navigation />
+      </Layout>
-        </View>
-      </SafeAreaView>
     );
   }
 
@@ -121,23 +111,19 @@ const Wallet = () => {
     (packetsAvia && !(packetsAvia?.data.length > 0))
   ) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <Layout>
-        <Navbar />
         <View style={styles.container}>
           <View style={styles.header}>
             <Text style={styles.title}>{t("To'lov")}</Text>
           </View>
           <NoResult />
         </View>
-        <Navigation />
+      </Layout>
-      </SafeAreaView>
     );
   }
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <Layout>
-      <View style={styles.container}>
-        <Navbar />
       <ScrollView
         refreshControl={refreshControl}
         style={{ flex: 1 }}
@@ -219,10 +205,7 @@ const Wallet = () => {
           </View>
         </View>
       </ScrollView>
-
+    </Layout>
-        <Navigation />
-      </View>
-    </SafeAreaView>
   );
 };
 

src/screens/wallet/payment/ui/style.ts

@@ -59,7 +59,7 @@ export const PaymentStyle = StyleSheet.create({
   },
   button: {
     position: 'absolute',
-    bottom: 70,
+    // bottom: 70,
     left: 20,
     right: 20,
     height: 56,
@@ -86,7 +86,7 @@ export const PaymentStyle = StyleSheet.create({
   containerMethod: {
     width: '95%',
     alignSelf: 'center',
-    marginTop: 20,
+    marginTop: 10,
   },
   cardMethod: {
     backgroundColor: '#FFFFFF',

src/screens/wallet/paymentMethod/ui/ModalCard.tsx

@@ -14,6 +14,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Check from 'svg/Check';
 import Click from 'svg/Click';
 import Payme from 'svg/Payme';
@@ -44,6 +45,7 @@ const ModalCard = ({
 }: ModalCardViewProps) => {
   const slideAnim = useRef(new Animated.Value(height)).current;
   const [load, setLoad] = React.useState(false);
+  const { bottom } = useSafeAreaInsets();
   const [pay, setPay] = useState<string>('');
   const { t } = useTranslation();
 
@@ -109,7 +111,7 @@ const ModalCard = ({
   if (!isVisible) return null;
 
   return (
-    <View style={styles.overlay}>
+    <View style={[styles.overlay, { bottom }]}>
       <TouchableWithoutFeedback onPress={closeModal}>
         <View style={styles.backdrop} />
       </TouchableWithoutFeedback>
@@ -217,7 +219,6 @@ const styles = StyleSheet.create({
     top: 0,
     left: 0,
     right: 0,
-    bottom: 0,
     zIndex: 1000,
     justifyContent: 'flex-end',
   },

src/screens/wallet/paymentMethod/ui/ModalPay.tsx

@@ -10,6 +10,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Check from 'svg/Check';
 import CreditCard from 'svg/CreditCard';
 import Usd from 'svg/Dollar';
@@ -40,6 +41,7 @@ const ModalPay = ({
 }: ModalPayProps) => {
   const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
   const opacity = useRef(new Animated.Value(0)).current;
+  const { bottom } = useSafeAreaInsets();
   const [load, setLoad] = React.useState(false);
   const { t } = useTranslation();
   useEffect(() => {
@@ -99,6 +101,7 @@ const ModalPay = ({
           styles.overlay,
           {
             opacity: opacity,
+            bottom,
           },
         ]}
       >
@@ -237,7 +240,6 @@ const styles = StyleSheet.create({
     top: 0,
     left: 0,
     right: 0,
-    bottom: 0,
     backgroundColor: 'rgba(0,0,0,0.4)',
     justifyContent: 'flex-end',
     zIndex: 30,

src/screens/wallet/paymentMethod/ui/PaymentMethod.tsx

@@ -1,10 +1,9 @@
 import { RouteProp, useRoute } from '@react-navigation/native';
-import NavbarBack from 'components/NavbarBack';
+import LayoutTwo from 'components/LayoutTwo';
-import Navigation from 'components/Navigation';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { Text, TouchableOpacity } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PaymentStyle } from '../../payment/ui/style';
 import ModalCard from './ModalCard';
 import ModalPay from './ModalPay';
@@ -14,7 +13,7 @@ import PaymentProduct from './PaymentProduct';
 const PaymentMethod = () => {
   const route = useRoute<RouteProp<any, 'PaymentMethod'>>();
   const packets = route.params?.packets;
-
+  const { bottom } = useSafeAreaInsets();
   const [isModalVisible, setModalVisible] = React.useState(false);
   const { t } = useTranslation();
   const [selectedId, setSelectedId] = React.useState<'card' | 'pay' | null>(
@@ -37,9 +36,7 @@ const PaymentMethod = () => {
   }, [payModal]);
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <LayoutTwo title={t("To'lov usuli")}>
-      <View style={{ flex: 1 }}>
-        <NavbarBack title={t("To'lov usuli")} />
       <PaymentProduct packet={packets!} />
       <ModalPay
         isModalVisible={isModalVisible}
@@ -69,12 +66,13 @@ const PaymentMethod = () => {
           setPayModal={setPayModal}
         />
       )}
-        <TouchableOpacity style={[PaymentStyle.button]} onPress={toggleModal}>
+      <TouchableOpacity
+        style={[PaymentStyle.button, { bottom: bottom + 80 }]}
+        onPress={toggleModal}
+      >
         <Text style={PaymentStyle.btnText}>{t("To'lash")}</Text>
       </TouchableOpacity>
-        <Navigation />
+    </LayoutTwo>
-      </View>
-    </SafeAreaView>
   );
 };
 

src/screens/wallet/paymentMethod/ui/PaymentProduct.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dimensions, ScrollView, Text, View } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
+import { fakePayments } from 'screens/wallet/payment/lib/data';
 import Plane from 'svg/Plane';
 import { PaymentStyle } from '../../payment/ui/style';
 
@@ -14,7 +15,6 @@ const PaymentProduct = ({ packet }: PaymentProductProps) => {
   const screenWidth = Dimensions.get('window').width;
   const isSmallScreen = screenWidth < 380;
   const svgWidth = screenWidth * 0.8;
-  console.log(packet);
 
   return (
     <ScrollView
@@ -133,14 +133,14 @@ const PaymentProduct = ({ packet }: PaymentProductProps) => {
             }}
           />
         </View>
-        {packet.items.map((item: any, index: number) => {
+        {fakePayments.map((item: any, index: number) => {
           const price = Number(item.price);
           const weight = Number(item.weight);
-          const total = price * weight;
+          // const total = price * weight;
 
           // formatlash: 0 decimal, so‘m bilan
           const formattedPrice = price.toFixed(0);
-          const formattedTotal = total.toFixed(0);
+          // const formattedTotal = total.toFixed(0);
           return (
             <View key={index} style={{ marginBottom: 15 }}>
               <View style={PaymentStyle.receiptCard}>
@@ -160,7 +160,7 @@ const PaymentProduct = ({ packet }: PaymentProductProps) => {
                 </View>
                 <View style={PaymentStyle.rowRight}>
                   <Text style={PaymentStyle.total}>
-                    {t('Umumiy narxi')}: {formattedTotal} {t('so‘m')}
+                    {/* {t('Umumiy narxi')}: {formattedTotal} {t('so‘m')} */}
                   </Text>
                 </View>
               </View>

src/screens/wallet/successPayment/ui/PaymentQrCode.tsx

@@ -1,4 +1,4 @@
-import NavbarBack from 'components/NavbarBack';
+import LayoutTwo from 'components/LayoutTwo';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -9,7 +9,6 @@ import {
   Text,
   View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import Svg, { Circle, Path } from 'react-native-svg';
 import { PaymentStyle } from 'screens/wallet/payment/ui/style';
 import Plane from 'svg/Plane';
@@ -24,8 +23,7 @@ const PaymentQrCode = (props: PaymentQrCodeProps) => {
   const svgWidth = screenWidth * 0.8;
   const svgWidthProduct = screenWidth * 1;
   return (
-    <SafeAreaView>
+    <LayoutTwo title={t("To'lov usuli")}>
-      <NavbarBack title={t("To'lov usuli")} />
       <ScrollView
         style={PaymentStyle.containerMethod}
         contentContainerStyle={{ paddingBottom: 80 }}
@@ -264,7 +262,7 @@ const PaymentQrCode = (props: PaymentQrCodeProps) => {
           </View>
         </View>
       </ScrollView>
-    </SafeAreaView>
+    </LayoutTwo>
   );
 };