Obanana_test/app/pages/home/main.jsx

import React, { useRef, useState } from "react";
import {
  Animated,
  Dimensions,
  LayoutAnimation,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import BottomNav from "../../components/main/BottomNav";
import Header from "../../components/main/Header";
import Cart from "./Cart";
import Chat from "./Chat";
import Home from "./Home";
import Notification from "./Notification";
import Profile from "./Profile";
const height = Dimensions.get("window").height;

const Main = ({ cartList }) => {
  const [tabActive, settabActive] = useState("home");
  // const [switchTab, setswitch] = useState("prod");
  const [switchTab, setSwitchTab] = useState("prod");
  const animatedValue = useRef(new Animated.Value(0)).current;

  const handleTabPress = (tab) => {
    // Determine the target value based on the selected tab
    const targetValue = tab === 'prod' ? 0 : 1;

    // Create a spring animation
    Animated.spring(animatedValue, {
      toValue: targetValue,
      friction: 5, // Adjust the friction to control the bounce effect
      tension: 10, // Adjust the tension to control the bounce effect
      useNativeDriver: true,
    }).start();

    // Update the selected tab
    setSwitchTab(tab);
  };

  // Interpolate the animated value to determine background color
  const backgroundColor = animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['#ffaa00', '#ffaa00'], // Adjust colors as needed
  });
  return (
    <View style={styles.container}>
      <ScrollView style={styles.wrapper}>
        {tabActive === "home" ? (
          <Home tab={switchTab} />
        ) : tabActive === "notif" ? (
          <Notification />
        ) : tabActive === "message" ? (
          <Chat />
        ) : tabActive === "cart" ? (
          <Cart cartList={cartList} />
        ) : tabActive === "profile" ? (
          <Profile />
        ) : (
          <Home />
        )}
      </ScrollView>
      <View style={styles.footer}>
        {tabActive === "home" ? (
         <View style={styles.tabsCon}>
         <View style={styles.tabs}>
           <TouchableOpacity
             style={[
              switchTab === 'ven'? styles.tab:styles.tabActive ,

               {
                 backgroundColor: switchTab === 'prod' ? backgroundColor : 'transparent',
                 transform: [
                   {
                     translateX: animatedValue.interpolate({
                       inputRange: [0, 1],
                       outputRange: [-5, 5], // Adjust the bounce distance
                     }),
                   },
                 ],
               },
             ]}
             onPress={() => handleTabPress('prod')}
             activeOpacity={0.8}
           >
             <Text
               style={[
                 styles.tabText,
                 {
                   color: switchTab === 'prod' ? '#fff' : '#000',
                 },
               ]}
             >
               Products
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={[
              switchTab === 'prod'? styles.tab:styles.tabActive ,
               {
                 backgroundColor: switchTab === 'ven' ? backgroundColor : 'transparent',
                 transform: [
                   {
                     translateX: animatedValue.interpolate({
                       inputRange: [0, 1],
                       outputRange: [-5, 5], // Adjust the bounce distance
                     }),
                   },
                 ],
               },
             ]}
             onPress={() => handleTabPress('ven')}
             activeOpacity={0.8}
           >
             <Text
               style={[
                 styles.tabText,
                 {
                   color: switchTab === 'ven' ? '#fff' : '#000',
                 },
               ]}
             >
               Vendor
             </Text>
           </TouchableOpacity>
         </View>
       </View>
        ) : null}
        <BottomNav settabActive={settabActive} activeTab={tabActive} />
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    height: "100%",
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  header: {
    position: "fixed",
    width: "100%",
    top: 0,
  },
  footer: {
    // position: "absolute",
    bottom: 0,
    width: "100%",
  },
  wrapper: {
    height: "100%",
  },
  tabsCon: {
    height: 80,
    width: "100%",
    position: "absolute",
    justifyContent: "center",
    alignItems: "center",
    bottom: 50,
  },
  tabs: {
    // height: 30,
    margin: "auto",
    flexDirection: "row",
    backgroundColor: "#fff",
    borderRadius: 15,
    overflow: "hidden",
    borderWidth: 1,
    borderColor: "#ddd",
    // padding:10
  },
  tab: {
    paddingVertical: 15,
    paddingHorizontal: 25,
  },
  tabActive: {
    backgroundColor: "#ffaa00",
    paddingVertical: 15,
    paddingHorizontal: 25,
    borderRadius: 15,
  },
  tabText: {
    textTransform: "uppercase",
    color: "#383838",
    fontWeight: "600",
  },
  tabTextActive: {
    textTransform: "uppercase",
    color: "#fff",
    fontWeight: "600",
  },
});

export default Main;