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, 37 insertions, 44 deletions

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