83 lines
2.0 KiB
TypeScript
83 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { Text } from 'react-native';
|
|
import {
|
|
HomeScreen,
|
|
SearchScreen,
|
|
MyOrdersScreen,
|
|
OffersScreen,
|
|
AccountScreen,
|
|
} from '@features/screens';
|
|
|
|
export type MainTabParamList = {
|
|
HomeScreen: undefined;
|
|
SearchScreen: undefined;
|
|
MyOrdersScreen: undefined;
|
|
OffersScreen: undefined;
|
|
AccountScreen: undefined;
|
|
};
|
|
|
|
const Tab = createBottomTabNavigator<MainTabParamList>();
|
|
|
|
const tabIcons: Record<string, string> = {
|
|
HomeScreen: '🏠',
|
|
SearchScreen: '🔍',
|
|
MyOrdersScreen: '📦',
|
|
OffersScreen: '🏷️',
|
|
AccountScreen: '👤',
|
|
};
|
|
|
|
const renderTabIcon = (routeName: string, focused: boolean) => (
|
|
<Text style={{ fontSize: 22, opacity: focused ? 1 : 0.5 }}>
|
|
{tabIcons[routeName]}
|
|
</Text>
|
|
);
|
|
|
|
export const MainTabNavigator: React.FC = () => {
|
|
return (
|
|
<Tab.Navigator
|
|
screenOptions={({ route }) => ({
|
|
headerShown: false,
|
|
tabBarIcon: ({ focused }) => renderTabIcon(route.name, focused),
|
|
tabBarActiveTintColor: '#05824C',
|
|
tabBarInactiveTintColor: '#666666',
|
|
tabBarStyle: {
|
|
paddingBottom: 8,
|
|
paddingTop: 8,
|
|
height: 60,
|
|
},
|
|
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>
|
|
);
|
|
};
|