1 files changed, 42 insertions, 7 deletions
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 064e9725..64060554 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -2,25 +2,28 @@ 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 BackIcon from '../../assets/icons/back-arrow.svg';
 import {
   AccountType,
   AnimatedTutorial,
   BadgeSelection,
+  CameraScreen,
   CaptionScreen,
   CategorySelection,
   ChatListScreen,
   ChatScreen,
+  ChoosingCategoryScreen,
   CommentReactionScreen,
   CreateCustomCategory,
   DiscoverUsers,
+  EditMedia,
   EditProfile,
   FriendsListScreen,
   IndividualMoment,
   InviteFriendsScreen,
   MomentCommentsScreen,
   MomentUploadPromptScreen,
+  MutualBadgeHolders,
   NewChatModal,
   NotificationsScreen,
   PrivacyScreen,
@@ -31,16 +34,17 @@ import {
   SuggestedPeopleScreen,
   SuggestedPeopleUploadPictureScreen,
   SuggestedPeopleWelcomeScreen,
-  TagSelectionScreen,
   TagFriendsScreen,
-  CameraScreen,
-  EditMedia,
+  TagSelectionScreen,
 } from '../../screens';
-import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
-import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils';
+import {
+  AvatarHeaderHeight,
+  ChatHeaderHeight,
+  normalize,
+  SCREEN_WIDTH,
+} from '../../utils';
 import {MainStack, MainStackParams} from './MainStackNavigator';
-import ChoosingCategoryScreen from '../../screens/profile/ChoosingCategoryScreen';
 
 /**
  * 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.
@@ -378,6 +382,7 @@ export const headerBarOptions: (
   ),
   headerTitle: () => (
     <Text
+      numberOfLines={1}
       style={[
         styles.headerTitle,
         {color: color},
@@ -388,6 +393,23 @@ export const headerBarOptions: (
   ),
 });
 
+export const multilineHeaderTitle: (title: string) => StackNavigationOptions = (
+  title,
+) => ({
+  headerTitle: () => (
+    <Text
+      numberOfLines={3}
+      style={[
+        styles.multilineHeaderTitle,
+        {
+          fontSize: title.length > 18 ? normalize(14) : normalize(16),
+        },
+      ]}>
+      {title}
+    </Text>
+  ),
+});
+
 export const modalStyle: StackNavigationOptions = {
   cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'},
   gestureDirection: 'vertical',
@@ -413,8 +435,21 @@ const styles = StyleSheet.create({
     shadowOffset: {width: 0, height: 0},
   },
   headerTitle: {
+    width: SCREEN_WIDTH * 0.7,
+    textAlign: 'center',
+    lineHeight: normalize(21.48),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+  },
+  multilineHeaderTitle: {
+    width: SCREEN_WIDTH * 0.7,
+    height: normalize(70),
+    marginTop: normalize(90) / 2,
+    textAlign: 'center',
+    lineHeight: normalize(21.48),
     letterSpacing: normalize(1.3),
     fontWeight: '700',
+    color: 'white',
   },
 });