Bottom Tab

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

export default function BottomTab({
  tabList,
  onTab,
  backgroundColor = "#fff",
}) {
  const Tab = createBottomTabNavigator();

  const screenOptions = {
    tabBarShowLabel: false,
    tabBarHideOnKeyboard: true,
    headerShown: false,
    tabBarItemStyle: { paddingTop: 4 },
    tabBarStyle: {
      backgroundColor: backgroundColor,
      elevation: 10,
      height: 60,
    },
  };

  return (
    <Tab.Navigator screenOptions={screenOptions}>
      {tabList?.map((item, index) => (
        <Tab.Screen
          key={"tab-item-" + index}
          listeners={{
            tabPress: (e) => {
              if (onTab) {
                onTab(index);
              }
            },
          }}
          name={item.name}
          component={item.component}
          options={{
            tabBarIcon: () => item.icon,
          }}
        />
      ))}
    </Tab.Navigator>
  );
}

import { NavigationContainer } from "@react-navigation/native";
import { useState } from "react";

import Home from "../../page/Home";
import Option from "../../page/Option";

import IconHome from "../element/output/IconHome";
import BottomTab from "./BottomTab";

export default function TestView() {
  
  const tabBackGround = "#efefef";
  const iconColor = "#444";
  const iconActiveColor = "#00f";

  const [selectTab, setSelectTab] = useState(0);

  const tabList = [
    {
      name: "Home",
      component: Home,
      icon: (
        <IconHome
          color={0 == selectTab ? iconActiveColor : iconColor}
          width={25}
        />
      ),
    },
    {
      name: "Option",
      component: Option,
      icon: (
        <IconHome
          color={1 == selectTab ? iconActiveColor : iconColor}
          width={25}
        />
      ),
    },
  ];

  const handleClickTab = (e) => {
    setSelectTab(e);
  };

  return (
    <NavigationContainer>
      <BottomTab
        backgroundColor={tabBackGround}
        onTab={handleClickTab}
        tabList={tabList}
      />
    </NavigationContainer>
  );
}