Samandar/cpost-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

delete safeAreaView

Browse Source
This commit is contained in:
Samandar Turgunboyev
2025-08-28 11:46:46 +05:00
parent 03c8ba8540
commit e51ff4f502
21 changed files with 349 additions and 493 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
App.tsx
View File

@@ -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,
},
});

22
src/components/Layout.tsx
View File

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

22
src/components/LayoutTwo.tsx
View File

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

15
src/components/Navbar.tsx
View File

@@ -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>

4
src/components/NavbarBack.tsx
View File

@@ -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>

14
src/components/Navigation.tsx
View File

@@ -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',

10
src/screens/passport/createPassport/ui/CreatePassword.tsx
View File

@@ -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>
);
};

2
src/screens/passport/myPassport/ui/MyPassport.tsx
View File

@@ -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: {

18
src/screens/passport/myPassport/ui/Passport.tsx
View File

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

22
src/screens/profile/myProfile/ui/Profile.tsx
View File

@@ -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,20 +41,14 @@ const Profile = () => {
if (loading) {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<Navbar />
<Layout>
<LoadingScreen />
<Navigation />
</View>
</SafeAreaView>
</Layout>
);
}
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<Navbar />
<Layout>
<ScrollView
keyboardShouldPersistTaps="handled"
refreshControl={refreshControl}
@@ -65,9 +57,7 @@ const Profile = () => {
<ProfileHeader />
<ProfilePages />
</ScrollView>
<Navigation />
</View>
</SafeAreaView>
</Layout>
);
};

21
src/screens/profile/notifications/ui/Notifications.tsx
View File

@@ -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,20 +41,14 @@ const Notifications = (props: NotificationsProps) => {
if (!(fakeNotifications.length > 0)) {
return (
<SafeAreaView style={{ flex: 1 }}>
<NavbarBack title={t('Bildirishnomalar')} />
<View style={styles.container}>
<LayoutTwo title={t('Bildirishnomalar')}>
<NoResult />
</View>
<Navigation />
</SafeAreaView>
</LayoutTwo>
);
}
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<NavbarBack title={t('Bildirishnomalar')} />
<LayoutTwo title={t('Bildirishnomalar')}>
<ScrollView
keyboardShouldPersistTaps="handled"
refreshControl={refreshControl}
@@ -78,9 +69,7 @@ const Notifications = (props: NotificationsProps) => {
setVisible={setModalVisible}
selectedOrder={selectedOrder}
/>
<Navigation />
</View>
</SafeAreaView>
</LayoutTwo>
);
};

115
src/screens/profile/settings/ui/Settings.tsx
View File

@@ -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')} />
<LayoutTwo title={t('Sozlamalar')}>
<ScrollView
keyboardShouldPersistTaps="handled"
refreshControl={refreshControl}
contentContainerStyle={contentContainerStyle}
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 => (
{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>
</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,

12
src/screens/profile/warehouses/ui/Warehouses.tsx
View File

@@ -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,9 +36,7 @@ const Warehouses = (props: WarehousesProps) => {
[],
);
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<NavbarBack title={t('Xitoy omborlari manzili')} />
<LayoutTwo title={t('Xitoy omborlari manzili')}>
<ScrollView
keyboardShouldPersistTaps="handled"
refreshControl={refreshControl}
@@ -82,9 +78,7 @@ const Warehouses = (props: WarehousesProps) => {
</TouchableOpacity>
</View>
</ScrollView>
<Navigation />
</View>
</SafeAreaView>
</LayoutTwo>
);
};

10
src/screens/wallet/payment/lib/data.ts
View File

@@ -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',
},
];

35
src/screens/wallet/payment/ui/Wallet.tsx
View File

@@ -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 />
<Layout>
<LoadingScreen />
<Navigation />
</View>
</SafeAreaView>
</Layout>
);
}
if (isError || isErrorAvia) {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<Navbar />
<Layout>
<NoResult message="Xatolik yuz berdi" />
<Navigation />
</View>
</SafeAreaView>
</Layout>
);
}
@@ -121,23 +111,19 @@ 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 />
<Layout>
<ScrollView
refreshControl={refreshControl}
style={{ flex: 1 }}
@@ -219,10 +205,7 @@ const Wallet = () => {
</View>
</View>
</ScrollView>
<Navigation />
</View>
</SafeAreaView>
</Layout>
);
};

4
src/screens/wallet/payment/ui/style.ts
View File

@@ -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',

5
src/screens/wallet/paymentMethod/ui/ModalCard.tsx
View File

@@ -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',
},

4
src/screens/wallet/paymentMethod/ui/ModalPay.tsx
View File

@@ -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,

22
src/screens/wallet/paymentMethod/ui/PaymentMethod.tsx
View File

@@ -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,9 +36,7 @@ const PaymentMethod = () => {
}, [payModal]);
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<NavbarBack title={t("To'lov usuli")} />
<LayoutTwo title={t("To'lov usuli")}>
<PaymentProduct packet={packets!} />
<ModalPay
isModalVisible={isModalVisible}
@@ -69,12 +66,13 @@ const PaymentMethod = () => {
setPayModal={setPayModal}
/>
)}
<TouchableOpacity style={[PaymentStyle.button]} onPress={toggleModal}>
<TouchableOpacity
style={[PaymentStyle.button, { bottom: bottom + 80 }]}
onPress={toggleModal}
>
<Text style={PaymentStyle.btnText}>{t("To'lash")}</Text>
</TouchableOpacity>
<Navigation />
</View>
</SafeAreaView>
</LayoutTwo>
);
};

10
src/screens/wallet/paymentMethod/ui/PaymentProduct.tsx
View File

@@ -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>

8
src/screens/wallet/successPayment/ui/PaymentQrCode.tsx
View File

@@ -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>
);
};