BottomTabsNavigator.tsx

import * as React from 'react';
import { StyleSheet, View, Image } from 'react-native';
import { Text } from 'react-native-paper';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// TYPES
import type { IconNameType } from '../components/Common/Icon';

// STYLES1
import {
	icons,
	CONSTANT_COLOR as CC,
	CONSTANT_SIZE as CS,
	GLOBAL_STYLE as GS,
} from '../assets/ts';

// HELPERS
import { getReactComponentProps } from '../helpers/utils';

// COMPONENTS
import SCREENS from '../screens';
import HomeStack from './HomeStack';

// LOCAL TYPES
export interface BottomTabsItem {
	label: string;
	path: string;
	icon: IconNameType;
	focused?: boolean;
	component?: React.ReactNode;
}
export type BottomTabsScreenType = typeof BOTTOM_TABS_SCREEN_PROPS;

// COMPONENTS
const Tab = createBottomTabNavigator();
const BottomTabsScreen = createBottomTabNavigator().Screen;

// DATA
export const BOTTOM_TABS_SCREEN_PROPS =
	getReactComponentProps(BottomTabsScreen);
export const BOTTOM_TABS_ROUTES_NAMES = {
	HOME: 'BOTTOM_TABS/HOME',
	GAMES: 'BOTTOM_TABS/GAMES',
	MY_CART: 'BOTTOM_TABS/MY_CART',
	MY_TICKETS: 'BOTTOM_TABS/MY_TICKETS',
	MY_PLAYS: 'BOTTOM_TABS/MY_PLAYS',
};

// DATA
export const BOTTOM_TABS_ROUTES: BottomTabsScreenType[] = [
	{
		name: BOTTOM_TABS_ROUTES_NAMES.HOME,
		component: HomeStack,
	},
	{
		name: BOTTOM_TABS_ROUTES_NAMES.GAMES,
		component: SCREENS.APP.INSTANT_GAMES.INSTANT_GAMES_SCREEN,
	},
	{
		name: BOTTOM_TABS_ROUTES_NAMES.MY_CART,
		component: SCREENS.APP.CART,
	},
	{
		name: BOTTOM_TABS_ROUTES_NAMES.MY_TICKETS,
		component: SCREENS.APP.TICKET_CHECKER,
	},
	{
		name: BOTTOM_TABS_ROUTES_NAMES.MY_PLAYS,
		component: SCREENS.APP.MY_PLAYS,
	},
];

const TabItem = ({
	focused,
	icon,
	title,
	isLast = false,
}: {
	focused: boolean;
	icon: any;
	title: string;
	isLast?: boolean;
}) => {
	return (
		<View
			style={{
				...STYLES.tabBarIcon,
				flexGrow: 1,
				borderRightColor: 'rgba(255,255,255,0.1)',
				borderRightWidth: isLast ? 0 : 0.5,
			}}>
			<View style={{ paddingTop: 5 }}>
				<Image
					source={icon}
					style={{
						tintColor: focused ? CC.secondary : CC.primary,
						resizeMode: 'contain',
						height: 25,
						width: 25,
						alignSelf: 'center',
					}}
				/>
				<Text
					style={{
						...STYLES.tabBarLabel,
						// color: focused ? CC.secondary : CC.primary,
					}}>
					{title}
				</Text>
			</View>
		</View>
	);
};

const BottomTabsNavigator: React.FC = () => {
	return (
		<Tab.Navigator
			initialRouteName={BOTTOM_TABS_ROUTES_NAMES.HOME}
			screenOptions={({ route }) => ({
				headerShown: false,
				tabBarStyle: STYLES.tabBarStyle,
				tabBarShowLabel: false,
				tabBarIcon: ({ focused }) => {
					switch (route.name) {
						case BOTTOM_TABS_ROUTES_NAMES.HOME:
							return (
								<TabItem
									focused={focused}
									icon={icons.lottery}
									title="Lottery"
								/>
							);
						case BOTTOM_TABS_ROUTES_NAMES.GAMES:
							return (
								<TabItem focused={focused} icon={icons.games} title="Games" />
							);
						case BOTTOM_TABS_ROUTES_NAMES.MY_CART:
							return (
								<TabItem
									focused={focused}
									icon={icons.my_cart}
									title="My cart"
								/>
							);
						case BOTTOM_TABS_ROUTES_NAMES.MY_TICKETS:
							return (
								<TabItem
									focused={focused}
									icon={icons.my_tickets}
									title="Scan ticket"
								/>
							);
						case BOTTOM_TABS_ROUTES_NAMES.MY_PLAYS:
							return (
								<TabItem
									focused={focused}
									icon={icons.coupons}
									title="My plays"
									isLast
								/>
							);
					}
				},
				lazy: true,
				// tabBarHideOnKeyboard: true,
			})}
			sceneContainerStyle={GS.bgTransparent}>
			{BOTTOM_TABS_ROUTES.map((stackScreenProps, id) => (
				<Tab.Screen key={id} {...stackScreenProps} />
			))}
		</Tab.Navigator>
	);
};

const STYLES = StyleSheet.create({
	tabBarStyle: {
		...GS.noShadow,
		...GS.noBorder,
		borderTopWidth: 0,
		height: CS.BOTTOM_NAVBAR_HEIGHT,
		backgroundColor: '#2A2450',
	},
	tabBarIcon: {
		// width: '100%',
		width: CS.WINDOW_WIDTH / 5,
		height: '100%',
		flexDirection: 'column',
		alignItems: 'center',
		justifyContent: 'center',
	},
	tabBarLabel: {
		textAlign: 'center',
		fontSize: 10,
		marginTop: 5,
		textTransform: 'uppercase',
		color: 'white',
	},
});

export default BottomTabsNavigator;