feat: implement custom BottomTabBar and TabBarButton components with updated styles

Author: hardingadonis

src/app/_layout.tsx

@@ -14,7 +14,8 @@ const RootLayout = () => {
 				screenOptions={{
 					// headerShown: false,
 					// tabBarStyle: { display: 'none' },
-					tabBarActiveTintColor: '#e91e63',
+					tabBarActiveTintColor: '#4B6BFB',
+					tabBarInactiveTintColor: '#666666',
 				}}
 			>
 				<Tabs.Screen

src/components/tabbar/BottomTabBar.tsx

@@ -0,0 +1,68 @@
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { StyleSheet, View } from 'react-native';
+
+import TabBarButton from '@/components/tabbar/TabBarButton';
+
+const BottomTabBar = ({
+	state,
+	descriptors,
+	navigation,
+}: BottomTabBarProps) => {
+	return (
+		<View style={styles.container}>
+			{state.routes.map((route, index) => {
+				const { options } = descriptors[route.key];
+				const label = options.title || route.name;
+				const tabBarIcon = options.tabBarIcon;
+
+				if (['_sitemap', '+not-found'].includes(route.name)) return null;
+
+				const isFocused = state.index === index;
+
+				const onPress = () => {
+					const event = navigation.emit({
+						type: 'tabPress',
+						target: route.key,
+						canPreventDefault: true,
+					});
+
+					if (!isFocused && !event.defaultPrevented) {
+						navigation.navigate(route.name, route.params);
+					}
+				};
+
+				const onLongPress = () => {
+					navigation.emit({
+						type: 'tabLongPress',
+						target: route.key,
+					});
+				};
+
+				return (
+					<TabBarButton
+						label={label}
+						isFocused={isFocused}
+						onPress={onPress}
+						onLongPress={onLongPress}
+						tabBarIcon={tabBarIcon}
+						tabBarActiveTintColor={options.tabBarActiveTintColor!}
+						tabBarInactiveTintColor={options.tabBarInactiveTintColor!}
+					/>
+				);
+			})}
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		justifyContent: 'space-around',
+		backgroundColor: 'white',
+		paddingVertical: 14,
+		borderTopWidth: 2,
+		borderTopColor: '#EEEEEE',
+	},
+});
+
+export default BottomTabBar;

src/components/tabbar/TabBarButton.tsx

@@ -1,3 +1,77 @@
-const TabBarButton = () => {};
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+export interface TabBarButtonProps {
+	label: string;
+	isFocused: boolean;
+	onPress: () => void;
+	onLongPress: () => void;
+	tabBarIcon?: (props: {
+		focused: boolean;
+		color: string;
+		size: number;
+	}) => React.ReactNode;
+	tabBarActiveTintColor: string;
+	tabBarInactiveTintColor: string;
+}
+
+const TabBarButton = ({
+	label,
+	isFocused,
+	onPress,
+	onLongPress,
+	tabBarIcon,
+	tabBarActiveTintColor,
+	tabBarInactiveTintColor,
+}: TabBarButtonProps) => {
+	return (
+		<Pressable
+			onPress={onPress}
+			onLongPress={onLongPress}
+			android_ripple={null}
+			style={[styles.tab, isFocused && styles.activeTab]}
+		>
+			{tabBarIcon &&
+				tabBarIcon({
+					color: isFocused ? tabBarActiveTintColor : tabBarInactiveTintColor,
+					size: 24,
+					focused: isFocused,
+				})}
+
+			<Text
+				style={[
+					{
+						color: isFocused ? tabBarActiveTintColor : tabBarInactiveTintColor,
+					},
+					styles.tabText,
+					isFocused && styles.activeTabText,
+				]}
+			>
+				{label}
+			</Text>
+		</Pressable>
+	);
+};
+
+const styles = StyleSheet.create({
+	tab: {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center',
+		paddingTop: 6,
+		paddingBottom: 6,
+		borderRadius: 16,
+	},
+	tabText: {
+		fontSize: 12,
+		marginTop: 4,
+	},
+	activeTab: {
+		backgroundColor: '#e6f0ff',
+	},
+	activeTabText: {
+		color: '#4B6BFB',
+		fontWeight: 'bold',
+	},
+});
 
 export default TabBarButton;