navigation

commit_and_push.sh

@@ -0,0 +1,7 @@
+git add *
+
+read -p "Commit message: " commit_message
+
+git commit -m "$commit_message"
+
+git push -u origin main

src/navigation/navigation.tsx

@@ -69,6 +69,8 @@ function ChatsTabAnim(props: any) {
   );
 }
 
+const tabBarIcons = ['account-circle', 'calendar-month', 'map', 'chat'];
+
 function CustomTabBar(props: BottomTabBarProps) {
   const {state, descriptors, navigation} = props;
 
@@ -110,8 +112,7 @@ function CustomTabBar(props: BottomTabBarProps) {
           });
         };
 
-        console.log('isFocused', isFocused);
-
+        // TODO: retrieve colors from theme
         const gradientColors = isFocused
           ? ['#931278', '#6030da']
           : ['#26263f', '#26263f'];
@@ -120,26 +121,14 @@ function CustomTabBar(props: BottomTabBarProps) {
           <TouchableOpacity
             key={route.key}
             accessibilityRole="button"
-            accessibilityState={isFocused ? ['selected'] : []}
-            accessibilityLabel={options.tabBarAccessibilityLabel}
+            //accessibilityState={isFocused ? ['selected'] : []}
+            //accessibilityLabel={options.tabBarAccessibilityLabel}
             onPress={onPress}
             onLongPress={onLongPress}
             style={{
-              /*flex: 1,
-              alignItems: 'center',
-              justifyContent: 'center',
-              //backgroundColor: '#26263f',
-              backgroundColor: 'red',
-              padding: 10,
-              borderRadius: 20,
-              marginRight: state.routes.length - 1 !== index ? 4 : 0,*/
-
               flex: 1,
               alignItems: 'center',
               justifyContent: 'center',
-              //backgroundColor: '#26263f',
-              //backgroundColor: 'red',
-              // padding: 10,
               borderRadius: 20,
               marginRight: state.routes.length - 1 !== index ? 4 : 0,
             }}>
@@ -148,18 +137,20 @@ function CustomTabBar(props: BottomTabBarProps) {
               start={{x: 0, y: 1}}
               end={{x: 1, y: 0}}
               style={{
-                padding: 10,
+                paddingTop: 4,
+                paddingBottom: 4,
                 borderRadius: 20,
                 width: '100%',
                 alignItems: 'center',
-                //marginRight: state.routes.length - 1 !== index ? 4 : 0,
               }}>
-              <Text
-                style={{
-                  color: isFocused ? '#fff' : '#ccc',
-                }}>
-                {label}
-              </Text>
+              <MaterialIcon
+                name={tabBarIcons[index]}
+                color={isFocused ? '#fff' : '#ccc'}
+                size={20}
+              />
+              {isFocused && (
+                <Text style={{color: '#fff'}}>{label.toString()}</Text>
+              )}
             </LinearGradient>
           </TouchableOpacity>
         );
@@ -173,42 +164,10 @@ function HomeStack() {
     <Tab.Navigator
       tabBar={props => <CustomTabBar {...props} />}
       screenOptions={{headerShown: false, unmountOnBlur: false}}>
-      <Tab.Screen
-        name="Profile"
-        component={ProfileTabAnim}
-        options={{
-          tabBarIcon: ({color, size}) => (
-            <MaterialIcon name="chat" color={color} size={size} />
-          ),
-        }}
-      />
-      <Tab.Screen
-        name="Calendar"
-        component={CalendarTabAnim}
-        options={{
-          tabBarIcon: ({color, size}) => (
-            <MaterialIcon name="account-circle" color={color} size={size} />
-          ),
-        }}
-      />
-      <Tab.Screen
-        name="Map"
-        component={MapTabAnim}
-        options={{
-          tabBarIcon: ({color, size}) => (
-            <MaterialIcon name="map" color={color} size={size} />
-          ),
-        }}
-      />
-      <Tab.Screen
-        name="Chats"
-        component={ChatsTabAnim}
-        options={{
-          tabBarIcon: ({color, size}) => (
-            <MaterialIcon name="map" color={color} size={size} />
-          ),
-        }}
-      />
+      <Tab.Screen name="Profile" component={ProfileTabAnim} />
+      <Tab.Screen name="Calendar" component={CalendarTabAnim} />
+      <Tab.Screen name="Map" component={MapTabAnim} />
+      <Tab.Screen name="Chats" component={ChatsTabAnim} />
     </Tab.Navigator>
   );
 }