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}>
-      <View style={styles.container}>
+      <Navbar />
-        <Navbar />
+      {children}
-        <View style={styles.content}>{children}</View>
+      <Navigation />
-        <Navigation />
+    </View>
-      </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}>
-      <View style={styles.container}>
+      <NavbarBack title={title} />
-        <NavbarBack title={title} />
+      {children}
-        <View style={styles.content}>{children}</View>
+      <Navigation />
-        <Navigation />
+    </View>
-      </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,69 +65,59 @@ const Passport = () => {
 
   if (passportLoad || getMeLoad || passFetching) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <View style={styles.container}>
-        <View style={styles.container}>
+        <Navbar />
-          <Navbar />
+        <LoadingScreen message="Pasport sahifasi yuklanmoqda..." />
-          <LoadingScreen message="Pasport sahifasi yuklanmoqda..." />
+        <Navigation />
-          <Navigation />
+      </View>
-        </View>
-      </SafeAreaView>
     );
   }
 
   if (isErrorPass) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <View style={styles.container}>
-        <View style={styles.container}>
+        <Navbar />
-          <Navbar />
+        <NoResult message="Xatolik yuz berdi" />
-          <NoResult message="Xatolik yuz berdi" />
+        <Navigation />
-          <Navigation />
+      </View>
-        </View>
-      </SafeAreaView>
     );
   }
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <Layout>
-      <View style={styles.container}>
+      <ScrollView
-        <Navbar />
+        refreshControl={refreshControl}
-        <ScrollView
+        removeClippedSubviews={true}
-          refreshControl={refreshControl}
+        keyboardShouldPersistTaps="handled"
-          removeClippedSubviews={true}
+      >
-          keyboardShouldPersistTaps="handled"
+        <View style={styles.header}>
-        >
+          <Text style={styles.title}>{t('Passportlarim')}</Text>
-          <View style={styles.header}>
+        </View>
-            <Text style={styles.title}>{t('Passportlarim')}</Text>
+        {myPassport && myPassport.length === 0 ? (
-          </View>
+          <View style={styles.content}>
-          {myPassport && myPassport.length === 0 ? (
+            <View style={styles.emptyState}>
-            <View style={styles.content}>
+              <PassportIcon color="#ccc" width={80} height={80} />
-              <View style={styles.emptyState}>
+              <Text style={styles.emptyText}>
-                <PassportIcon color="#ccc" width={80} height={80} />
+                {t("Hali pasport qo'shilmagan")}
-                <Text style={styles.emptyText}>
+              </Text>
-                  {t("Hali pasport qo'shilmagan")}
+              <Text style={styles.emptySubtext}>
-                </Text>
+                {t("Yangi pasport qo'shish uchun tugmani bosing")}
-                <Text style={styles.emptySubtext}>
+              </Text>
-                  {t("Yangi pasport qo'shish uchun tugmani bosing")}
-                </Text>
-              </View>
             </View>
-          ) : (
+          </View>
-            <MyPassport getMe={getMe!} myPassport={myPassport!} />
+        ) : (
-          )}
+          <MyPassport getMe={getMe!} myPassport={myPassport!} />
-        </ScrollView>
+        )}
-        <TouchableOpacity
+      </ScrollView>
-          style={styles.addButton}
+      <TouchableOpacity
-          onPress={handleNavigateToCreatePassword}
+        style={styles.addButton}
-          activeOpacity={0.7}
+        onPress={handleNavigateToCreatePassword}
-        >
+        activeOpacity={0.7}
-          <Plus color="#fff" width={24} height={24} />
+      >
-          <Text style={styles.addButtonText}>
+        <Plus color="#fff" width={24} height={24} />
-            {t("Yangi pasport qo'shish")}
+        <Text style={styles.addButtonText}>{t("Yangi pasport qo'shish")}</Text>
-          </Text>
+      </TouchableOpacity>
-        </TouchableOpacity>
+    </Layout>
-        <Navigation />
-      </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,31 +41,23 @@ const Profile = () => {
 
   if (loading) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <Layout>
-        <View style={styles.container}>
+        <LoadingScreen />
-          <Navbar />
+      </Layout>
-          <LoadingScreen />
-          <Navigation />
-        </View>
-      </SafeAreaView>
     );
   }
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <Layout>
-      <View style={styles.container}>
+      <ScrollView
-        <Navbar />
+        keyboardShouldPersistTaps="handled"
-        <ScrollView
+        refreshControl={refreshControl}
-          keyboardShouldPersistTaps="handled"
+        contentContainerStyle={contentContainerStyle}
-          refreshControl={refreshControl}
+      >
-          contentContainerStyle={contentContainerStyle}
+        <ProfileHeader />
-        >
+        <ProfilePages />
-          <ProfileHeader />
+      </ScrollView>
-          <ProfilePages />
+    </Layout>
-        </ScrollView>
-        <Navigation />
-      </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,43 +41,35 @@ const Notifications = (props: NotificationsProps) => {
 
   if (!(fakeNotifications.length > 0)) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <LayoutTwo title={t('Bildirishnomalar')}>
-        <NavbarBack title={t('Bildirishnomalar')} />
+        <NoResult />
-        <View style={styles.container}>
+      </LayoutTwo>
-          <NoResult />
-        </View>
-        <Navigation />
-      </SafeAreaView>
     );
   }
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <LayoutTwo title={t('Bildirishnomalar')}>
-      <View style={styles.container}>
+      <ScrollView
-        <NavbarBack title={t('Bildirishnomalar')} />
+        keyboardShouldPersistTaps="handled"
-        <ScrollView
+        refreshControl={refreshControl}
-          keyboardShouldPersistTaps="handled"
+      >
-          refreshControl={refreshControl}
+        {fakeNotifications.map(item => (
-        >
+          <TouchableOpacity
-          {fakeNotifications.map(item => (
+            onPress={() => openModal(item)}
-            <TouchableOpacity
+            style={styles.card}
-              onPress={() => openModal(item)}
+            key={item.id}
-              style={styles.card}
+          >
-              key={item.id}
+            <Text style={styles.text}>{item.message}</Text>
-            >
+            <Clock color="#000000" />
-              <Text style={styles.text}>{item.message}</Text>
+          </TouchableOpacity>
-              <Clock color="#000000" />
+        ))}
-            </TouchableOpacity>
+      </ScrollView>
-          ))}
+      <NotificationsModal
-        </ScrollView>
+        visible={modalVisible}
-        <NotificationsModal
+        setVisible={setModalVisible}
-          visible={modalVisible}
+        selectedOrder={selectedOrder}
-          setVisible={setModalVisible}
+      />
-          selectedOrder={selectedOrder}
+    </LayoutTwo>
-        />
-        <Navigation />
-      </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}>
+      <ScrollView
-        <NavbarBack title={t('Sozlamalar')} />
+        keyboardShouldPersistTaps="handled"
-        <ScrollView
+        refreshControl={
-          keyboardShouldPersistTaps="handled"
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-          refreshControl={refreshControl}
+        }
-          contentContainerStyle={contentContainerStyle}
+        contentContainerStyle={{ paddingBottom: 10 }}
-        >
+      >
-          <View style={{ marginTop: 10, width: '95%', margin: 'auto' }}>
+        <View style={{ marginTop: 10, width: '95%', margin: 'auto' }}>
-            <Text style={{ fontSize: 20, fontWeight: '500' }}>
+          <Text style={{ fontSize: 20, fontWeight: '500' }}>
-              {t('select_language')}
+            {t('select_language')}
-            </Text>
+          </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
+        </View>
-            style={[styles.card, { width: '95%', margin: 'auto' }]}
+      </ScrollView>
-            onPress={() => navigation.navigate('SettingsLock')}
+    </LayoutTwo>
-          >
-            <Text>Parol o'rnatish</Text>
-            <ArrowRightUnderline width={20} height={20} color="#383838" />
-          </TouchableOpacity> */}
-        </ScrollView>
-        <Navigation />
-      </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,53 +36,49 @@ const Warehouses = (props: WarehousesProps) => {
     [],
   );
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <LayoutTwo title={t('Xitoy omborlari manzili')}>
-      <View style={styles.container}>
+      <ScrollView
-        <NavbarBack title={t('Xitoy omborlari manzili')} />
+        keyboardShouldPersistTaps="handled"
-        <ScrollView
+        refreshControl={refreshControl}
-          keyboardShouldPersistTaps="handled"
+        contentContainerStyle={contentContainerStyle}
-          refreshControl={refreshControl}
+      >
-          contentContainerStyle={contentContainerStyle}
+        <View style={styles.card}>
-        >
+          <Text style={styles.title}>{t('Bizning Xitoy manzilimiz')}</Text>
-          <View style={styles.card}>
+          <Text style={styles.text}>
-            <Text style={styles.title}>{t('Bizning Xitoy manzilimiz')}</Text>
+            {t(
+              'Taobao, pinduoduo, 1688 ,alibaba va Xitoyning istalgan platformasiga kiritish uchun',
+            )}
+          </Text>
+          <TabsAviaWarehouses />
+          <TabsAutoWarehouses />
+          <Text style={styles.title}>
+            {t('Xitoy omborlarimiz manzilini programmaga kiriting')}
+          </Text>
+          <View style={{ gap: 20 }}>
             <Text style={styles.text}>
               {t(
-                'Taobao, pinduoduo, 1688 ,alibaba va Xitoyning istalgan platformasiga kiritish uchun',
+                "Diqqat! Iltimos, Xitoy omborimiz manzilini Xitoy programmalariga kiritganingizdan so'ng, kiritilgan holatdagi skrenshotni bizga yuborib, tekshirtiring",
               )}
             </Text>
