112 lines
2.6 KiB
TypeScript
112 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 {
|
|
HomeScreen,
|
|
SearchScreen,
|
|
MyOrdersScreen,
|
|
OffersScreen,
|
|
AccountScreen,
|
|
} from '@features/screens';
|
|
|
|
export type MainTabParamList = {
|
|
HomeScreen: undefined;
|
|
SearchScreen: { categoryId?: string; categoryName?: string } | undefined;
|
|
MyOrdersScreen: undefined;
|
|
OffersScreen: undefined;
|
|
AccountScreen: undefined;
|
|
};
|
|
|
|
const Tab = createBottomTabNavigator<MainTabParamList>();
|
|
|
|
export const MainTabNavigator: React.FC = () => {
|
|
return (
|
|
<Tab.Navigator
|
|
screenOptions={({ route }) => ({
|
|
headerShown: false,
|
|
|
|
tabBarIcon: ({ color, size, focused }) => {
|
|
let iconName: string;
|
|
|
|
switch (route.name) {
|
|
case 'HomeScreen':
|
|
iconName = focused ? 'home' : 'home-outline';
|
|
break;
|
|
|
|
case 'SearchScreen':
|
|
iconName = 'magnify';
|
|
break;
|
|
|
|
case 'MyOrdersScreen':
|
|
iconName = focused ? 'package-variant' : 'package-variant-closed';
|
|
break;
|
|
|
|
case 'OffersScreen':
|
|
iconName = focused ? 'tag' : 'tag-outline';
|
|
break;
|
|
|
|
case 'AccountScreen':
|
|
iconName = focused ? 'account' : 'account-outline';
|
|
break;
|
|
|
|
default:
|
|
iconName = 'circle';
|
|
}
|
|
|
|
return (
|
|
<MaterialCommunityIcons
|
|
name={iconName}
|
|
size={size}
|
|
color={color}
|
|
/>
|
|
);
|
|
},
|
|
|
|
tabBarActiveTintColor: '#05824C',
|
|
tabBarInactiveTintColor: '#666666',
|
|
|
|
tabBarStyle: {
|
|
height: 65,
|
|
paddingBottom: 8,
|
|
paddingTop: 8,
|
|
},
|
|
|
|
tabBarLabelStyle: {
|
|
fontSize: 11,
|
|
fontWeight: '500',
|
|
},
|
|
})}
|
|
>
|
|
<Tab.Screen
|
|
name="HomeScreen"
|
|
component={HomeScreen}
|
|
options={{ tabBarLabel: 'Home' }}
|
|
/>
|
|
|
|
<Tab.Screen
|
|
name="SearchScreen"
|
|
component={SearchScreen}
|
|
options={{ tabBarLabel: 'Search' }}
|
|
/>
|
|
|
|
<Tab.Screen
|
|
name="MyOrdersScreen"
|
|
component={MyOrdersScreen}
|
|
options={{ tabBarLabel: 'Orders' }}
|
|
/>
|
|
|
|
<Tab.Screen
|
|
name="OffersScreen"
|
|
component={OffersScreen}
|
|
options={{ tabBarLabel: 'Offers' }}
|
|
/>
|
|
|
|
<Tab.Screen
|
|
name="AccountScreen"
|
|
component={AccountScreen}
|
|
options={{ tabBarLabel: 'Account' }}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
}; |