100 lines
2.6 KiB
TypeScript
100 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import { BottomTabParamList } from '@navigation/navigationTypes';
|
|
import {
|
|
EarningsScreen,
|
|
JobsScreen,
|
|
InboxScreen,
|
|
ProfileScreen,
|
|
DashboardScreen,
|
|
} from '@features/screens';
|
|
import { useAppTheme } from '@theme';
|
|
import { RouteNames } from '@utils/constants';
|
|
|
|
const Tab = createBottomTabNavigator<BottomTabParamList>();
|
|
|
|
const BottomTabNavigator: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
|
|
return (
|
|
<Tab.Navigator
|
|
screenOptions={({ route }) => ({
|
|
headerShown: false,
|
|
tabBarActiveTintColor: colors.primary,
|
|
tabBarInactiveTintColor: colors.textSecondary,
|
|
tabBarStyle: {
|
|
backgroundColor: colors.background,
|
|
},
|
|
tabBarIcon: ({ color, size, focused }) => {
|
|
let iconName: string;
|
|
|
|
switch (route.name) {
|
|
case RouteNames.Dashboard:
|
|
iconName = focused ? 'home' : 'home-outline';
|
|
break;
|
|
|
|
case RouteNames.Earnings:
|
|
iconName = focused ? 'cash' : 'cash-multiple';
|
|
break;
|
|
|
|
case RouteNames.Jobs:
|
|
iconName = focused ? 'briefcase' : 'briefcase-outline';
|
|
break;
|
|
|
|
case RouteNames.Inbox:
|
|
iconName = focused ? 'message' : 'message-outline';
|
|
break;
|
|
|
|
case RouteNames.Profile:
|
|
iconName = focused ? 'account' : 'account-outline';
|
|
break;
|
|
|
|
default:
|
|
iconName = 'circle';
|
|
}
|
|
|
|
return (
|
|
<MaterialCommunityIcons
|
|
name={iconName}
|
|
size={size}
|
|
color={color}
|
|
/>
|
|
);
|
|
},
|
|
})}
|
|
>
|
|
<Tab.Screen
|
|
name={RouteNames.Dashboard}
|
|
component={DashboardScreen}
|
|
options={{ tabBarLabel: 'Home' }}
|
|
/>
|
|
|
|
<Tab.Screen
|
|
name={RouteNames.Earnings}
|
|
component={EarningsScreen}
|
|
options={{ tabBarLabel: 'Earning' }}
|
|
/>
|
|
|
|
<Tab.Screen
|
|
name={RouteNames.Jobs}
|
|
component={JobsScreen}
|
|
options={{ tabBarLabel: 'Jobs' }}
|
|
/>
|
|
|
|
{/* <Tab.Screen
|
|
name={RouteNames.Inbox}
|
|
component={InboxScreen}
|
|
options={{ tabBarLabel: 'Inbox' }}
|
|
/> */}
|
|
|
|
<Tab.Screen
|
|
name={RouteNames.Profile}
|
|
component={ProfileScreen}
|
|
options={{ tabBarLabel: 'Account' }}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
};
|
|
|
|
export default BottomTabNavigator; |