-            <TabsAviaWarehouses />
+            <Text style={styles.text}>
-            <TabsAutoWarehouses />
+              {t(
-            <Text style={styles.title}>
+                "Xitoy ombori manzilini to'g'ri kiritish, mahsulotingiz yo'qolib qolish oldini oladi.",
-              {t('Xitoy omborlarimiz manzilini programmaga kiriting')}
+              )}
+            </Text>
+            <Text style={styles.text}>
+              {t(
+                "Agar sizda savol tug'ilsa yoki biron narsaga tushunmasangiz bizga murojaat qiling",
+              )}
             </Text>
-            <View style={{ gap: 20 }}>
-              <Text style={styles.text}>
-                {t(
-                  "Diqqat! Iltimos, Xitoy omborimiz manzilini Xitoy programmalariga kiritganingizdan so'ng, kiritilgan holatdagi skrenshotni bizga yuborib, tekshirtiring",
-                )}
-              </Text>
-              <Text style={styles.text}>
-                {t(
-                  "Xitoy ombori manzilini to'g'ri kiritish, mahsulotingiz yo'qolib qolish oldini oladi.",
-                )}
-              </Text>
-              <Text style={styles.text}>
-                {t(
-                  "Agar sizda savol tug'ilsa yoki biron narsaga tushunmasangiz bizga murojaat qiling",
-                )}
-              </Text>
-            </View>
-            <Text style={styles.title}>{t('Skrenshot rasmini yuklang')}</Text>
-            <SingleFileDrop title={t('Rasmni shu yerga yuklang')} />
-            <TouchableOpacity style={styles.button}>
-              <Text style={styles.btnText}>{t('Manzilni tekshirish')}</Text>
-            </TouchableOpacity>
           </View>
