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.

1 files changed, 60 insertions, 43 deletions

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),