bug fix

src/screens/home/home/ui/Tabs.tsx

@@ -1,12 +1,6 @@
-import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
+import { Dispatch, SetStateAction, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  FlatList,
-  Image,
-  Text,
-  TouchableOpacity,
-  useWindowDimensions,
-} from 'react-native';
+import { Image, Text, TouchableOpacity, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import AviaLogo from 'screens/../../assets/bootsplash/Avia.png';
 import AutoLogo from 'screens/../../assets/bootsplash/auto.png';
@@ -19,8 +13,6 @@ interface Props {
 
 const Tabs = ({ activeTab, setActiveTab }: Props) => {
   const { t } = useTranslation();
-  const { width: screenWidth } = useWindowDimensions();
-  const cardWidth = screenWidth * 0.95;
   const styles = useMemo(() => HomeStyle(), []);
 
   const gradientStyle = useMemo(
@@ -29,9 +21,7 @@ const Tabs = ({ activeTab, setActiveTab }: Props) => {
       borderRadius: 8,
       flexDirection: 'row' as const,
       alignItems: 'center' as const,
-      paddingHorizontal: 12,
       height: 80,
-      gap: 8,
     }),
     [],
   );
@@ -53,57 +43,55 @@ const Tabs = ({ activeTab, setActiveTab }: Props) => {
     [t],
   );
 
-  const renderItem = useCallback(
-    ({ item }: { item: (typeof tabsData)[number] }) => {
-      const isActive = activeTab === item.type;
-      const gradientColors = isActive
-        ? ['#28A7E8', '#28A7E8']
-        : ['#28a8e82d', '#28A7E8'];
-
-      return (
-        <TouchableOpacity
-          onPress={() => setActiveTab(item.type)}
-          style={{ flex: 1 }}
-        >
-          <LinearGradient
-            colors={gradientColors}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
-            style={gradientStyle}
-          >
-            <Image source={item.logo} style={styles.tabsLogo} />
-            <Text
-              style={[styles.tabsText, { color: isActive ? '#fff' : '#000' }]}
-            >
-              {item.label}
-            </Text>
-          </LinearGradient>
-        </TouchableOpacity>
-      );
-    },
-    [activeTab, styles, gradientStyle, setActiveTab],
-  );
-
   return (
-    <FlatList
-      data={tabsData}
-      numColumns={2}
-      keyExtractor={(_, idx) => idx.toString()}
-      renderItem={renderItem}
-      showsHorizontalScrollIndicator={false}
-      scrollEnabled={false}
-      columnWrapperStyle={{
-        gap: 8,
-      }}
-      contentContainerStyle={{
-        paddingHorizontal: (screenWidth - cardWidth) / 2,
-      }}
-      getItemLayout={(_, index) => ({
-        length: cardWidth,
-        offset: cardWidth * index,
-        index,
+    <View style={{ flexDirection: 'row', paddingHorizontal: 10, gap: 12 }}>
+      {tabsData.map(item => {
+        const isActive = activeTab === item.type;
+        const gradientColors = isActive
+          ? ['#28A7E8', '#28A7E8']
+          : ['#28a8e82d', '#28A7E8'];
+
+        return (
+          <TouchableOpacity
+            onPress={() => setActiveTab(item.type)}
+            style={{ flex: 1 }}
+          >
+            <LinearGradient
+              colors={gradientColors}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 0 }}
+              style={gradientStyle}
+            >
+              <Image source={item.logo} style={styles.tabsLogo} />
+              <Text
+                style={[styles.tabsText, { color: isActive ? '#fff' : '#000' }]}
+              >
+                {item.label}
+              </Text>
+            </LinearGradient>
+          </TouchableOpacity>
+        );
       })}
-    />
+    </View>
+    // <FlatList
+    //   data={tabsData}
+    //   numColumns={2}
+    //   keyExtractor={(_, idx) => idx.toString()}
+    //   renderItem={renderItem}
+    //   showsHorizontalScrollIndicator={false}
+    //   scrollEnabled={false}
+    //   columnWrapperStyle={{
+    //     gap: 8,
+    //   }}
+    //   contentContainerStyle={{
+    //     paddingHorizontal: (screenWidth - cardWidth) / 2,
+    //   }}
+    //   getItemLayout={(_, index) => ({
+    //     length: cardWidth,
+    //     offset: cardWidth * index,
+    //     index,
+    //   })}
+    // />
   );
 };