update

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<ScrollView>(null);
+  const cardWidth = screenWidth * 0.95;
+  const styles = makeStyles();
+  const flatListRef = useRef<FlatList>(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<NativeScrollEvent>) => {
@@ -69,27 +67,27 @@ const Tabs = ({ filter, setFilter }: Props) => {
         <ArrowLeft color="#28A7E8" width={20} height={20} />
       </TouchableOpacity>
 
-      <ScrollView
+      <FlatList
+        ref={flatListRef}
         horizontal
-        onScroll={onScroll}
-        ref={scrollRef}
+        data={tabList}
+        keyExtractor={item => item.value}
         showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.scrollContent}
-      >
-        {tabList.map(tab => (
+        onScroll={onScroll}
+        renderItem={({ item }) => (
           <TouchableOpacity
-            key={tab.value}
-            style={[styles.card, filter === tab.value && styles.activeCard]}
-            onPress={() => setFilter(tab.value)}
+            style={[styles.card, filter === item.value && styles.activeCard]}
+            onPress={() => setFilter(item.value)}
           >
             <Text
-              style={[styles.text, filter === tab.value && styles.activeText]}
+              style={[styles.text, filter === item.value && styles.activeText]}
             >
-              {t(tab.label)}
+              {t(item.label)}
             </Text>
           </TouchableOpacity>
-        ))}
-      </ScrollView>
+        )}
+        contentContainerStyle={styles.scrollContent}
+      />
 
       <TouchableOpacity style={styles.navButton} onPress={handleScrollRight}>
         <ArrowRightUnderline color="#28A7E8" width={20} height={20} />
@@ -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,
     },
   });