feat: format tab bar

src/routes/app.routes.tsx

@@ -1,9 +1,16 @@
-import { createBottomTabNavigator, BottomTabNavigationProp } from "@react-navigation/bottom-tabs";
+import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
 
-import { Exercise } from "@screens/Exercise";
-import { History } from "@screens/History";
-import { Home } from "@screens/Home";
-import { Profile } from "@screens/Profile";
+import { Exercise } from '@screens/Exercise';
+import { History } from '@screens/History';
+import { Home } from '@screens/Home';
+import { Profile } from '@screens/Profile';
+
+import HistoryIcon from '@assets/history.svg';
+import HomeIcon from '@assets/home.svg';
+import ProfileIcon from '@assets/profile.svg';
+
+import { gluestackUIConfig } from '../../config/gluestack-ui.config';
+import { Platform } from 'react-native';
 
 type AppRoutes = {
   Home: undefined,
@@ -17,15 +24,52 @@ export type AppNavigatorRoutesProps = BottomTabNavigationProp<AppRoutes>;
 const { Navigator, Screen } = createBottomTabNavigator<AppRoutes>();
 
 export function AppRoutes() {
+  const { tokens: { space, colors } } = gluestackUIConfig;
+  const iconSize = space['6'];
+
   return (
     <Navigator screenOptions={{
       headerShown: false,
       tabBarShowLabel: false,
+      tabBarActiveTintColor: colors.green500,
+      tabBarInactiveTintColor: colors.gray200,
+      tabBarStyle: {
+        backgroundColor: colors.gray600,
+        borderTopWidth: 0,
+        height: Platform.OS === 'android' ? 'auto' : 96,
+        paddingBottom: space['10'],
+        paddingTop: space['6'],
+      }
     }}>
-      <Screen name="Home" component={Home} />
-      <Screen name="History" component={History} />
-      <Screen name="Profile" component={Profile} />
-      <Screen name="Exercise" component={Exercise} />
+      <Screen
+        name="Home"
+        component={Home}
+        options={{
+          tabBarIcon: ({ color }) => <HomeIcon fill={color} width={iconSize} height={iconSize}/>
+        }}
+      />
+
+      <Screen
+        name="History"
+        component={History}
+        options={{
+          tabBarIcon: ({ color }) => <HistoryIcon fill={color} width={iconSize} height={iconSize}/>
+       }}
+      />
+
+      <Screen
+        name="Profile"
+        component={Profile}
+        options={{
+          tabBarIcon: ({ color }) => <ProfileIcon fill={color} width={iconSize} height={iconSize}/> 
+        }}
+      />
+
+      <Screen
+        name="Exercise"
+        component={Exercise}
+        options={{ tabBarButton: () => null }}
+      />
     </Navigator>
   )
 }