Add new upload button in the middle on the nav bar and shifting the older icons to new positions. Follow Blessing's design by enlargining it and making the other icons a bit smaller. Also, add the navigation that goes to the camera screen from the upload icon.

Ending the rebase from master.

1 files changed, 26 insertions, 20 deletions

diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index f8b94470..12f6ab58 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -1,23 +1,23 @@
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import React, { Fragment, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { NavigationIcon } from '../../components';
-import { NO_NOTIFICATIONS } from '../../store/initialStates';
-import { RootState } from '../../store/rootReducer';
-import { setNotificationsReadDate } from '../../services';
-import { ScreenType } from '../../types';
-import { haveUnreadNotifications } from '../../utils';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import React, {Fragment, useEffect, useState} from 'react';
+import {useSelector} from 'react-redux';
+import {NavigationIcon} from '../../components';
+import {NO_NOTIFICATIONS} from '../../store/initialStates';
+import {RootState} from '../../store/rootReducer';
+import {setNotificationsReadDate} from '../../services';
+import {ScreenType} from '../../types';
+import {haveUnreadNotifications} from '../../utils';
 import MainStackScreen from '../main/MainStackScreen';
-import { NotificationPill } from '../../components/notifications';
+import {NotificationPill} from '../../components/notifications';
 
 const Tabs = createBottomTabNavigator();
 
 const NavigationBar: React.FC = () => {
-  const { isOnboardedUser, newNotificationReceived } = useSelector(
+  const {isOnboardedUser, newNotificationReceived} = useSelector(
     (state: RootState) => state.user,
   );
 
-  const { notifications: { notifications } = NO_NOTIFICATIONS } = useSelector(
+  const {notifications: {notifications} = NO_NOTIFICATIONS} = useSelector(
     (state: RootState) => state,
   );
   // Triggered if user clicks on Notifications page to close the pill
@@ -41,15 +41,21 @@ const NavigationBar: React.FC = () => {
     <>
       <NotificationPill showIcon={showIcon} />
       <Tabs.Navigator
-        screenOptions={({ route }) => ({
-          tabBarIcon: ({ focused }) => {
+        screenOptions={({route}) => ({
+          tabBarIcon: ({focused}) => {
             switch (route.name) {
               case 'Home':
                 return <NavigationIcon tab="Home" disabled={!focused} />;
               case 'Chat':
                 return <NavigationIcon tab="Chat" disabled={!focused} />;
               case 'Upload':
-                return <NavigationIcon tab="Upload" disabled={!focused} />;
+                return (
+                  <NavigationIcon
+                    tab="Upload"
+                    disabled={!focused}
+                    isBigger={true}
+                  />
+                );
               case 'Notifications':
                 return (
                   <NavigationIcon
@@ -86,22 +92,22 @@ const NavigationBar: React.FC = () => {
         <Tabs.Screen
           name="SuggestedPeople"
           component={MainStackScreen}
-          initialParams={{ screenType: ScreenType.SuggestedPeople }}
+          initialParams={{screenType: ScreenType.SuggestedPeople}}
         />
         <Tabs.Screen
           name="Chat"
           component={MainStackScreen}
-          initialParams={{ screenType: ScreenType.Chat }}
+          initialParams={{screenType: ScreenType.Chat}}
         />
         <Tabs.Screen
           name="Upload"
           component={MainStackScreen}
-          initialParams={{ screenType: ScreenType.Upload }}
+          initialParams={{screenType: ScreenType.Upload}}
         />
         <Tabs.Screen
           name="Notifications"
           component={MainStackScreen}
-          initialParams={{ screenType: ScreenType.Notifications }}
+          initialParams={{screenType: ScreenType.Notifications}}
           listeners={{
             tabPress: (_) => {
               // Closes the pill once this screen has been opened
@@ -114,7 +120,7 @@ const NavigationBar: React.FC = () => {
         <Tabs.Screen
           name="Profile"
           component={MainStackScreen}
-          initialParams={{ screenType: ScreenType.Profile }}
+          initialParams={{screenType: ScreenType.Profile}}
         />
       </Tabs.Navigator>
     </>