From ef73715048efaba0d71fe7821e1c1bf8bcffa2fe Mon Sep 17 00:00:00 2001 From: Samandar Turgunboyev Date: Wed, 27 Aug 2025 15:37:37 +0500 Subject: [PATCH] update --- src/api/URL.ts | 2 +- src/api/axios.ts | 2 +- src/components/Layout.tsx | 49 +++++ src/components/LayoutTwo.tsx | 50 +++++ src/screens/home/branches/ui/Branches.tsx | 16 +- src/screens/home/branches/ui/ListBranches.tsx | 10 +- .../home/cargoPrices/ui/CargoPrices.tsx | 22 +- src/screens/home/home/ui/Home.tsx | 51 ++--- src/screens/home/home/ui/Pages.tsx | 71 +++--- src/screens/home/home/ui/PartyCarousel.tsx | 149 ++++++------- src/screens/home/home/ui/Tabs.tsx | 91 +++++--- src/screens/home/home/ui/TabsAuto.tsx | 2 +- src/screens/home/home/ui/TabsAvia.tsx | 4 +- src/screens/home/home/ui/styled.ts | 102 ++++----- .../ui/RestrictedProduct.tsx | 25 ++- .../passport/myPassport/ui/Passport.tsx | 11 +- src/screens/status/ui/Filter.tsx | 154 ++++++------- src/screens/status/ui/Order.tsx | 208 ++++++++---------- src/screens/status/ui/Status.tsx | 148 ++++++------- src/screens/status/ui/Tabs.tsx | 82 +++---- 20 files changed, 619 insertions(+), 630 deletions(-) create mode 100644 src/components/Layout.tsx create mode 100644 src/components/LayoutTwo.tsx diff --git a/src/api/URL.ts b/src/api/URL.ts index 707dd03..f2c5c02 100644 --- a/src/api/URL.ts +++ b/src/api/URL.ts @@ -1,4 +1,4 @@ -export const BASE_URL = 'https://api.cpcargo.uz/api/v1'; +export const BASE_URL = 'http://141.105.64.233:7723/api/v1'; export const REGISTER = '/mobile/auth/register'; export const LOGIN = '/mobile/auth/login'; diff --git a/src/api/axios.ts b/src/api/axios.ts index 60c9f9e..38a9834 100644 --- a/src/api/axios.ts +++ b/src/api/axios.ts @@ -3,7 +3,7 @@ import axios, { AxiosError } from 'axios'; import { navigate } from 'components/NavigationRef'; const axiosInstance = axios.create({ - baseURL: 'https://api.cpcargo.uz/api/v1', + baseURL: 'http://141.105.64.233:7723/api/v1', timeout: 10000, headers: { 'Content-Type': 'application/json', diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..12974a8 --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,49 @@ +// 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'; + +interface LayoutProps { + children: React.ReactNode; +} + +const Layout: React.FC = ({ children }) => { + return ( + + + + {children} + + + + ); +}; + +export default Layout; + +const styles = StyleSheet.create({ + safeArea: { + flex: 1, + backgroundColor: '#fff', + }, + container: { + flex: 1, + }, + header: { + height: 60, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#f5f5f5', + }, + content: { + flex: 1, + }, + footer: { + height: 50, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#eee', + }, +}); diff --git a/src/components/LayoutTwo.tsx b/src/components/LayoutTwo.tsx new file mode 100644 index 0000000..8cf47b2 --- /dev/null +++ b/src/components/LayoutTwo.tsx @@ -0,0 +1,50 @@ +// 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'; + +interface LayoutProps { + title: string; + children: React.ReactNode; +} + +const LayoutTwo: React.FC = ({ title, children }) => { + return ( + + + + {children} + + + + ); +}; + +export default LayoutTwo; + +const styles = StyleSheet.create({ + safeArea: { + flex: 1, + backgroundColor: '#fff', + }, + container: { + flex: 1, + }, + header: { + height: 60, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#f5f5f5', + }, + content: { + flex: 1, + }, + footer: { + height: 50, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#eee', + }, +}); diff --git a/src/screens/home/branches/ui/Branches.tsx b/src/screens/home/branches/ui/Branches.tsx index e0f87da..cc27266 100644 --- a/src/screens/home/branches/ui/Branches.tsx +++ b/src/screens/home/branches/ui/Branches.tsx @@ -2,6 +2,7 @@ import { useNavigation } from '@react-navigation/native'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { useQuery } from '@tanstack/react-query'; import { branchApi } from 'api/branch'; +import LayoutTwo from 'components/LayoutTwo'; import NavbarBack from 'components/NavbarBack'; import NoResult from 'components/NoResult'; import * as React from 'react'; @@ -38,8 +39,7 @@ const Branches = (props: BranchesProps) => { } return ( - - + {data && @@ -60,7 +60,7 @@ const Branches = (props: BranchesProps) => { ))} - + ); }; @@ -76,20 +76,28 @@ const styles = StyleSheet.create({ card: { backgroundColor: '#FFFFFF', borderRadius: 8, - padding: 16, + padding: 4, marginBottom: 12, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', + shadowColor: '#000', + shadowOffset: { width: 0, height: 1 }, + shadowOpacity: 0.1, + shadowRadius: 2, + + elevation: 1, }, title: { fontSize: 18, + paddingHorizontal: 5, fontWeight: '600', color: '#000', marginBottom: 6, }, subtitle: { fontSize: 16, + paddingHorizontal: 5, fontWeight: '500', color: '#000000B2', }, diff --git a/src/screens/home/branches/ui/ListBranches.tsx b/src/screens/home/branches/ui/ListBranches.tsx index a584511..0c0fabc 100644 --- a/src/screens/home/branches/ui/ListBranches.tsx +++ b/src/screens/home/branches/ui/ListBranches.tsx @@ -3,13 +3,11 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { useQuery } from '@tanstack/react-query'; import { Branch, branchApi } from 'api/branch'; import BottomModal from 'components/BottomModal'; +import LayoutTwo from 'components/LayoutTwo'; import LoadingScreen from 'components/LoadingScreen'; -import NavbarBack from 'components/NavbarBack'; -import Navigation from 'components/Navigation'; import React, { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import WebView from 'react-native-webview'; import Minus from 'svg/Minus'; import Plus from 'svg/Plus'; @@ -123,8 +121,7 @@ const ListBranches = () => { if (!data) return ; return ( - - + {!webViewReady && ( @@ -195,8 +192,7 @@ const ListBranches = () => { branch={selectedBranch} /> - - + ); }; diff --git a/src/screens/home/cargoPrices/ui/CargoPrices.tsx b/src/screens/home/cargoPrices/ui/CargoPrices.tsx index 392606a..da401b0 100644 --- a/src/screens/home/cargoPrices/ui/CargoPrices.tsx +++ b/src/screens/home/cargoPrices/ui/CargoPrices.tsx @@ -1,7 +1,6 @@ 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 { @@ -11,7 +10,6 @@ import { TouchableOpacity, View, } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import Tabs from '../../home/ui/Tabs'; interface CargoPricesProps {} @@ -21,13 +19,12 @@ const CargoPrices = (props: CargoPricesProps) => { const [activeTab, setActiveTab] = React.useState<'avia' | 'auto'>('avia'); const navigation = useNavigation>(); return ( - - + {activeTab === 'avia' && ( - + @@ -231,8 +228,7 @@ const CargoPrices = (props: CargoPricesProps) => { )} - - + ); }; @@ -240,7 +236,7 @@ export default CargoPrices; const styles = StyleSheet.create({ container: { - marginTop: 20, + marginTop: 10, }, card: { width: '95%', @@ -254,6 +250,14 @@ const styles = StyleSheet.create({ margin: 'auto', padding: 10, borderRadius: 8, + paddingVertical: 15, + paddingHorizontal: 12, + shadowColor: '#000', + shadowOffset: { width: 0, height: 1 }, + shadowOpacity: 0.1, + shadowRadius: 2, + + elevation: 1, }, titleBlack: { fontSize: 16, diff --git a/src/screens/home/home/ui/Home.tsx b/src/screens/home/home/ui/Home.tsx index aea7842..908a83f 100644 --- a/src/screens/home/home/ui/Home.tsx +++ b/src/screens/home/home/ui/Home.tsx @@ -1,20 +1,12 @@ 'use client'; import { useQuery } from '@tanstack/react-query'; import calendarAPi from 'api/calendar'; +import Layout from 'components/Layout'; import LoadingScreen from 'components/LoadingScreen'; -import Navbar from 'components/Navbar'; -import Navigation from 'components/Navigation'; import { useCallback, useMemo, useState } from 'react'; -import { - RefreshControl, - ScrollView, - useWindowDimensions, - View, -} from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; +import { RefreshControl, ScrollView, useWindowDimensions } from 'react-native'; import Pages from './Pages'; import PartyCarousel from './PartyCarousel'; -import { HomeStyle } from './styled'; import Tabs from './Tabs'; import TabsAuto from './TabsAuto'; import TabsAvia from './TabsAvia'; @@ -24,7 +16,6 @@ const Home = () => { const [refreshing, setRefreshing] = useState(false); const { width: screenWidth } = useWindowDimensions(); const scale = screenWidth < 360 ? 0.85 : 1; - const styles = useMemo(() => HomeStyle(scale), [scale]); const { data: autoData, @@ -71,33 +62,25 @@ const Home = () => { if (autoLoad || aviaLoad || fetchAuto || fetchAvia) { return ( - - - - - - - + + + ); } return ( - - - - - - - {activeTabContent} - - - - - + + + + + {activeTabContent} + + + ); }; diff --git a/src/screens/home/home/ui/Pages.tsx b/src/screens/home/home/ui/Pages.tsx index d26c439..7a9e629 100644 --- a/src/screens/home/home/ui/Pages.tsx +++ b/src/screens/home/home/ui/Pages.tsx @@ -2,24 +2,16 @@ import { useNavigation } from '@react-navigation/native'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { - StyleSheet, - Text, - TouchableOpacity, - View, - useWindowDimensions, -} from 'react-native'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import ArrowRightUnderline from 'svg/ArrowRightUnderline'; import Usd from 'svg/Dollar'; import InfoIcon from 'svg/Info'; import Store from 'svg/Store'; const Pages = () => { - const { width: screenWidth } = useWindowDimensions(); const navigation = useNavigation>(); - const scale = screenWidth < 360 ? 0.85 : 1; const { t } = useTranslation(); - const styles = makeStyles(scale); + const styles = makeStyles(); return ( @@ -28,19 +20,10 @@ const Pages = () => { style={styles.card} > - + {t('Kargo narxlari')} - + { style={styles.card} > - + {t('Taqiqlangan buyumlar')} - + {/* @@ -80,14 +59,10 @@ const Pages = () => { onPress={() => navigation.navigate('ListBranches')} > - + {t('Filiallar ro’yxati')} - + {/* { ); }; -const makeStyles = (scale: number) => +const makeStyles = () => StyleSheet.create({ container: { - width: '100%', + width: '95%', marginLeft: 'auto', marginRight: 'auto', - marginTop: 10 * scale, - borderRadius: 12 * scale, - padding: 12 * scale, - gap: 10 * scale, + borderRadius: 12, + marginBottom: 10, + gap: 10, }, card: { flexDirection: 'row', justifyContent: 'space-between', - backgroundColor: '#FFFFFF', - shadowColor: '#F2FAFF', - padding: 15 * scale, - borderRadius: 8 * scale, alignItems: 'center', + + backgroundColor: '#FFFFFF', + paddingVertical: 15, + paddingHorizontal: 12, + borderRadius: 10, + shadowColor: '#000', + shadowOffset: { width: 0, height: 1 }, + shadowOpacity: 0.1, + shadowRadius: 2, + + elevation: 1, }, text: { flexDirection: 'row', alignItems: 'center', - gap: 10 * scale, + gap: 10, }, title: { - fontSize: 16 * scale, + fontSize: 16, fontWeight: '600', }, }); diff --git a/src/screens/home/home/ui/PartyCarousel.tsx b/src/screens/home/home/ui/PartyCarousel.tsx index 670415c..0292b78 100644 --- a/src/screens/home/home/ui/PartyCarousel.tsx +++ b/src/screens/home/home/ui/PartyCarousel.tsx @@ -24,9 +24,8 @@ const PartyCarousel = ({ aviaData: any; }) => { const { width: screenWidth } = useWindowDimensions(); - const scale = screenWidth < 360 ? 0.85 : 1; const cardWidth = screenWidth * 0.95; - const styles = useMemo(() => HomeStyle(scale), [scale]); + const styles = useMemo(() => HomeStyle(), []); const { t } = useTranslation(); const statusConfig: any = { @@ -57,21 +56,21 @@ const PartyCarousel = ({ }, }; + // calendarList tayyorlash const calendarList = useMemo(() => { const data: any[] = []; + const weekdays = [ + { key: 'sunday', label: 'Ya' }, + { key: 'monday', label: 'Du' }, + { key: 'tuesday', label: 'Se' }, + { key: 'wednesday', label: 'Cho' }, + { key: 'thursday', label: 'Pa' }, + { key: 'friday', label: 'Ju' }, + { key: 'saturday', label: 'Sha' }, + ]; const prepareList = (calendar: any, type: 'auto' | 'avia') => { if (!calendar) return; - const weekdays = [ - { key: 'sunday', label: 'Ya' }, - { key: 'monday', label: 'Du' }, - { key: 'tuesday', label: 'Se' }, - { key: 'wednesday', label: 'Cho' }, - { key: 'thursday', label: 'Pa' }, - { key: 'friday', label: 'Ju' }, - { key: 'saturday', label: 'Sha' }, - ]; - data.push({ cargo: type, party: calendar.cargoType, @@ -79,7 +78,6 @@ const PartyCarousel = ({ start: weekdays.map((day, index) => { const start = new Date(calendar.weekStartDate); start.setDate(start.getDate() + index); - const status = calendar[day.key as keyof typeof calendar] || 'DEFAULT'; return { @@ -93,7 +91,6 @@ const PartyCarousel = ({ prepareList(autoData, 'auto'); prepareList(aviaData, 'avia'); - return data; }, [autoData, aviaData]); @@ -103,14 +100,10 @@ const PartyCarousel = ({ d.setHours(0, 0, 0, 0); return d; }, []); - - // --- MODAL STATE --- const [selectedItem, setSelectedItem] = useState(null); const [modalVisible, setModalVisible] = useState(false); - const renderItem = ({ item, index }: { item: any; index: number }) => { const isLast = index === calendarList.length - 1; - return ( { @@ -119,67 +112,64 @@ const PartyCarousel = ({ }} style={[ styles.autoContainer, - { width: cardWidth, marginRight: isLast ? 0 : 10 }, + { + width: cardWidth, + marginRight: isLast ? 0 : 10, + }, ]} > {item.isAni && ( <> - - {Array.isArray(item.start) && - item.start.map((day: any, idx: number) => { - const dateObj = new Date(day.date); - const isToday = - dateObj.toDateString() === today.toDateString(); - const config = - statusConfig[day.status] || statusConfig.DEFAULT; + idx.toString()} + renderItem={({ item: day }) => { + const dateObj = new Date(day.date); + const isToday = dateObj.toDateString() === today.toDateString(); + const config = statusConfig[day.status] || statusConfig.DEFAULT; - let backgroundColor = config.backgroundColor; - let textColor = config.textColor; + let backgroundColor = config.backgroundColor; + let textColor = config.textColor; - if (isToday) { - backgroundColor = '#22b1f88f'; - textColor = '#fff'; - } + if (isToday) { + backgroundColor = '#22b1f88f'; + textColor = '#fff'; + } - if (day.weekday === 'Ju') { - backgroundColor = '#4CAF50'; - textColor = '#fff'; - } + if (day.weekday === 'Ju') { + backgroundColor = '#4CAF50'; + textColor = '#fff'; + } - return ( - - - {day.date.slice(-2)} - - - {t(day.weekday)} - - - ); - })} - - - - - - - {item.cargo.toUpperCase()} - - - + return ( + + + {day.date.slice(-2)} + + + {t(day.weekday)} + - + ); + }} + showsHorizontalScrollIndicator={false} + /> + + + + + {item.cargo.toUpperCase()} + + @@ -200,9 +190,9 @@ const PartyCarousel = ({ decelerationRate="fast" contentContainerStyle={{ paddingHorizontal: (screenWidth - cardWidth) / 2, + padding: 10, }} pagingEnabled - style={{ marginBottom: 20 }} showsHorizontalScrollIndicator={false} getItemLayout={(_, index) => ({ length: cardWidth, @@ -210,8 +200,6 @@ const PartyCarousel = ({ index, })} /> - - {/* MODAL */} {t('Yetkazish tafsilotlari')} - {selectedItem && ( - <> - {selectedItem.start.map((day: any, idx: number) => ( - - {day.date} - {t(day.weekday)} - {t(day.status)} - - ))} - - )} + {selectedItem && + selectedItem.start.map((day: any, idx: number) => ( + + {day.date} - {t(day.weekday)} - {t(day.status)} + + ))} setModalVisible(false)} style={modalStyles.closeButton} diff --git a/src/screens/home/home/ui/Tabs.tsx b/src/screens/home/home/ui/Tabs.tsx index 313d8c4..22428ef 100644 --- a/src/screens/home/home/ui/Tabs.tsx +++ b/src/screens/home/home/ui/Tabs.tsx @@ -1,11 +1,11 @@ import { Dispatch, SetStateAction, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { + FlatList, Image, Text, TouchableOpacity, useWindowDimensions, - View, } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import AviaLogo from 'screens/../../assets/bootsplash/Avia.png'; @@ -18,22 +18,14 @@ interface Props { } const Tabs = ({ activeTab, setActiveTab }: Props) => { - const { width: screenWidth } = useWindowDimensions(); const { t } = useTranslation(); - const scale = useMemo(() => (screenWidth < 360 ? 0.85 : 1), [screenWidth]); - - const styles = useMemo(() => HomeStyle(scale), [scale]); - - const handleTabPress = useCallback( - (type: 'avia' | 'auto') => { - setActiveTab(type); - }, - [setActiveTab], - ); + const { width: screenWidth } = useWindowDimensions(); + const cardWidth = screenWidth * 0.95; + const styles = useMemo(() => HomeStyle(), []); const gradientStyle = useMemo( () => ({ - width: '100%' as const, + flex: 1, borderRadius: 8, flexDirection: 'row' as const, alignItems: 'center' as const, @@ -44,48 +36,75 @@ const Tabs = ({ activeTab, setActiveTab }: Props) => { [], ); - const renderTabButton = useCallback( - (type: 'avia' | 'auto', label: string, logo: any) => { - const isActive = activeTab === type; + // Tabs data + const tabsData = useMemo( + () => [ + { + type: 'avia' as const, + label: t('Avia orqali yetkazish'), + logo: AviaLogo, + }, + { + type: 'auto' as const, + label: t('Avto orqali yetkazish'), + logo: AutoLogo, + }, + ], + [t], + ); + const renderItem = useCallback( + ({ item }: { item: (typeof tabsData)[number] }) => { + const isActive = activeTab === item.type; const gradientColors = isActive ? ['#28A7E8', '#28A7E8'] : ['#28a8e82d', '#28A7E8']; - const textStyle = [ - styles.tabsText, - { color: isActive ? '#fff' : '#000' }, - ]; return ( handleTabPress(type)} - style={styles.tabs} - key={type} + onPress={() => setActiveTab(item.type)} + style={{ flex: 1 }} > - - {label} + + + {item.label} + ); }, - [activeTab, styles, handleTabPress, gradientStyle], + [activeTab, styles, gradientStyle, setActiveTab], ); - const tabButtons = useMemo( - () => [ - renderTabButton('avia', t('Avia orqali yetkazish'), AviaLogo), - renderTabButton('auto', t('Avto orqali yetkazish'), AutoLogo), - ], - [renderTabButton], + return ( + idx.toString()} + renderItem={renderItem} + showsHorizontalScrollIndicator={false} + scrollEnabled={false} + columnWrapperStyle={{ + gap: 8, + }} + contentContainerStyle={{ + paddingHorizontal: (screenWidth - cardWidth) / 2, + }} + getItemLayout={(_, index) => ({ + length: cardWidth, + offset: cardWidth * index, + index, + })} + /> ); - - return {tabButtons}; }; export default Tabs; diff --git a/src/screens/home/home/ui/TabsAuto.tsx b/src/screens/home/home/ui/TabsAuto.tsx index 24a9d83..49a8477 100644 --- a/src/screens/home/home/ui/TabsAuto.tsx +++ b/src/screens/home/home/ui/TabsAuto.tsx @@ -84,7 +84,7 @@ const TabsAuto = () => { decelerationRate="fast" contentContainerStyle={{ paddingHorizontal: (screenWidth - cardWidth) / 2, - marginTop: 10, + padding: 10, }} renderItem={({ item, index }) => { const isLast = index === addressList.length - 1; diff --git a/src/screens/home/home/ui/TabsAvia.tsx b/src/screens/home/home/ui/TabsAvia.tsx index 463cd88..5c8a269 100644 --- a/src/screens/home/home/ui/TabsAvia.tsx +++ b/src/screens/home/home/ui/TabsAvia.tsx @@ -85,7 +85,7 @@ const TabsAvia = () => { decelerationRate="fast" contentContainerStyle={{ paddingHorizontal: (screenWidth - cardWidth) / 2, - marginTop: 20, + padding: 10, }} renderItem={({ item, index }) => { const isLast = index === addressList.length - 1; @@ -125,7 +125,7 @@ const makeStyles = (scale: number, cardWidth: number, screenWidth: number) => width: '95%', backgroundColor: '#28a8e82c', margin: 'auto', - marginTop: 20, + // marginTop: 20, borderRadius: 12, padding: 12, gap: 10, diff --git a/src/screens/home/home/ui/styled.ts b/src/screens/home/home/ui/styled.ts index 4e53680..5d90c43 100644 --- a/src/screens/home/home/ui/styled.ts +++ b/src/screens/home/home/ui/styled.ts @@ -1,46 +1,42 @@ import { StyleSheet } from 'react-native'; -export const HomeStyle = (scale: number) => +export const HomeStyle = () => StyleSheet.create({ container: { flex: 1, }, header: { backgroundColor: '#28A7E8', - height: 80 * scale, - paddingHorizontal: 10 * scale, - paddingVertical: 10 * scale, + height: 80, + paddingHorizontal: 10, + paddingVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }, title: { color: '#fff', - fontSize: 20 * scale, + fontSize: 20, }, logo: { flexDirection: 'row', alignItems: 'center', - gap: 5 * scale, + gap: 5, }, links: { flexDirection: 'row', alignItems: 'center', - gap: 15 * scale, + gap: 15, }, autoContainer: { - width: '90%', - height: 140 * scale, - borderRadius: 8 * scale, - padding: 10 * scale, + borderRadius: 8, + padding: 8, backgroundColor: '#FFFFFF', - marginTop: 10, - gap: 8 * scale, + gap: 8, shadowColor: '#000', - shadowOffset: { width: 0, height: 1 * scale }, + shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, - shadowRadius: 2 * scale, - margin: 'auto', + shadowRadius: 2, elevation: 2, }, autoCard: { @@ -48,33 +44,34 @@ export const HomeStyle = (scale: number) => justifyContent: 'space-between', }, reysTitle: { - fontSize: 20 * scale, + fontSize: 20, color: '#28A7E8', fontWeight: '600', }, text: { fontWeight: '500', color: 'red', - fontSize: 14 * scale, + fontSize: 14, }, box: { backgroundColor: '#28A7E81A', - padding: 10 * scale, + padding: 10, width: 'auto', alignSelf: 'flex-start', - borderRadius: 8 * scale, + borderRadius: 8, }, date: { backgroundColor: '#28A7E8', - padding: 6 * scale, width: '13%', + height: 50, textAlign: 'center', justifyContent: 'center', alignItems: 'center', - borderRadius: 8 * scale, + borderRadius: 8, + padding: 0, }, dateLabel: { - fontSize: 14 * scale, + fontSize: 14, fontWeight: '500', color: '#FFFFFF', }, @@ -84,23 +81,23 @@ export const HomeStyle = (scale: number) => justifyContent: 'space-between', }, logoIcon: { - width: 50 * scale, - height: 50 * scale, + width: 50, + height: 50, resizeMode: 'contain', }, bellWrapper: { position: 'relative', }, bellDot: { - width: 10 * scale, - height: 10 * scale, + width: 10, + height: 10, position: 'absolute', backgroundColor: 'red', - right: 2 * scale, + right: 2, borderRadius: 100, }, divider: { - height: 2 * scale, + height: 2, width: '100%', backgroundColor: '#28A7E81F', }, @@ -111,23 +108,23 @@ export const HomeStyle = (scale: number) => infoBlock: { alignItems: 'center', flexDirection: 'row', - gap: 6 * scale, + gap: 6, }, iconBox: { backgroundColor: '#28A7E81A', - padding: 8 * scale, - borderRadius: 8 * scale, + padding: 8, + borderRadius: 8, }, infoTextBlock: { flexDirection: 'column', }, infoTitle: { fontWeight: '500', - fontSize: 18 * scale, + fontSize: 18, }, infoSubtext: { fontWeight: '500', - fontSize: 14 * scale, + fontSize: 14, color: '#00000066', }, subtextRight: { @@ -136,38 +133,35 @@ export const HomeStyle = (scale: number) => highlightBox: { backgroundColor: '#69ec6d9c', alignSelf: 'flex-start', - padding: 4 * scale, - borderRadius: 8 * scale, + padding: 4, + borderRadius: 8, }, highlightText: { - fontSize: 16 * scale, + fontSize: 16, }, animatedIconWrapper: { width: '80%', + height: 40, }, row: { - flexDirection: 'row', - gap: 10 * scale, - width: '100%', + // flexDirection: 'row', + // gap: 10, + // width: '100%', }, rowFull: { flexDirection: 'row', - gap: 2 * scale, - width: '100%', + gap: 2, }, tabs: { - width: '50%', - borderRadius: 8 * scale, - justifyContent: 'space-between', - gap: 10 * scale, - }, - tabsContainer: { - marginLeft: 'auto', - paddingLeft: 8 * scale, - paddingRight: 18 * scale, - flexDirection: 'row', - gap: 8 * scale, + borderRadius: 8, }, + // tabsContainer: { + // marginLeft: 'auto', + // paddingLeft: 8, + // paddingRight: 18, + // flexDirection: 'row', + // gap: 8, + // }, tabsLogo: { width: '40%', height: '50%', @@ -176,7 +170,7 @@ export const HomeStyle = (scale: number) => tabsText: { width: '60%', color: '#FFFFFF', - fontSize: 16 * scale, + fontSize: 14, fontWeight: '600', }, }); diff --git a/src/screens/home/restrictedProduct/ui/RestrictedProduct.tsx b/src/screens/home/restrictedProduct/ui/RestrictedProduct.tsx index 45cd287..b97cb06 100644 --- a/src/screens/home/restrictedProduct/ui/RestrictedProduct.tsx +++ b/src/screens/home/restrictedProduct/ui/RestrictedProduct.tsx @@ -1,9 +1,7 @@ -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 { ScrollView, StyleSheet, Text, View } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import Battery from 'svg/Battery'; import Blade from 'svg/Blade'; import Book from 'svg/Book'; @@ -22,13 +20,12 @@ const RestrictedProduct = (props: RestrictedProductProps) => { const [activeTab, setActiveTab] = React.useState<'avia' | 'auto'>('avia'); const { t } = useTranslation(); return ( - - + {activeTab === 'avia' && ( - + { )} {activeTab === 'auto' && ( - + @@ -273,8 +270,7 @@ const RestrictedProduct = (props: RestrictedProductProps) => { )} - - + ); }; @@ -282,7 +278,7 @@ export default RestrictedProduct; const styles = StyleSheet.create({ container: { - marginTop: 20, + marginTop: 10, }, card: { width: '95%', @@ -294,8 +290,15 @@ const styles = StyleSheet.create({ width: '95%', gap: 5, margin: 'auto', - padding: 10, borderRadius: 8, + paddingVertical: 15, + paddingHorizontal: 12, + shadowColor: '#000', + shadowOffset: { width: 0, height: 1 }, + shadowOpacity: 0.1, + shadowRadius: 2, + + elevation: 1, }, titleBlack: { fontSize: 16, diff --git a/src/screens/passport/myPassport/ui/Passport.tsx b/src/screens/passport/myPassport/ui/Passport.tsx index 5a1e6d6..647c64e 100644 --- a/src/screens/passport/myPassport/ui/Passport.tsx +++ b/src/screens/passport/myPassport/ui/Passport.tsx @@ -16,7 +16,6 @@ import { Text, TouchableOpacity, View, - useWindowDimensions, } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import PassportIcon from 'svg/Passport'; @@ -26,8 +25,6 @@ import MyPassport from './MyPassport'; const Passport = () => { const { t } = useTranslation(); const navigation = useNavigation>(); - const { width: screenWidth } = useWindowDimensions(); - const scale = screenWidth < 360 ? 0.85 : 1; const [refreshing, setRefreshing] = useState(false); const { @@ -105,11 +102,7 @@ const Passport = () => { {myPassport && myPassport.length === 0 ? ( - + {t("Hali pasport qo'shilmagan")} @@ -127,7 +120,7 @@ const Passport = () => { onPress={handleNavigateToCreatePassword} activeOpacity={0.7} > - + {t("Yangi pasport qo'shish")} diff --git a/src/screens/status/ui/Filter.tsx b/src/screens/status/ui/Filter.tsx index 097fb5a..57919d0 100644 --- a/src/screens/status/ui/Filter.tsx +++ b/src/screens/status/ui/Filter.tsx @@ -2,6 +2,7 @@ import { PacketsData } from 'api/packets'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { + FlatList, StyleSheet, Text, TouchableOpacity, @@ -11,11 +12,7 @@ import { import CloseIcon from 'svg/Close'; import FilterIcon from 'svg/Filter'; -const transportTypes = [ - // 'all', - 'AUTO', - 'AVIA', -] as const; +const transportTypes = ['AUTO', 'AVIA'] as const; type TransportType = (typeof transportTypes)[number]; interface Props { @@ -38,9 +35,8 @@ const Filter = ({ const [open, setOpen] = React.useState(false); const { width: screenWidth } = useWindowDimensions(); const { t } = useTranslation(); - const scale = screenWidth < 360 ? 0.85 : 1; - const styles = makeStyles(scale); + const styles = makeStyles(); const newOrders = React.useMemo( () => data.data.filter(item => item.paymentStatus === 'NEW'), [data], @@ -48,32 +44,35 @@ const Filter = ({ return ( + {/* Tugma */} setOpen(prev => !prev)} > - + {t('Filter')} {open && ( - + {/* Header */} + {t('Transport')} setOpen(false)}> - - {transportTypes.map(type => ( + + {/* Transport Types -> FlatList */} + item} + numColumns={2} + scrollEnabled={false} + columnWrapperStyle={{ gap: 8 }} + contentContainerStyle={{ gap: 8, marginBottom: 12 }} + renderItem={({ item: type }) => ( - { - // type === 'all' - // ? t('Barchasi') - // : - type === 'AUTO' ? t('Avto') : t('Avia') - } + {type === 'AUTO' ? t('Avto') : t('Avia')} - ))} - + )} + /> + {t('Reys raqami')} - - { - setReys('all'); - setSelectedData(null); - setOpen(false); - }} - > - - {t('Barchasi')} - - - {newOrders.map(item => ( + item.id?.toString() || 'all'} + numColumns={1} + scrollEnabled={false} + contentContainerStyle={{ gap: 8 }} // faqat shu kifoya + renderItem={({ item }) => ( { setReys(item.packetName); - setSelectedData(item); + setSelectedData(item.id === 'all' ? null : item); setOpen(false); }} > @@ -141,75 +120,73 @@ const Filter = ({ styles.activeFlightText, ]} > - {item.packetName} + {item.packetName === 'all' ? t('Barchasi') : item.packetName} - ))} - + )} + /> )} ); }; -const makeStyles = (scale: number) => + +const makeStyles = () => StyleSheet.create({ container: { - height: 'auto', - borderRadius: 8 * scale, + borderRadius: 8, alignItems: 'flex-end', - justifyContent: 'flex-start', position: 'relative', zIndex: 10, }, card: { - paddingHorizontal: 12 * scale, - height: 40 * scale, + paddingHorizontal: 12, + height: 40, alignItems: 'center', justifyContent: 'center', backgroundColor: '#D8DADC', - borderRadius: 8 * scale, + borderRadius: 8, flexDirection: 'row', - gap: 4 * scale, + gap: 4, }, text: { color: '#000000', fontWeight: '500', - fontSize: 14 * scale, + fontSize: 14, }, dropdown: { position: 'absolute', - top: 50 * scale, + top: 50, right: 0, backgroundColor: '#fff', - borderRadius: 8 * scale, - paddingVertical: 8 * scale, - paddingHorizontal: 10 * scale, + borderRadius: 8, + paddingVertical: 8, + paddingHorizontal: 10, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4, elevation: 5, zIndex: 10, - minWidth: 200 * scale, + minWidth: 200, + }, + dropdownHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 10, }, - sectionTitle: { fontWeight: '600', - marginBottom: 6 * scale, + marginBottom: 6, color: '#333', - fontSize: 16 * scale, - }, - typeList: { - flexDirection: 'row', - flexWrap: 'wrap', - gap: 8 * scale, - marginBottom: 12 * scale, + fontSize: 16, }, typeButton: { + flex: 1, backgroundColor: '#F3FAFF', - paddingHorizontal: 5 * scale, - paddingVertical: 6 * scale, - borderRadius: 6 * scale, + paddingHorizontal: 5, + paddingVertical: 6, + borderRadius: 6, }, activeType: { backgroundColor: '#28A7E8', @@ -217,22 +194,18 @@ const makeStyles = (scale: number) => typeText: { color: '#28A7E8', fontWeight: '500', - fontSize: 14 * scale, + fontSize: 14, + textAlign: 'center', }, activeTypeText: { color: '#fff', }, - flightList: { - flexDirection: 'row', - flexWrap: 'wrap', - gap: 8 * scale, - marginBottom: 12 * scale, - }, flightButton: { + flex: 1, backgroundColor: '#F3FAFF', - paddingHorizontal: 10 * scale, - paddingVertical: 6 * scale, - borderRadius: 6 * scale, + paddingHorizontal: 10, + paddingVertical: 6, + borderRadius: 6, }, activeFlight: { backgroundColor: '#28A7E8', @@ -240,7 +213,8 @@ const makeStyles = (scale: number) => flightText: { color: '#28A7E8', fontWeight: '500', - fontSize: 14 * scale, + fontSize: 14, + textAlign: 'center', }, activeFlightText: { color: '#fff', diff --git a/src/screens/status/ui/Order.tsx b/src/screens/status/ui/Order.tsx index 50ca3e2..4954e73 100644 --- a/src/screens/status/ui/Order.tsx +++ b/src/screens/status/ui/Order.tsx @@ -2,11 +2,11 @@ import { PacketsData } from 'api/packets'; import React, { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { + FlatList, StyleSheet, Text, TouchableOpacity, View, - useWindowDimensions, } from 'react-native'; import Auto from 'svg/Auto'; import Avia from 'svg/Avia'; @@ -53,44 +53,39 @@ interface Props { } const Order = ({ data, openModal, selectedData }: Props) => { - const { width: screenWidth } = useWindowDimensions(); - const scale = useMemo(() => (screenWidth < 360 ? 0.85 : 1), [screenWidth]); const { t } = useTranslation(); - const styles = useMemo( - () => makeStyles(scale, screenWidth), - [scale, screenWidth], - ); + const styles = useMemo(() => makeStyles(), []); const createIcons = useCallback( - (scale: number, cargo: string) => [ + (cargo: string) => [ { status: 'COLLECTING', - icon: , + icon: , }, { status: 'ON_THE_WAY', icon: cargo === 'avia' ? ( - + ) : ( - + ), }, { status: 'IN_CUSTOMS', - icon: , + icon: , }, { status: 'IN_WAREHOUSE', - icon: , + icon: , }, { status: 'DELIVERED', - icon: , + icon: , }, { status: 'PAID', - icon: , + icon: , }, ], [], @@ -104,31 +99,31 @@ const Order = ({ data, openModal, selectedData }: Props) => { ); const renderOrderItem = useCallback( - (ItemLayout: DataInfo, index: number) => { + ({ item, index }: { item: DataInfo; index: number }) => { const currentStatusIndex = statuses.indexOf( - ItemLayout.deliveryStatus as FilterType, + item.deliveryStatus as FilterType, ); - - const icons = createIcons(scale, ItemLayout.deliveryStatus); + const icons = createIcons(item.deliveryStatus); return ( - handleItemPress(ItemLayout)} - > + handleItemPress(item)}> - - {icons.map((item, i) => { + iconItem.status + i} + numColumns={6} + contentContainerStyle={styles.statusCard} + renderItem={({ item: iconItem, index: i }) => { const iconColor = i <= currentStatusIndex ? '#28A7E8' : '#000'; const viewColor = i <= currentStatusIndex ? '#28A7E81A' : '#0000001A'; return ( - + - {React.cloneElement(item.icon, { color: iconColor })} + {React.cloneElement(iconItem.icon, { color: iconColor })} {i !== icons.length - 1 && ( { ]} /> )} - + ); - })} - + }} + /> + + {/* Status Label */} {t( - tabList.find(item => item.value === ItemLayout.deliveryStatus) + tabList.find(tab => tab.value === item.deliveryStatus) ?.label || '', )} + + {/* Info */} {t('Reys raqami')} - {ItemLayout.packetName} + {item.packetName} {t('Mahsulotlar og’irligi')} - {ItemLayout.weight} + {item.weight} {t('Umumiy narxi')} - {ItemLayout.totalPrice} + {item.totalPrice} ); }, - [scale, createIcons, handleItemPress], + [createIcons, handleItemPress], ); - const orderItems = useMemo(() => { - if (selectedData) { - return [renderOrderItem(selectedData, 0)]; - } - return data.data.map(renderOrderItem); - }, [data, renderOrderItem, selectedData]); - - const countSection = useMemo( - () => ( - - {t('Buyurtmalar soni')} - {selectedData ? ( - 1 - ) : ( - {data.data.length} - )} - - ), - [styles.count, styles.title, data.data.length, selectedData], + const ordersData = useMemo( + () => (selectedData ? [selectedData] : data.data), + [data, selectedData], ); return ( - {countSection} - {orderItems} + + {t('Buyurtmalar soni')} + + {selectedData ? '1' : data.data.length} + + + + item.id?.toString() || index.toString()} + /> ); }; -const makeStyles = (scale: number, screenWidth: number) => +const makeStyles = () => StyleSheet.create({ container: { - width: screenWidth * 0.95, - marginTop: 10, - alignSelf: 'center', - borderRadius: 8 * scale, - padding: 8 * scale, - backgroundColor: '#F5F5F5', + width: '95%', + margin: 'auto', + borderRadius: 10, }, count: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', + marginTop: 10, }, title: { - fontSize: 16 * scale, + fontSize: 16, fontWeight: '500', color: '#333', }, card: { - backgroundColor: '#FFFFFF', - marginTop: 12 * scale, - padding: 15 * scale, - borderRadius: 10 * scale, - gap: 5 * scale, - flexDirection: 'column', + backgroundColor: '#fff', + margin: 1, + marginTop: 8, + padding: 15, + borderRadius: 10, + // iOS + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.2, + shadowRadius: 2, + // Android + elevation: 2, }, statusCard: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - marginBottom: 10 * scale, + marginBottom: 10, }, circle: { - padding: 8 * scale, + padding: 8, borderRadius: 50, alignItems: 'center', justifyContent: 'center', }, divider: { - width: 20 * scale, - borderBottomWidth: 2 * scale, + width: 20, + borderBottomWidth: 2, borderStyle: 'dashed', }, statusLabelWrapper: { - borderRadius: 8 * scale, + borderRadius: 8, alignSelf: 'flex-start', - paddingVertical: 6 * scale, - paddingHorizontal: 10 * scale, - marginBottom: 12 * scale, + paddingVertical: 6, + paddingHorizontal: 10, + marginBottom: 12, }, statusText: { fontWeight: '600', - fontSize: 16 * scale, + fontSize: 16, }, infoCard: { flexDirection: 'row', justifyContent: 'space-between', - marginBottom: 6 * scale, + marginBottom: 6, + }, + iconWrapper: { + flexDirection: 'row', + alignItems: 'center', + flex: 1, + marginBottom: 10, }, infoTitle: { - fontSize: 16 * scale, + fontSize: 16, color: '#979797', fontWeight: '500', }, infoText: { - fontSize: 14 * scale, + fontSize: 14, color: '#28A7E8', fontWeight: '500', }, - modalOverlay: { - flex: 1, - backgroundColor: 'rgba(0,0,0,0.4)', - justifyContent: 'center', - alignItems: 'center', - zIndex: 20, - }, - modalContent: { - width: '90%', - maxHeight: '80%', - backgroundColor: '#fff', - borderRadius: 10, - padding: 20, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.3, - shadowRadius: 4, - elevation: 5, - }, - modalTitle: { - fontSize: 20 * scale, - fontWeight: '600', - marginBottom: 10, - }, - closeButton: { - marginTop: 20, - backgroundColor: '#28A7E8', - paddingVertical: 10, - borderRadius: 8, - alignItems: 'center', - }, }); export default Order; diff --git a/src/screens/status/ui/Status.tsx b/src/screens/status/ui/Status.tsx index a20647c..cc2e138 100644 --- a/src/screens/status/ui/Status.tsx +++ b/src/screens/status/ui/Status.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 { View, useWindowDimensions, } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import Serach from 'svg/Serach'; import { DataInfo } from '../lib/data'; import Filter from './Filter'; @@ -140,61 +138,43 @@ const Status = () => { if (isLoading || isFetching) { return ( - - - - - - - + + + ); } if (statusData?.data.length === 0) { return ( - - - - - - {/* - - {searchIcon} - */} - - - + + + + + - - - + + ); } return ( - - - - - - - {/* + + + + + {/* { /> {searchIcon} */} - - - + + - - - - - - + + + + + - + ); }; diff --git a/src/screens/status/ui/Tabs.tsx b/src/screens/status/ui/Tabs.tsx index b40d1cc..42bfb8b 100644 --- a/src/screens/status/ui/Tabs.tsx +++ b/src/screens/status/ui/Tabs.tsx @@ -1,9 +1,9 @@ import React, { Dispatch, SetStateAction, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { + FlatList, NativeScrollEvent, NativeSyntheticEvent, - ScrollView, StyleSheet, Text, TouchableOpacity, @@ -32,31 +32,29 @@ const tabList: { label: string; value: FilterType }[] = [ { label: 'Bojxonada', value: 'IN_CUSTOMS' }, { label: 'Toshkent omboriga yetib keldi', value: 'IN_WAREHOUSE' }, { label: 'Topshirish punktiga yuborildi', value: 'DELIVERED' }, - // { label: 'Qabul qilingan', value: 'DELIVERED' }, ]; const Tabs = ({ filter, setFilter }: Props) => { const { width: screenWidth } = useWindowDimensions(); - const scale = screenWidth < 360 ? 0.85 : 1; - const styles = makeStyles(scale); - const scrollRef = useRef(null); + const cardWidth = screenWidth * 0.95; + const styles = makeStyles(); + const flatListRef = useRef(null); const [scrollX, setScrollX] = useState(0); const { t } = useTranslation(); const scrollStep = 120; const handleScrollLeft = () => { - if (scrollRef.current) { - scrollRef.current.scrollTo({ - x: Math.max(0, scrollX - scrollStep), - animated: true, - }); - } + flatListRef.current?.scrollToOffset({ + offset: Math.max(0, scrollX - scrollStep), + animated: true, + }); }; const handleScrollRight = () => { - if (scrollRef.current) { - scrollRef.current.scrollTo({ x: scrollX + scrollStep, animated: true }); - } + flatListRef.current?.scrollToOffset({ + offset: scrollX + scrollStep, + animated: true, + }); }; const onScroll = (event: NativeSyntheticEvent) => { @@ -69,27 +67,27 @@ const Tabs = ({ filter, setFilter }: Props) => { - item.value} showsHorizontalScrollIndicator={false} - contentContainerStyle={styles.scrollContent} - > - {tabList.map(tab => ( + onScroll={onScroll} + renderItem={({ item }) => ( setFilter(tab.value)} + style={[styles.card, filter === item.value && styles.activeCard]} + onPress={() => setFilter(item.value)} > - {t(tab.label)} + {t(item.label)} - ))} - + )} + contentContainerStyle={styles.scrollContent} + /> @@ -98,32 +96,38 @@ const Tabs = ({ filter, setFilter }: Props) => { ); }; -const makeStyles = (scale: number) => +const makeStyles = () => StyleSheet.create({ container: { flexDirection: 'row', alignItems: 'center', width: '95%', - height: 50 * scale, + height: 50, backgroundColor: '#FFFFFF', - marginTop: 20 * scale, + marginTop: 10, alignSelf: 'center', - borderRadius: 8 * scale, - paddingHorizontal: 4 * scale, + borderRadius: 8, + paddingHorizontal: 4, + shadowColor: '#000', + shadowOffset: { width: 0, height: 1 }, + shadowOpacity: 0.1, + shadowRadius: 2, + + elevation: 1, }, scrollContent: { flexDirection: 'row', alignItems: 'center', - paddingHorizontal: 4 * scale, + paddingHorizontal: 4, }, card: { - paddingHorizontal: 12 * scale, - paddingVertical: 8 * scale, + paddingHorizontal: 12, + paddingVertical: 8, alignItems: 'center', justifyContent: 'center', backgroundColor: '#F3FAFF', - marginRight: 8 * scale, - borderRadius: 8 * scale, + marginRight: 8, + borderRadius: 8, }, activeCard: { backgroundColor: '#28A7E8', @@ -131,13 +135,13 @@ const makeStyles = (scale: number) => text: { color: '#28A7E8', fontWeight: '500', - fontSize: 14 * scale, + fontSize: 14, }, activeText: { color: '#fff', }, navButton: { - padding: 6 * scale, + padding: 6, }, });