-        </ScrollView>
+          <Text style={styles.title}>{t('Skrenshot rasmini yuklang')}</Text>
-        <Navigation />
+          <SingleFileDrop title={t('Rasmni shu yerga yuklang')} />
-      </View>
+          <TouchableOpacity style={styles.button}>
-    </SafeAreaView>
+            <Text style={styles.btnText}>{t('Manzilni tekshirish')}</Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </LayoutTwo>
   );
 };
 

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}>
+        <LoadingScreen />
-          <Navbar />
+      </Layout>
-          <LoadingScreen />
-          <Navigation />
-        </View>
-      </SafeAreaView>
     );
   }
 
   if (isError || isErrorAvia) {
     return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <Layout>
-        <View style={styles.container}>
+        <NoResult message="Xatolik yuz berdi" />
-          <Navbar />
+      </Layout>
-          <NoResult message="Xatolik yuz berdi" />
-          <Navigation />
-        </View>
-      </SafeAreaView>
     );
   }
 
@@ -121,108 +111,101 @@ 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}>
+      <ScrollView
-        <Navbar />
+        refreshControl={refreshControl}
-        <ScrollView
+        style={{ flex: 1 }}
-          refreshControl={refreshControl}
+        contentContainerStyle={{ flexGrow: 1 }}
-          style={{ flex: 1 }}
+        removeClippedSubviews={true}
-          contentContainerStyle={{ flexGrow: 1 }}
+        keyboardShouldPersistTaps="handled"
-          removeClippedSubviews={true}
+      >
-          keyboardShouldPersistTaps="handled"
+        <View style={{ flex: 1, justifyContent: 'space-between' }}>
-        >
+          <View>
-          <View style={{ flex: 1, justifyContent: 'space-between' }}>
+            <View style={styles.header}>
-            <View>
+              <Text style={styles.title}>{t("To'lov")}</Text>
-              <View style={styles.header}>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                <Text style={styles.title}>{t("To'lov")}</Text>
+                <TouchableOpacity
-                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                  style={{
-                  <TouchableOpacity
+                    padding: 5,
+                    backgroundColor:
+                      selectedType === 'AVIA' ? '#28A7E8' : '#F3FAFF',
+                    borderTopLeftRadius: 8,
+                    borderBottomLeftRadius: 8,
+                  }}
+                  onPress={() => setSelectedType('AVIA')}
+                >
+                  <Text
                     style={{
-                      padding: 5,
+                      color: selectedType === 'AVIA' ? '#fff' : '#28A7E8',
-                      backgroundColor:
+                      fontSize: 14,
-                        selectedType === 'AVIA' ? '#28A7E8' : '#F3FAFF',
-                      borderTopLeftRadius: 8,
-                      borderBottomLeftRadius: 8,
                     }}
