delete safeAreaView

2025-08-28 11:46:46 +05:00
parent 03c8ba8540
commit e51ff4f502
21 changed files with 349 additions and 493 deletions
--- a/App.tsx
+++ b/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,
-  },
-});
--- a/src/components/Layout.tsx
+++ b/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>
-        <Navigation />
-      </View>
-    </SafeAreaView>
+    <View style={styles.container}>
+      <Navbar />
+      {children}
+      <Navigation />
+    </View>
  );
 };

@@ -30,20 +26,6 @@ const styles = StyleSheet.create({
  },
  container: {
    flex: 1,
-  },
-  header: {
-    height: 60,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
-  },
-  content: {
-    flex: 1,
-  },
-  footer: {
-    height: 50,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#eee',
+    backgroundColor: '#fff',
  },
 });
--- a/src/components/LayoutTwo.tsx
+++ b/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>
-        <Navigation />
-      </View>
-    </SafeAreaView>
+    <View style={styles.container}>
+      <NavbarBack title={title} />
+      {children}
+      <Navigation />
+    </View>
  );
 };

@@ -31,20 +27,6 @@ const styles = StyleSheet.create({
  },
  container: {
    flex: 1,
-  },
-  header: {
-    height: 60,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
-  },
-  content: {
-    flex: 1,
-  },
-  footer: {
-    height: 50,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#eee',
+    backgroundColor: '#fff',
  },
 });
--- a/src/components/Navbar.tsx
+++ b/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>
--- a/src/components/NavbarBack.tsx
+++ b/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>
--- a/src/components/Navigation.tsx
+++ b/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',
--- a/src/screens/passport/createPassport/ui/CreatePassword.tsx
+++ b/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 Navigation from 'components/Navigation';
+import LayoutTwo from 'components/LayoutTwo';
 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 }}>
-      <NavbarBack title={t("Yangi pasport qo'shish")} />
+    <LayoutTwo title="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 />
-    </SafeAreaView>
+    </LayoutTwo>
  );
 };

--- a/src/screens/passport/myPassport/ui/MyPassport.tsx
+++ b/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: {
--- a/src/screens/passport/myPassport/ui/Passport.tsx
+++ b/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}>
-          <Navbar />
-          <LoadingScreen message="Pasport sahifasi yuklanmoqda..." />
-          <Navigation />
-        </View>
-      </SafeAreaView>
+      <View style={styles.container}>
+        <Navbar />
+        <LoadingScreen message="Pasport sahifasi yuklanmoqda..." />
+        <Navigation />
+      </View>
    );
  }

  if (isErrorPass) {
    return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <View style={styles.container}>
-          <Navbar />
-          <NoResult message="Xatolik yuz berdi" />
-          <Navigation />
-        </View>
-      </SafeAreaView>
+      <View style={styles.container}>
+        <Navbar />
+        <NoResult message="Xatolik yuz berdi" />
+        <Navigation />
+      </View>
    );
  }

  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <View style={styles.container}>
-        <Navbar />
-        <ScrollView
-          refreshControl={refreshControl}
-          removeClippedSubviews={true}
-          keyboardShouldPersistTaps="handled"
-        >
-          <View style={styles.header}>
-            <Text style={styles.title}>{t('Passportlarim')}</Text>
-          </View>
-          {myPassport && myPassport.length === 0 ? (
-            <View style={styles.content}>
-              <View style={styles.emptyState}>
-                <PassportIcon color="#ccc" width={80} height={80} />
-                <Text style={styles.emptyText}>
-                  {t("Hali pasport qo'shilmagan")}
-                </Text>
-                <Text style={styles.emptySubtext}>
-                  {t("Yangi pasport qo'shish uchun tugmani bosing")}
-                </Text>
-              </View>
+    <Layout>
+      <ScrollView
+        refreshControl={refreshControl}
+        removeClippedSubviews={true}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.header}>
+          <Text style={styles.title}>{t('Passportlarim')}</Text>
+        </View>
+        {myPassport && myPassport.length === 0 ? (
+          <View style={styles.content}>
+            <View style={styles.emptyState}>
+              <PassportIcon color="#ccc" width={80} height={80} />
+              <Text style={styles.emptyText}>
+                {t("Hali pasport qo'shilmagan")}
+              </Text>
+              <Text style={styles.emptySubtext}>
+                {t("Yangi pasport qo'shish uchun tugmani bosing")}
+              </Text>
            </View>
-          ) : (
-            <MyPassport getMe={getMe!} myPassport={myPassport!} />
-          )}
-        </ScrollView>
-        <TouchableOpacity
-          style={styles.addButton}
-          onPress={handleNavigateToCreatePassword}
-          activeOpacity={0.7}
-        >
-          <Plus color="#fff" width={24} height={24} />
-          <Text style={styles.addButtonText}>
-            {t("Yangi pasport qo'shish")}
-          </Text>
-        </TouchableOpacity>
-        <Navigation />
-      </View>
-    </SafeAreaView>
+          </View>
+        ) : (
+          <MyPassport getMe={getMe!} myPassport={myPassport!} />
+        )}
+      </ScrollView>
+      <TouchableOpacity
+        style={styles.addButton}
+        onPress={handleNavigateToCreatePassword}
+        activeOpacity={0.7}
+      >
+        <Plus color="#fff" width={24} height={24} />
+        <Text style={styles.addButtonText}>{t("Yangi pasport qo'shish")}</Text>
+      </TouchableOpacity>
+    </Layout>
  );
 };

