TabStack.tsx

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ColorPallet, TextTheme } from 'src/theme/theme';
import {
  Screens,
  TabStackParams,
  TabStacks,
} from 'src/type/navigators';
import ContactStack from './ContactStack';
import SealStack from './SealStack';
import EmailStack from './EmailStack';
import CredentialStack from './CredentialStack';
import CredentialSvg from 'src/assets/svg/credential.svg';
import ConnectionsSvg from 'src/assets/svg/connections.svg';
import SealHistorySvg from 'src/assets/svg/seal_history.svg';
import EmailSvg from 'src/assets/svg/e-mail-black.svg';
import TabStackCustom from "./TabStackCustom";

const MainTabNavigator = createBottomTabNavigator<TabStackParams>();

type TabBarIconProps = {
  focused: boolean;
  Svg: React.FC<any>;
};

type TabBarLabelProps = {
  label: string;
};

const TabBarIcon = ({ Svg, focused }: TabBarIconProps) => {
  return (
    <View style={styles.tabView}>
      <Svg
        style={[
          styles.tabBarIcon,
          focused ? styles.tabBarIconFocused : undefined,
        ]}
        resizeMode="contain"
      />
    </View>
  );
};

const TabBarLabel = ({ label }: TabBarLabelProps) => {
  return (
    <Text style={styles.tabBarLabel} numberOfLines={1}>
      {label}
    </Text>
  );
};

const TabStack: React.FC = () => {
  const { t } = useTranslation();


  return (
    <MainTabNavigator.Navigator
      tabBar={props => <TabStackCustom {...props} />}
      screenOptions={{
        tabBarStyle: styles.tabBarStyle,
        tabBarActiveTintColor: ColorPallet.baseColors.white,
        tabBarInactiveTintColor: ColorPallet.brand.primary,
        headerShown: false,
        tabBarHideOnKeyboard: true,
        unmountOnBlur: true,
        tabBarShowLabel: true,
        tabBarLabelPosition: 'below-icon',
      }}
    >
      <MainTabNavigator.Screen
        name={TabStacks.CredentialStack}
        component={CredentialStack}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} Svg={CredentialSvg} />
          ),
          tabBarLabel: () => (
            <TabBarLabel label={t<string>('TabStack.Credentials')} />
          ),
          unmountOnBlur: true,
        }}
      />
      <MainTabNavigator.Screen
        name={TabStacks.ConnectionStack}
        component={ContactStack}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} Svg={ConnectionsSvg} />
          ),
          tabBarLabel: () => (
            <TabBarLabel label={t<string>('TabStack.Contacts')} />
          ),
          unmountOnBlur: true,
        }}
      />
      <MainTabNavigator.Screen
        name={TabStacks.SealStack}
        component={SealStack}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} Svg={SealHistorySvg} />
          ),
          tabBarLabel: () => (
            <TabBarLabel label={t<string>('TabStack.SealHistory')} />
          ),
          unmountOnBlur: true,
        }}
        listeners={({ navigation }) => ({
          tabPress: e => {
            e.preventDefault();
            navigation.navigate(TabStacks.SealStack, {
              screen: Screens.SealScannedQrCodeList,
            });
          },
        })}
      />
      <MainTabNavigator.Screen
        name={TabStacks.EmailStack}
        component={EmailStack}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} Svg={EmailSvg} />
          ),
          tabBarLabel: () => (
            <TabBarLabel label={t<string>('TabStack.Emails')} />
          ),
          unmountOnBlur: true,
        }}
        listeners={({ navigation }) => ({
          tabPress: e => {
            e.preventDefault();
            navigation.navigate(TabStacks.EmailStack, {
              screen: Screens.ReceivedEmails,
            });
          },
        })}
      />
    </MainTabNavigator.Navigator>
  );
};

export default TabStack;

const styles = StyleSheet.create({
  tabBarStyle: {
    height: 80,
    backgroundColor: ColorPallet.grayscale.veryLightGrey,
    borderTopWidth: 0,
    paddingBottom: 0,
    marginRight: 10,
    marginLeft: 10,
    marginBottom: 10,
    borderRadius: 24,
  },
  tabView: {
    height: 45,
    width: 45,
    alignItems: 'center',
    justifyContent: 'center',
  },
  tabBarLabel: {
    ...TextTheme.label,
    fontWeight: 'normal',
    paddingBottom: 5,
    color: ColorPallet.grayscale.black,
  },
  tabBarIcon: {
    height: 40,
    width: 40,
    fill: ColorPallet.grayscale.black,
  },
  tabBarIconFocused: {
    fill: ColorPallet.brand.primary,
  },
});