-                    onPress={() => setSelectedType('AVIA')}
                   >
-                    <Text
+                    AVIA
-                      style={{
+                  </Text>
-                        color: selectedType === 'AVIA' ? '#fff' : '#28A7E8',
+                </TouchableOpacity>
-                        fontSize: 14,
+                <View style={{ width: 1 }} />
-                      }}
+                <TouchableOpacity
-                    >
+                  style={{
-                      AVIA
+                    padding: 5,
-                    </Text>
+                    backgroundColor:
-                  </TouchableOpacity>
+                      selectedType === 'AUTO' ? '#28A7E8' : '#F3FAFF',
-                  <View style={{ width: 1 }} />
+                    borderTopRightRadius: 8,
-                  <TouchableOpacity
+                    borderBottomRightRadius: 8,
+                  }}
+                  onPress={() => setSelectedType('AUTO')}
+                >
+                  <Text
                     style={{
-                      padding: 5,
+                      color: selectedType === 'AUTO' ? '#fff' : '#28A7E8',
-                      backgroundColor:
+                      fontSize: 14,
-                        selectedType === 'AUTO' ? '#28A7E8' : '#F3FAFF',
+                      fontWeight: '500',
-                      borderTopRightRadius: 8,
-                      borderBottomRightRadius: 8,
                     }}
-                    onPress={() => setSelectedType('AUTO')}
                   >
-                    <Text
+                    AUTO
-                      style={{
+                  </Text>
-                        color: selectedType === 'AUTO' ? '#fff' : '#28A7E8',
+                </TouchableOpacity>
-                        fontSize: 14,
-                        fontWeight: '500',
-                      }}
-                    >
-                      AUTO
-                    </Text>
-                  </TouchableOpacity>
-                </View>
               </View>