--- a/src/screens/profile/myProfile/ui/Profile.tsx
+++ b/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 { SafeAreaView } from 'react-native-safe-area-context';
+import { RefreshControl, ScrollView, StyleSheet } from 'react-native';
 import ProfileHeader from './ProfileHeader';
 import ProfilePages from './ProfilePages';

@@ -43,31 +41,23 @@ const Profile = () => {

  if (loading) {
    return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <View style={styles.container}>
-          <Navbar />
-          <LoadingScreen />
-          <Navigation />
-        </View>
-      </SafeAreaView>
+      <Layout>
+        <LoadingScreen />
+      </Layout>
    );
  }

  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <View style={styles.container}>
-        <Navbar />
-        <ScrollView
-          keyboardShouldPersistTaps="handled"
-          refreshControl={refreshControl}
-          contentContainerStyle={contentContainerStyle}
-        >
-          <ProfileHeader />
-          <ProfilePages />
-        </ScrollView>
-        <Navigation />
-      </View>
-    </SafeAreaView>
+    <Layout>
+      <ScrollView
+        keyboardShouldPersistTaps="handled"
+        refreshControl={refreshControl}
+        contentContainerStyle={contentContainerStyle}
+      >
+        <ProfileHeader />
+        <ProfilePages />
+      </ScrollView>
+    </Layout>
  );
 };

--- a/src/screens/profile/notifications/ui/Notifications.tsx
+++ b/src/screens/profile/notifications/ui/Notifications.tsx
@@ -1,5 +1,4 @@
-import NavbarBack from 'components/NavbarBack';
-import Navigation from 'components/Navigation';
+import LayoutTwo from 'components/LayoutTwo';
 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 }}>
-        <NavbarBack title={t('Bildirishnomalar')} />
-        <View style={styles.container}>
-          <NoResult />
-        </View>
-        <Navigation />
-      </SafeAreaView>
+      <LayoutTwo title={t('Bildirishnomalar')}>
+        <NoResult />
+      </LayoutTwo>
    );
  }

  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <View style={styles.container}>
