Obanana_test/app/components/shop/Tab.jsx

import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { useNavigation } from "@react-navigation/native";
import React, { useState } from "react";
import {
  Dimensions,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import { favorite } from "../../constants/favorites";
import ShopSinglePage from "../../pages/shop/ShopSinglePage";
// const Tabs = createMaterialTopTabNavigator();
const Tabs = createMaterialTopTabNavigator();

import Products from "./Products";
import Shop from "./Shop";

const Tab = ({ info,prod,item,productList }) => {
  const navigation = useNavigation();
  const [tab, settab] = useState("prod");
  return (
    <View style={styles.container}>
      <View style={styles.wrapper}>
        {/* <Tabs.Navigator
          scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling
          screenOptions={{
            // tabBarScrollEnabled: true, // Make sure to set this to true as well
            // tabBarStyle: { width: "100%", height: 500 }, // Adjust the height as needed
            tabBarItemStyle: { borderColor: "#dddd", borderLeftWidth: 1 }, // Divide the width evenly for each tab
            tabBarIndicatorStyle: { backgroundColor: "#ffaa00" }, // Customize the indicator style
          }}
          // initialLayout={{ width: Dimensions.get('window').width,height: Dimensions.get('window').height}}
          // style={{ height: '100%' }}
        >
          <Tabs.Screen
            name="Products"
            component={Products}
            options={{ tabBarLabel: "Products" }}
            // initialParams={{ products: products }}
          />
          <Tabs.Screen
            name="MoreInfo"
            component={Shop}
            options={{ tabBarLabel: "More Info" }}
            initialParams={{ info: info }}
          />
        </Tabs.Navigator> */}
        <View style={styles.tab}>
          <TouchableOpacity
            style={tab === "prod" ? styles.tabBtnActive : styles.tabBtn}
            onPress={() => settab("prod")}
          >
            <Text style={tab === "prod" ?styles.tabTxtActive:styles.tabTxt}>Products</Text>
          </TouchableOpacity>
          {/* <TouchableOpacity
            style={tab === "more" ? styles.tabBtnActive : styles.tabBtn}
            onPress={() => settab("more")}
          >
            <Text style={tab === "more" ?styles.tabTxtActive:styles.tabTxt}>More Info</Text>
          </TouchableOpacity> */}
        </View>
        {tab === "prod" ? <Products productList={productList} prod={prod} item={item} /> : <Shop info={info} />}
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    // backgroundColor: "#ff3e3e",
    width: "100%",
    // height: "100%",
    // flex:1
  },
  wrapper: {
    // backgroundColor: "#ff3e3e",

    height: "100%",
    // width: "100%",
    // justifyContent: "center",
    marginBottom: 20,
  },
  tab: {
    alignItems: "center",
    width: "100%",
    top: 0,
    // paddingLeft: 15,
    flexDirection: "row",
  },
  tabBtn: {
    width: "50%",
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 15,
    borderWidth: 1,
    borderColor: "#e9e9e9",
  },
  tabBtnActive: {
    width: "50%",
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 15,
    // borderWidth: 1,
    // borderColor: "#e9e9e9",
    borderBottomColor: "#ffaa00",
    borderBottomWidth: 3,
  },
  tabTxt:{color:"#8f8f8fed"},
  tabTxtActive:{
    color:"#161616"
  },
  header: {
    alignItems: "center",
    width: "100%",
    top: 0,
    paddingLeft: 15,
    flexDirection: "row",
    borderColor: "#ddd",
    paddingBottom: 15,
    borderBottomWidth: 1,
  },
  headerText: {
    fontSize: 16,
    fontWeight: "600",
    marginLeft: 25,
  },
});

export default Tab;