-              <Payment
-                packets={selectedType === 'AUTO' ? packets! : packetsAvia!}
-              />
-            </View>
-
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'flex-end',
-                width: '95%',
-                alignSelf: 'center',
-                paddingRight: 20,
-                paddingVertical: 10,
-              }}
-            >
-              <Pagination
-                page={selectedType === 'AUTO' ? page : pageAvia}
-                totalPages={
-                  selectedType === 'AUTO'
-                    ? packets?.totalPages ?? 1
-                    : packetsAvia?.totalPages ?? 1
-                }
-                setPage={selectedType === 'AUTO' ? setPage : setPageAvia}
-              />
             </View>
+            <Payment
+              packets={selectedType === 'AUTO' ? packets! : packetsAvia!}
+            />
           </View>
-        </ScrollView>
 
-        <Navigation />
+          <View
-      </View>
+            style={{
-    </SafeAreaView>
+              flexDirection: 'row',
+              justifyContent: 'flex-end',
+              width: '95%',
+              alignSelf: 'center',
+              paddingRight: 20,
+              paddingVertical: 10,
+            }}
+          >
+            <Pagination
+              page={selectedType === 'AUTO' ? page : pageAvia}
+              totalPages={
+                selectedType === 'AUTO'
+                  ? packets?.totalPages ?? 1
+                  : packetsAvia?.totalPages ?? 1
+              }
+              setPage={selectedType === 'AUTO' ? setPage : setPageAvia}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </Layout>
   );
 };
 

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,44 +36,43 @@ const PaymentMethod = () => {
   }, [payModal]);
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <LayoutTwo title={t("To'lov usuli")}>
-      <View style={{ flex: 1 }}>
+      <PaymentProduct packet={packets!} />
-        <NavbarBack title={t("To'lov usuli")} />
+      <ModalPay
-        <PaymentProduct packet={packets!} />
+        isModalVisible={isModalVisible}
-        <ModalPay
+        selectedId={selectedId}
-          isModalVisible={isModalVisible}
+        setModalVisible={setModalVisible}
-          selectedId={selectedId}
+        setSelectedId={setSelectedId}
-          setModalVisible={setModalVisible}
+        cardModal={cardModal}
-          setSelectedId={setSelectedId}
+        setCardModal={setCardModal}
-          cardModal={cardModal}
+        payModal={payModal}
-          setCardModal={setCardModal}
+        setPayModal={setPayModal}
-          payModal={payModal}
+        success={success}
-          setPayModal={setPayModal}
+        setSuccess={setSuccess}
-          success={success}
+      />
-          setSuccess={setSuccess}
+      {cardModal && (
+        <ModalCard
+          isVisible={cardModal}
+          packId={packets.id}
+          setIsVisible={setCardModal}
+          selectedId={selectedCard}
+          setSelectedId={setSelectedCard}
         />
-        {cardModal && (
+      )}
-          <ModalCard
+      {success && (
-            isVisible={cardModal}
+        <ModalSuccess
-            packId={packets.id}
+          visible={success}
-            setIsVisible={setCardModal}
+          setVisible={setSuccess}
-            selectedId={selectedCard}
+          setPayModal={setPayModal}
-            setSelectedId={setSelectedCard}
+        />
-          />
+      )}
-        )}
+      <TouchableOpacity
-        {success && (
+        style={[PaymentStyle.button, { bottom: bottom + 80 }]}
-          <ModalSuccess
+        onPress={toggleModal}
-            visible={success}
+      >
-            setVisible={setSuccess}
+        <Text style={PaymentStyle.btnText}>{t("To'lash")}</Text>
-            setPayModal={setPayModal}
+      </TouchableOpacity>
-          />
+    </LayoutTwo>
-        )}
-        <TouchableOpacity style={[PaymentStyle.button]} onPress={toggleModal}>
-          <Text style={PaymentStyle.btnText}>{t("To'lash")}</Text>
-        </TouchableOpacity>
-        <Navigation />
-      </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>
   );
 };