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.

5 files changed, 93 insertions, 83 deletions

diff --git a/src/assets/navigationIcons/new-upload.png b/src/assets/navigationIcons/new-upload.png
new file mode 100644
index 00000000..f6a5487c
--- /dev/null
+++ b/src/assets/navigationIcons/new-upload.png
diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index 5128f3da..f97bb861 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -18,6 +18,7 @@ interface NavigationIconProps extends TouchableOpacityProps {
     | 'Chat';
   disabled?: boolean;
   newIcon?: boolean;
+  isBigger?: boolean;
 }
 
 const NavigationIcon = (props: NavigationIconProps) => {
@@ -35,7 +36,7 @@ const NavigationIcon = (props: NavigationIconProps) => {
       break;
     case 'Upload':
       imgSrc = props.disabled
-        ? require('../../assets/navigationIcons/upload.png')
+        ? require('../../assets/navigationIcons/new-upload.png')
         : require('../../assets/navigationIcons/upload-clicked.png');
       break;
     case 'Notifications':
@@ -68,12 +69,22 @@ const NavigationIcon = (props: NavigationIconProps) => {
   return (
     <View style={styles.container}>
       <TouchableOpacity {...props}>
-        <Image source={imgSrc} style={styles.icon} />
+        <Image source={imgSrc} style={getStyles(props.isBigger ?? false)} />
       </TouchableOpacity>
     </View>
   );
 };
 
+const getStyles = (isBigger: boolean) =>
+  isBigger ? biggerIconStyles.icon : styles.icon;
+
+const biggerIconStyles = StyleSheet.create({
+  icon: {
+    height: 44,
+    width: 44,
+  },
+});
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -87,8 +98,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.4,
   },
   icon: {
-    height: 30,
-    width: 30,
+    height: 28,
+    width: 28,
   },
 });
 
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 2e1f5251..e19df2c2 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -1,8 +1,8 @@
-import { RouteProp } from '@react-navigation/native';
-import { StackNavigationOptions } from '@react-navigation/stack';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import { StyleSheet, Text } from 'react-native';
-import { normalize } from 'react-native-elements';
+import {StyleSheet, Text} from 'react-native';
+import {normalize} from 'react-native-elements';
 import BackIcon from '../../assets/icons/back-arrow.svg';
 import {
   AccountType,
@@ -37,10 +37,10 @@ import {
   CameraScreen,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
-import { ScreenType } from '../../types';
-import { AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH } from '../../utils';
-import { MainStack, MainStackParams } from './MainStackNavigator';
-import { ZoomInCropper } from '../../components/comments/ZoomInCropper';
+import {ScreenType} from '../../types';
+import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils';
+import {MainStack, MainStackParams} from './MainStackNavigator';
+import {ZoomInCropper} from '../../components/comments/ZoomInCropper';
 
 /**
  * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited.
@@ -57,8 +57,8 @@ type MainStackRouteProps = RouteProp<MainStackParams, 'Profile'>;
 interface MainStackProps {
   route: MainStackRouteProps;
 }
-const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
-  const { screenType } = route.params;
+const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
+  const {screenType} = route.params;
 
   // const isSearchTab = screenType === ScreenType.Search;
   const isNotificationsTab = screenType === ScreenType.Notifications;
@@ -84,10 +84,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
   })();
 
   const tutorialModalStyle: StackNavigationOptions = {
-    cardStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
+    cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
     gestureDirection: 'vertical',
     cardOverlayEnabled: true,
-    cardStyleInterpolator: ({ current: { progress } }) => ({
+    cardStyleInterpolator: ({current: {progress}}) => ({
       cardStyle: {
         opacity: progress.interpolate({
           inputRange: [0, 0.5, 0.9, 1],
@@ -98,7 +98,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
   };
 
   const newChatModalStyle: StackNavigationOptions = {
-    cardStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
+    cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
     cardOverlayEnabled: true,
     animationEnabled: false,
   };
@@ -121,14 +121,14 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
       <MainStack.Navigator
         screenOptions={{
           headerShown: false,
-          gestureResponseDistance: { horizontal: SCREEN_WIDTH * 0.6 },
+          gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6},
         }}
         mode="card"
         initialRouteName={initialRouteName}>
         <MainStack.Screen
           name="Profile"
           component={ProfileScreen}
-          initialParams={{ screenType }}
+          initialParams={{screenType}}
           options={{
             ...headerBarOptions('white', ''),
           }}
@@ -137,21 +137,21 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
           <MainStack.Screen
             name="SuggestedPeople"
             component={SuggestedPeopleScreen}
-            initialParams={{ screenType }}
+            initialParams={{screenType}}
           />
         )}
         {isNotificationsTab && (
           <MainStack.Screen
             name="Notifications"
             component={NotificationsScreen}
-            initialParams={{ screenType }}
+            initialParams={{screenType}}
           />
         )}
         {isUploadTab && (
           <MainStack.Screen
             name="Upload"
             component={CameraScreen}
-            initialParams={{ screenType }}
+            initialParams={{screenType}}
           />
         )}
         <MainStack.Screen
@@ -188,7 +188,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
           options={{
             ...tutorialModalStyle,
           }}
-          initialParams={{ screenType }}
+          initialParams={{screenType}}
         />
         <MainStack.Screen
           name="CaptionScreen"
@@ -201,10 +201,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
         <MainStack.Screen
           name="SocialMediaTaggs"
           component={SocialMediaTaggs}
-          initialParams={{ screenType }}
+          initialParams={{screenType}}
           options={{
             ...headerBarOptions('white', ''),
-            headerStyle: { height: AvatarHeaderHeight },
+            headerStyle: {height: AvatarHeaderHeight},
           }}
         />
         <MainStack.Screen
@@ -224,7 +224,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
         <MainStack.Screen
           name="IndividualMoment"
           component={IndividualMoment}
-          initialParams={{ screenType }}
+          initialParams={{screenType}}
           options={{
             ...modalStyle,
             gestureEnabled: false,
@@ -234,7 +234,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
         <MainStack.Screen
           name="MomentCommentsScreen"
           component={MomentCommentsScreen}
-          initialParams={{ screenType }}
+          initialParams={{screenType}}
           options={{
             ...headerBarOptions('black', 'Comments'),
           }}
@@ -249,7 +249,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
         <MainStack.Screen
           name="MomentUploadPrompt"
           component={MomentUploadPromptScreen}
-          initialParams={{ screenType }}
+          initialParams={{screenType}}
           options={{
             ...modalStyle,
           }}
@@ -257,7 +257,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
         <MainStack.Screen
           name="FriendsListScreen"
           component={FriendsListScreen}
-          initialParams={{ screenType }}
+          initialParams={{screenType}}
           options={{
             ...headerBarOptions('black', 'Friends'),
           }}
@@ -272,7 +272,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
         <MainStack.Screen
           name="RequestContactsAccess"
           component={RequestContactsAccess}
-          initialParams={{ screenType }}
+          initialParams={{screenType}}
           options={{
             ...modalStyle,
             gestureEnabled: false,
@@ -288,7 +288,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
         <MainStack.Screen
           name="UpdateSPPicture"
           component={SuggestedPeopleUploadPictureScreen}
-          initialParams={{ editing: true }}
+          initialParams={{editing: true}}
           options={{
             ...headerBarOptions('white', ''),
           }}
@@ -296,7 +296,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
         <MainStack.Screen
           name="BadgeSelection"
           component={BadgeSelection}
-          initialParams={{ editing: true }}
+          initialParams={{editing: true}}
           options={{
             ...headerBarOptions('white', ''),
           }}
@@ -304,7 +304,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
         <MainStack.Screen
           name="MutualBadgeHolders"
           component={MutualBadgeHolders}
-          options={{ ...modalStyle }}
+          options={{...modalStyle}}
         />
         <MainStack.Screen
           name="SPWelcomeScreen"
@@ -316,20 +316,20 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
         <MainStack.Screen
           name="ChatList"
           component={ChatListScreen}
-          options={{ headerTitle: 'Chats' }}
+          options={{headerTitle: 'Chats'}}
         />
         <MainStack.Screen
           name="Chat"
           component={ChatScreen}
           options={{
             ...headerBarOptions('black', ''),
-            headerStyle: { height: ChatHeaderHeight },
+            headerStyle: {height: ChatHeaderHeight},
           }}
         />
         <MainStack.Screen
           name="NewChatModal"
           component={NewChatModal}
-          options={{ headerShown: false, ...newChatModalStyle }}
+          options={{headerShown: false, ...newChatModalStyle}}
         />
         <MainStack.Screen
           name="TagSelectionScreen"
@@ -361,13 +361,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
             gestureEnabled: false,
           }}
         />
-        <MainStack.Screen
-          name="CameraScreen"
-          component={CameraScreen}
-          options={{
-            gestureEnabled: false,
-          }}
-        />
       </MainStack.Navigator>
     );
   };
@@ -397,8 +390,8 @@ export const headerBarOptions: (
     <Text
       style={[
         styles.headerTitle,
-        { color: color },
-        { fontSize: title.length > 18 ? normalize(14) : normalize(16) },
+        {color: color},
+        {fontSize: title.length > 18 ? normalize(14) : normalize(16)},
       ]}>
       {title}
     </Text>
@@ -406,10 +399,10 @@ export const headerBarOptions: (
 });
 
 export const modalStyle: StackNavigationOptions = {
-  cardStyle: { backgroundColor: 'rgba(80,80,80,0.6)' },
+  cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'},
   gestureDirection: 'vertical',
   cardOverlayEnabled: true,
-  cardStyleInterpolator: ({ current: { progress } }) => ({
+  cardStyleInterpolator: ({current: {progress}}) => ({
     cardStyle: {
       opacity: progress.interpolate({
         inputRange: [0, 0.5, 0.9, 1],
@@ -427,7 +420,7 @@ const styles = StyleSheet.create({
     shadowColor: 'black',
     shadowRadius: 3,
     shadowOpacity: 0.7,
-    shadowOffset: { width: 0, height: 0 },
+    shadowOffset: {width: 0, height: 0},
   },
   headerTitle: {
     letterSpacing: normalize(1.3),
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>
     </>
diff --git a/src/types/types.ts b/src/types/types.ts
index eb5c2fa4..5f70d1f8 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -1,6 +1,6 @@
-import { ImageSourcePropType } from 'react-native';
+import {ImageSourcePropType} from 'react-native';
 import Animated from 'react-native-reanimated';
-import { Channel as ChannelType, StreamChat } from 'stream-chat';
+import {Channel as ChannelType, StreamChat} from 'stream-chat';
 
 export interface UserType {
   userId: string;
@@ -171,7 +171,7 @@ export enum ScreenType {
   Notifications,
   SuggestedPeople,
   Chat,
-  Upload
+  Upload,
 }
 
 /**
@@ -237,10 +237,10 @@ export type NotificationType = {
   verbage: string;
   notification_type: TypeOfNotification;
   notification_object:
-  | CommentNotificationType
-  | ThreadNotificationType
-  | MomentType
-  | undefined;
+    | CommentNotificationType
+    | ThreadNotificationType
+    | MomentType
+    | undefined;
   timestamp: string;
   unread: boolean;
 };
@@ -344,14 +344,14 @@ export type ChatContextType = {
   setChannel: React.Dispatch<
     React.SetStateAction<
       | ChannelType<
-        LocalAttachmentType,
-        LocalChannelType,
-        LocalCommandType,
-        LocalEventType,
-        LocalMessageType,
-        LocalResponseType,
-        LocalUserType
-      >
+          LocalAttachmentType,
+          LocalChannelType,
+          LocalCommandType,
+          LocalEventType,
+          LocalMessageType,
+          LocalResponseType,
+          LocalUserType
+        >
       | undefined
     >
   >;