musicland/src/navigation/BottomTab.js

import React, { useGlobal } from "reactn";
import { StyleSheet } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Motion } from "@legendapp/motion";

import { responsiveHeight } from "../actions/responsiveSizes.js";

import useLayoutType from "../hooks/useLayoutType.js";

import { Routes } from "./Routes";
import { Palette } from "../styles";

import { tabs } from "../assets";

import TabBar from "./TabBar";

import HomeStack from "./HomeStack";
import ChatStack from "./ChatStack";
import SettingsStack from "./SettingsStack";

const bottomTabStyles = StyleSheet.create({
  icon: {
    width: responsiveHeight(5),
    height: responsiveHeight(5),
    resizeMode: "contain",
  },
});

const BottomTab = createBottomTabNavigator();

export const BottomTabScreen = () => {
  const renderIcon = (icon, focused) => (
    <Motion.Image
      resizeMode={"contain"}
      animate={{
        tintColor: focused ? Palette.primary : Palette.white,
      }}
      style={[
        bottomTabStyles.icon,
        {
          width: "55%",
          height: "55%",
        },
      ]}
      source={icon}
    />
  );

  return (
    <BottomTab.Navigator tabBar={(props) => <TabBar {...props} />}>
      <BottomTab.Screen
        name={Routes.HomeStack}
        component={HomeStack}
        options={{
          headerShown: false,
          tabBarShowLabel: true,
          tabBarIcon: ({ focused }) => renderIcon(tabs.home, focused),
        }}
      />
      <BottomTab.Screen
        name={Routes.ChatStack}
        component={ChatStack}
        options={{
          headerShown: false,
          tabBarShowLabel: true,
          tabBarIcon: ({ focused }) => renderIcon(tabs.chat, focused),
        }}
      />
      <BottomTab.Screen
        name={Routes.SettingsStack}
        component={SettingsStack}
        options={{
          headerShown: false,
          tabBarShowLabel: true,
          tabBarIcon: ({ focused }) => renderIcon(tabs.settings, focused),
        }}
      />
    </BottomTab.Navigator>
  );
};