Removed the search icon from the navigation bar and replaced it with the upload icon (along with the corresponding routing). Small tweaks on navigation and design will be needed. Commented out the code for navigation to search page - should be deleted soon.

3 files changed, 93 insertions, 74 deletions

diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index ef3fc7fd..ed3863b3 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -1,8 +1,8 @@
 /**
  * Note the name userXId here, it refers to the id of the user being visited
  */
-import {createStackNavigator} from '@react-navigation/stack';
-import {Image} from 'react-native-image-crop-picker';
+import { createStackNavigator } from '@react-navigation/stack';
+import { Image } from 'react-native-image-crop-picker';
 import {
   CommentBaseType,
   MomentTagType,
@@ -15,9 +15,13 @@ export type MainStackParams = {
   SuggestedPeople: {
     screenType: ScreenType;
   };
+  /*
   Search: {
     screenType: ScreenType;
-  };
+  }; */
+  Upload: {
+    screenType: ScreenType;
+  }
   RequestContactsAccess: {
     screenType: ScreenType;
   };
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index f6adeab1..e1ad8aa9 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,
@@ -26,7 +26,7 @@ import {
   PrivacyScreen,
   ProfileScreen,
   RequestContactsAccess,
-  SearchScreen,
+  // SearchScreen,
   SettingsScreen,
   SocialMediaTaggs,
   SuggestedPeopleScreen,
@@ -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,33 +57,37 @@ 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 isSearchTab = screenType === ScreenType.Search;
   const isNotificationsTab = screenType === ScreenType.Notifications;
   const isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople;
+  const isUploadTab = screenType === ScreenType.Upload;
 
   const initialRouteName = (() => {
     switch (screenType) {
       case ScreenType.Profile:
         return 'Profile';
+      /*
       case ScreenType.Search:
-        return 'Search';
+        return 'Search'; */
       case ScreenType.Notifications:
         return 'Notifications';
       case ScreenType.SuggestedPeople:
         return 'SuggestedPeople';
       case ScreenType.Chat:
         return 'ChatList';
+      case ScreenType.Upload:
+        return 'Upload';
     }
   })();
 
   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],
@@ -94,24 +98,37 @@ 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,
   };
 
+  /*
+  Following was removed to eliminate search screen naviagtion
+
+  {isSearchTab && (
+    <MainStack.Screen
+      name="Search"
+      component={SearchScreen}
+      initialParams={{ screenType }}
+    />
+  )}
+
+  */
+
   const mainStackScreen = () => {
     return (
       <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', ''),
           }}
@@ -120,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 }}
           />
         )}
-        {isSearchTab && (
+        {isUploadTab && (
           <MainStack.Screen
-            name="Search"
-            component={SearchScreen}
-            initialParams={{screenType}}
+            name="Upload"
+            component={CameraScreen}
+            initialParams={{ screenType }}
           />
         )}
         <MainStack.Screen
@@ -171,7 +188,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           options={{
             ...tutorialModalStyle,
           }}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
         />
         <MainStack.Screen
           name="CaptionScreen"
@@ -184,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
@@ -207,7 +224,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="IndividualMoment"
           component={IndividualMoment}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...modalStyle,
             gestureEnabled: false,
@@ -217,7 +234,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="MomentCommentsScreen"
           component={MomentCommentsScreen}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...headerBarOptions('black', 'Comments'),
           }}
@@ -232,7 +249,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="MomentUploadPrompt"
           component={MomentUploadPromptScreen}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...modalStyle,
           }}
@@ -240,7 +257,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="FriendsListScreen"
           component={FriendsListScreen}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...headerBarOptions('black', 'Friends'),
           }}
@@ -255,7 +272,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="RequestContactsAccess"
           component={RequestContactsAccess}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...modalStyle,
             gestureEnabled: false,
@@ -271,7 +288,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="UpdateSPPicture"
           component={SuggestedPeopleUploadPictureScreen}
-          initialParams={{editing: true}}
+          initialParams={{ editing: true }}
           options={{
             ...headerBarOptions('white', ''),
           }}
@@ -279,7 +296,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="BadgeSelection"
           component={BadgeSelection}
-          initialParams={{editing: true}}
+          initialParams={{ editing: true }}
           options={{
             ...headerBarOptions('white', ''),
           }}
@@ -287,7 +304,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="MutualBadgeHolders"
           component={MutualBadgeHolders}
-          options={{...modalStyle}}
+          options={{ ...modalStyle }}
         />
         <MainStack.Screen
           name="SPWelcomeScreen"
@@ -299,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"
@@ -371,8 +388,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>
@@ -380,10 +397,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],
@@ -401,7 +418,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 c3a42739..f8b94470 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,13 +41,13 @@ 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 'Search':
-                return <NavigationIcon tab="Search" disabled={!focused} />;
+              case 'Chat':
+                return <NavigationIcon tab="Chat" disabled={!focused} />;
               case 'Upload':
                 return <NavigationIcon tab="Upload" disabled={!focused} />;
               case 'Notifications':
@@ -60,8 +60,6 @@ const NavigationBar: React.FC = () => {
                     disabled={!focused}
                   />
                 );
-              case 'Chat':
-                return <NavigationIcon tab="Chat" disabled={!focused} />;
               case 'Profile':
                 return <NavigationIcon tab="Profile" disabled={!focused} />;
               case 'SuggestedPeople':
@@ -88,17 +86,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 }}
         />
         <Tabs.Screen
-          name="Search"
+          name="Upload"
           component={MainStackScreen}
-          initialParams={{screenType: ScreenType.Search}}
+          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
@@ -109,14 +112,9 @@ const NavigationBar: React.FC = () => {
           }}
         />
         <Tabs.Screen
-          name="Chat"
-          component={MainStackScreen}
-          initialParams={{screenType: ScreenType.Chat}}
-        />
-        <Tabs.Screen
           name="Profile"
           component={MainStackScreen}
-          initialParams={{screenType: ScreenType.Profile}}
+          initialParams={{ screenType: ScreenType.Profile }}
         />
       </Tabs.Navigator>
     </>