112 lines
3.5 KiB
TypeScript
112 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { TouchableOpacity } from 'react-native';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { DrawerNavigationProp } from '@react-navigation/drawer';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { route, RouteParams } from '@utils';
|
|
import {
|
|
DashboardScreen,
|
|
AddLeadScreen,
|
|
CustomersScreen,
|
|
ProfileScreen,
|
|
} from '@features';
|
|
import { LeadsStack } from './leadsStack';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './tabStack.styles';
|
|
|
|
export type TabStackParamList = Pick<
|
|
RouteParams,
|
|
'dashboard' | 'leads' | 'addLead' | 'customers' | 'profile'
|
|
>;
|
|
|
|
const Tab = createBottomTabNavigator<TabStackParamList>();
|
|
|
|
export const TabStack = () => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<Tab.Navigator
|
|
screenOptions={({ route: tabRoute }) => ({
|
|
tabBarIcon: ({ focused, color, size }) => {
|
|
let iconName = 'square';
|
|
if (tabRoute.name === route.dashboard) {
|
|
iconName = focused ? 'grid' : 'grid-outline';
|
|
} else if (tabRoute.name === route.leads) {
|
|
iconName = focused ? 'funnel' : 'funnel-outline';
|
|
} else if (tabRoute.name === route.addLead) {
|
|
iconName = focused ? 'add-circle' : 'add-circle-outline';
|
|
} else if (tabRoute.name === route.customers) {
|
|
iconName = focused ? 'people' : 'people-outline';
|
|
} else if (tabRoute.name === route.profile) {
|
|
iconName = focused ? 'person' : 'person-outline';
|
|
}
|
|
return <Icon name={iconName} size={size || 22} color={color} />;
|
|
},
|
|
tabBarActiveTintColor: colors.icon,
|
|
tabBarInactiveTintColor: colors.textMuted,
|
|
tabBarStyle: styles.tabBar,
|
|
tabBarLabelStyle: styles.tabBarLabel,
|
|
headerStyle: styles.header,
|
|
headerTitleStyle: styles.headerTitle,
|
|
headerTitleAlign: 'center',
|
|
})}>
|
|
<Tab.Screen
|
|
name={route.dashboard}
|
|
component={DashboardScreen}
|
|
options={({ navigation }) => ({
|
|
tabBarLabel: 'Dashboard',
|
|
headerTitle: 'Convex CRM',
|
|
headerLeft: () => (
|
|
<TouchableOpacity
|
|
style={styles.drawerButton}
|
|
activeOpacity={0.7}
|
|
onPress={() => {
|
|
const parentNav = navigation.getParent<DrawerNavigationProp<any>>();
|
|
if (parentNav) {
|
|
parentNav.openDrawer();
|
|
} else {
|
|
(navigation as any).openDrawer?.();
|
|
}
|
|
}}>
|
|
<Icon name="menu-outline" size={20} color={colors.text} />
|
|
</TouchableOpacity>
|
|
),
|
|
})}
|
|
/>
|
|
<Tab.Screen
|
|
name={route.leads}
|
|
component={LeadsStack}
|
|
options={{
|
|
tabBarLabel: 'Leads',
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name={route.addLead}
|
|
component={AddLeadScreen}
|
|
options={{
|
|
tabBarLabel: 'Add',
|
|
headerTitle: 'Add Lead',
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name={route.customers}
|
|
component={CustomersScreen}
|
|
options={{
|
|
tabBarLabel: 'Customers',
|
|
headerTitle: 'Customers',
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name={route.profile}
|
|
component={ProfileScreen}
|
|
options={{
|
|
tabBarLabel: 'Profile',
|
|
headerTitle: 'Profile',
|
|
}}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
};
|