-        <NavbarBack title={t('Bildirishnomalar')} />
-        <ScrollView
-          keyboardShouldPersistTaps="handled"
-          refreshControl={refreshControl}
-        >
-          {fakeNotifications.map(item => (
-            <TouchableOpacity
-              onPress={() => openModal(item)}
-              style={styles.card}
-              key={item.id}
-            >
-              <Text style={styles.text}>{item.message}</Text>
-              <Clock color="#000000" />
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-        <NotificationsModal
-          visible={modalVisible}
-          setVisible={setModalVisible}
-          selectedOrder={selectedOrder}
-        />
-        <Navigation />
-      </View>
-    </SafeAreaView>
+    <LayoutTwo title={t('Bildirishnomalar')}>
+      <ScrollView
+        keyboardShouldPersistTaps="handled"
+        refreshControl={refreshControl}
+      >
+        {fakeNotifications.map(item => (
+          <TouchableOpacity
+            onPress={() => openModal(item)}
+            style={styles.card}
+            key={item.id}
+          >
+            <Text style={styles.text}>{item.message}</Text>
+            <Clock color="#000000" />
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+      <NotificationsModal
+        visible={modalVisible}
+        setVisible={setModalVisible}
+        selectedOrder={selectedOrder}
+      />
+    </LayoutTwo>
  );
 };

--- a/src/screens/profile/settings/ui/Settings.tsx
+++ b/src/screens/profile/settings/ui/Settings.tsx
@@ -1,10 +1,8 @@
-import { useNavigation } from '@react-navigation/native';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import NavbarBack from 'components/NavbarBack';
-import Navigation from 'components/Navigation';
+import LayoutTwo from 'components/LayoutTwo';
 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) => {
-    changeLanguage(lang);
+  const handlechangeLanguage = async (lang: string) => {
+    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 }}>
-      <View style={styles.container}>
-        <NavbarBack title={t('Sozlamalar')} />
-        <ScrollView
-          keyboardShouldPersistTaps="handled"
-          refreshControl={refreshControl}
-          contentContainerStyle={contentContainerStyle}
-        >
-          <View style={{ marginTop: 10, width: '95%', margin: 'auto' }}>
-            <Text style={{ fontSize: 20, fontWeight: '500' }}>
-              {t('select_language')}
-            </Text>
-            {languages.map(item => (
+    <LayoutTwo title={t('Sozlamalar')}>
+      <ScrollView
+        keyboardShouldPersistTaps="handled"
+        refreshControl={
+          <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 => {
+            const isSelected = selectedLang?.code === item.code;
+            const isLoading = loadingLang === item.code;
+
+            return (
              <TouchableOpacity
                style={[
                  styles.card,
                  {
-                    backgroundColor:
-                      selectedLang?.code === item.code
-                        ? '#28A7E81A'
-                        : '#FFFFFF',
-                    shadowColor:
-                      selectedLang?.code === item.code
-                        ? '#28A7E81A'
-                        : '#F3FAFF',
+                    backgroundColor: isSelected ? '#28A7E81A' : '#FFFFFF',
+                    shadowColor: isSelected ? '#28A7E81A' : '#F3FAFF',
+                    opacity: isLoading ? 0.6 : 1,
                  },
                ]}
                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:
-                          selectedLang?.code === item.code
-                            ? '#28A7E8'
-                            : '#000000',
-                      },
+                      { color: isSelected ? '#28A7E8' : '#000000' },
                    ]}
                  >
                    {item.label}
@@ -114,64 +98,53 @@ const Settings = (props: SettingsProps) => {
                  style={[
                    styles.check,
                    {
-                      backgroundColor:
-                        selectedLang?.code === item.code
-                          ? '#28A7E8'
-                          : '#FFFFFF',
-                      borderColor:
-                        selectedLang?.code === item.code
-                          ? '#28A7E8'
-                          : '#383838',
+                      backgroundColor: isSelected ? '#28A7E8' : '#FFFFFF',
+                      borderColor: isSelected ? '#28A7E8' : '#383838',
                    },
                  ]}
                >
-                  {selectedLang?.code === item.code && (
-                    <Check width={20} height={20} color="#ffff" />
+                  {isLoading ? (
+                    <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 />
-      </View>
-    </SafeAreaView>
+            );
+          })}
+        </View>
+      </ScrollView>
+    </LayoutTwo>
  );
 };

 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,
-    marginTop: 10,
+    paddingVertical: 15,
+    paddingHorizontal: 12,
    borderRadius: 10,
+    marginTop: 10,
    alignItems: 'center',
+    elevation: 1,
  },
  label: {
    fontWeight: '400',
    fontSize: 16,
  },
  check: {
-    width: 20,
-    height: 20,
+    width: 24,
+    height: 24,
    borderWidth: 1,
    borderColor: '#383838',
    borderRadius: 6,
--- a/src/screens/profile/warehouses/ui/Warehouses.tsx
+++ b/src/screens/profile/warehouses/ui/Warehouses.tsx
@@ -1,6 +1,5 @@
 import SingleFileDrop from 'components/FileDrop';
-import NavbarBack from 'components/NavbarBack';
-import Navigation from 'components/Navigation';
+import LayoutTwo from 'components/LayoutTwo';
 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 }}>
-      <View style={styles.container}>
-        <NavbarBack title={t('Xitoy omborlari manzili')} />
-        <ScrollView
-          keyboardShouldPersistTaps="handled"
-          refreshControl={refreshControl}
-          contentContainerStyle={contentContainerStyle}
-        >
-          <View style={styles.card}>
-            <Text style={styles.title}>{t('Bizning Xitoy manzilimiz')}</Text>
+    <LayoutTwo title={t('Xitoy omborlari manzili')}>
+      <ScrollView
+        keyboardShouldPersistTaps="handled"
+        refreshControl={refreshControl}
+        contentContainerStyle={contentContainerStyle}
+      >
+        <View style={styles.card}>
+          <Text style={styles.title}>{t('Bizning Xitoy manzilimiz')}</Text>
+          <Text style={styles.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 />
-            <TabsAutoWarehouses />
-            <Text style={styles.title}>
-              {t('Xitoy omborlarimiz manzilini programmaga kiriting')}
+            <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 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>
-        <Navigation />
-      </View>
-    </SafeAreaView>
+          <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>
+    </LayoutTwo>
  );
 };

--- a/src/screens/wallet/payment/lib/data.ts
+++ b/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',
  },
 ];
