Home Screen

constants/colors.js

@@ -2,6 +2,7 @@ const Colors = {
   primary500: "#282A35",
   primary400: "#373A49",
   accent500: "#A587DD",
+  accent300: "#d2c3ee",
 };
 
 export default Colors;

navigation/Navigator.js

@@ -25,15 +25,6 @@ function Navigator() {
           tabBarActiveBackgroundColor: Colors.primary400,
         }}
       >
-        <Tab.Screen
-          name="Home"
-          component={MainScreen}
-          options={{
-            tabBarIcon: ({ color, size }) => (
-              <Icon name="md-person-circle-outline" color={color} size={size} />
-            ),
-          }}
-        />
         <Tab.Screen
           name="Gift"
           component={MainScreen}
@@ -52,6 +43,18 @@ function Navigator() {
             ),
           }}
         />
+        <Tab.Screen
+          name="Home"
+          component={MainScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Icon name="home-outline" color={color} size={size} />
+            ),
+            tabBarItemStyle: styles.homeTab,
+            tabBarActiveTintColor: Colors.accent500,
+            tabBarActiveBackgroundColor: Colors.primary400,
+          }}
+        />
         <Tab.Screen
           name="Calendar"
           component={MainScreen}
@@ -61,6 +64,15 @@ function Navigator() {
             ),
           }}
         />
+        <Tab.Screen
+          name="Profile"
+          component={MainScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Icon name="person-circle-outline" color={color} size={size} />
+            ),
+          }}
+        />
       </Tab.Navigator>
     </NavigationContainer>
   );
@@ -70,6 +82,13 @@ const styles = StyleSheet.create({
   TabBar: {
     backgroundColor: Colors.primary500,
   },
+  homeTab: {
+    marginTop: 2,
+    borderWidth: 1,
+    borderColor: Colors.accent300,
+    borderRadius: 50,
+    padding: 5,
+  },
 });
 
 export default Navigator;