--- a/src/screens/wallet/payment/ui/Wallet.tsx
+++ b/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 }}>
-        <View style={styles.container}>
-          <Navbar />
-          <LoadingScreen />
-          <Navigation />
-        </View>
-      </SafeAreaView>
+      <Layout>
+        <LoadingScreen />
+      </Layout>
    );
  }

  if (isError || isErrorAvia) {
    return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <View style={styles.container}>
-          <Navbar />
-          <NoResult message="Xatolik yuz berdi" />
-          <Navigation />
-        </View>
-      </SafeAreaView>
+      <Layout>
+        <NoResult message="Xatolik yuz berdi" />
+      </Layout>
    );
  }

@@ -121,108 +111,101 @@ const Wallet = () => {
    (packetsAvia && !(packetsAvia?.data.length > 0))
  ) {
    return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <Navbar />
+      <Layout>
        <View style={styles.container}>
          <View style={styles.header}>
            <Text style={styles.title}>{t("To'lov")}</Text>
          </View>
          <NoResult />
        </View>
-        <Navigation />
-      </SafeAreaView>
+      </Layout>
    );
  }

  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <View style={styles.container}>
-        <Navbar />
-        <ScrollView
-          refreshControl={refreshControl}
-          style={{ flex: 1 }}
-          contentContainerStyle={{ flexGrow: 1 }}
-          removeClippedSubviews={true}
-          keyboardShouldPersistTaps="handled"
-        >
-          <View style={{ flex: 1, justifyContent: 'space-between' }}>
-            <View>
-              <View style={styles.header}>
-                <Text style={styles.title}>{t("To'lov")}</Text>
-                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                  <TouchableOpacity
+    <Layout>
+      <ScrollView
+        refreshControl={refreshControl}
+        style={{ flex: 1 }}
+        contentContainerStyle={{ flexGrow: 1 }}
+        removeClippedSubviews={true}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={{ flex: 1, justifyContent: 'space-between' }}>
+          <View>
+            <View style={styles.header}>
+              <Text style={styles.title}>{t("To'lov")}</Text>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <TouchableOpacity
+                  style={{
+                    padding: 5,
+                    backgroundColor:
+                      selectedType === 'AVIA' ? '#28A7E8' : '#F3FAFF',
+                    borderTopLeftRadius: 8,
+                    borderBottomLeftRadius: 8,
+                  }}
+                  onPress={() => setSelectedType('AVIA')}
+                >
+                  <Text
                    style={{
-                      padding: 5,
-                      backgroundColor:
-                        selectedType === 'AVIA' ? '#28A7E8' : '#F3FAFF',
-                      borderTopLeftRadius: 8,
-                      borderBottomLeftRadius: 8,
+                      color: selectedType === 'AVIA' ? '#fff' : '#28A7E8',
+                      fontSize: 14,
                    }}
-                    onPress={() => setSelectedType('AVIA')}
                  >
-                    <Text
-                      style={{
-                        color: selectedType === 'AVIA' ? '#fff' : '#28A7E8',
-                        fontSize: 14,
-                      }}
-                    >
-                      AVIA
-                    </Text>
-                  </TouchableOpacity>
-                  <View style={{ width: 1 }} />
-                  <TouchableOpacity
+                    AVIA
+                  </Text>
+                </TouchableOpacity>
+                <View style={{ width: 1 }} />
+                <TouchableOpacity
+                  style={{
+                    padding: 5,
+                    backgroundColor:
+                      selectedType === 'AUTO' ? '#28A7E8' : '#F3FAFF',
+                    borderTopRightRadius: 8,
+                    borderBottomRightRadius: 8,
+                  }}
+                  onPress={() => setSelectedType('AUTO')}
+                >
+                  <Text
                    style={{
-                      padding: 5,
-                      backgroundColor:
-                        selectedType === 'AUTO' ? '#28A7E8' : '#F3FAFF',
-                      borderTopRightRadius: 8,
-                      borderBottomRightRadius: 8,
+                      color: selectedType === 'AUTO' ? '#fff' : '#28A7E8',
+                      fontSize: 14,
+                      fontWeight: '500',
                    }}
-                    onPress={() => setSelectedType('AUTO')}
                  >
-                    <Text
-                      style={{
-                        color: selectedType === 'AUTO' ? '#fff' : '#28A7E8',
-                        fontSize: 14,
-                        fontWeight: '500',
-                      }}
-                    >
-                      AUTO
-                    </Text>
-                  </TouchableOpacity>
-                </View>
+                    AUTO
+                  </Text>
+                </TouchableOpacity>
              </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>
-    </SafeAreaView>
+          <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>
+        </View>
+      </ScrollView>
+    </Layout>
  );
 };

--- a/src/screens/wallet/payment/ui/style.ts
+++ b/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',
--- a/src/screens/wallet/paymentMethod/ui/ModalCard.tsx
+++ b/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',
  },
--- a/src/screens/wallet/paymentMethod/ui/ModalPay.tsx
+++ b/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,
--- a/src/screens/wallet/paymentMethod/ui/PaymentMethod.tsx
+++ b/src/screens/wallet/paymentMethod/ui/PaymentMethod.tsx
@@ -1,10 +1,9 @@
 import { RouteProp, useRoute } from '@react-navigation/native';
-import NavbarBack from 'components/NavbarBack';
-import Navigation from 'components/Navigation';
+import LayoutTwo from 'components/LayoutTwo';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Text, TouchableOpacity, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { Text, TouchableOpacity } from 'react-native';
+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 }}>
-      <View style={{ flex: 1 }}>
-        <NavbarBack title={t("To'lov usuli")} />
-        <PaymentProduct packet={packets!} />
-        <ModalPay
-          isModalVisible={isModalVisible}
-          selectedId={selectedId}
-          setModalVisible={setModalVisible}
-          setSelectedId={setSelectedId}
-          cardModal={cardModal}
-          setCardModal={setCardModal}
-          payModal={payModal}
-          setPayModal={setPayModal}
-          success={success}
-          setSuccess={setSuccess}
+    <LayoutTwo title={t("To'lov usuli")}>
+      <PaymentProduct packet={packets!} />
+      <ModalPay
+        isModalVisible={isModalVisible}
+        selectedId={selectedId}
+        setModalVisible={setModalVisible}
+        setSelectedId={setSelectedId}
+        cardModal={cardModal}
+        setCardModal={setCardModal}
+        payModal={payModal}
+        setPayModal={setPayModal}
+        success={success}
+        setSuccess={setSuccess}
+      />
+      {cardModal && (
+        <ModalCard
+          isVisible={cardModal}
+          packId={packets.id}
+          setIsVisible={setCardModal}
+          selectedId={selectedCard}
+          setSelectedId={setSelectedCard}
        />
-        {cardModal && (
-          <ModalCard
-            isVisible={cardModal}
-            packId={packets.id}
-            setIsVisible={setCardModal}
-            selectedId={selectedCard}
-            setSelectedId={setSelectedCard}
-          />
-        )}
-        {success && (
-          <ModalSuccess
-            visible={success}
-            setVisible={setSuccess}
-            setPayModal={setPayModal}
-          />
-        )}
-        <TouchableOpacity style={[PaymentStyle.button]} onPress={toggleModal}>
-          <Text style={PaymentStyle.btnText}>{t("To'lash")}</Text>
-        </TouchableOpacity>
-        <Navigation />
-      </View>
-    </SafeAreaView>
+      )}
+      {success && (
+        <ModalSuccess
+          visible={success}
+          setVisible={setSuccess}
+          setPayModal={setPayModal}
+        />
+      )}
+      <TouchableOpacity
+        style={[PaymentStyle.button, { bottom: bottom + 80 }]}
+        onPress={toggleModal}
+      >
+        <Text style={PaymentStyle.btnText}>{t("To'lash")}</Text>
+      </TouchableOpacity>
+    </LayoutTwo>
  );
 };

--- a/src/screens/wallet/paymentMethod/ui/PaymentProduct.tsx
+++ b/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>
--- a/src/screens/wallet/successPayment/ui/PaymentQrCode.tsx
+++ b/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>
-      <NavbarBack title={t("To'lov usuli")} />
+    <LayoutTwo 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>
  );
 };