Merge branch 'master' into tma255-taggs-bar

# Conflicts:
#	src/components/common/SocialLinkModal.tsx

1 files changed, 80 insertions, 60 deletions

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 37f9bef8..99446432 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -2,6 +2,9 @@ import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React, {useState} from 'react';
+import {StyleSheet, Text} from 'react-native';
+import {normalize} from 'react-native-elements';
+import BackIcon from '../../assets/icons/back-arrow.svg';
 import {
   CaptionScreen,
   CategorySelection,
@@ -67,21 +70,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     }
   })();
 
-  const modalStyle: StackNavigationOptions = {
-    cardStyle: {backgroundColor: 'rgba(80,80,80,0.9)'},
-    gestureDirection: 'vertical',
-    cardOverlayEnabled: true,
-    cardStyleInterpolator: ({current: {progress}}) => ({
-      cardStyle: {
-        opacity: progress.interpolate({
-          inputRange: [0, 0.5, 0.9, 1],
-          outputRange: [0, 0.25, 0.7, 1],
-        }),
-      },
-    }),
-  };
-
-  console.log('screenType: ', screenType);
   return (
     <MainStack.Navigator
       screenOptions={{
@@ -93,16 +81,9 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       <MainStack.Screen
         name="Profile"
         component={ProfileScreen}
+        initialParams={{screenType}}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTitle: '',
-          headerTintColor: 'white',
-          headerStyle: {height: AvatarHeaderHeight},
-        }}
-        initialParams={{
-          screenType,
+          ...headerBarOptions('white', ''),
         }}
       />
       {isSearchTab &&
@@ -136,94 +117,133 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       <MainStack.Screen
         name="CaptionScreen"
         component={CaptionScreen}
-        options={{...modalStyle, gestureEnabled: false}}
+        options={{
+          ...modalStyle,
+          gestureEnabled: false,
+        }}
       />
       <MainStack.Screen
         name="SocialMediaTaggs"
         component={SocialMediaTaggs}
+        initialParams={{screenType}}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTitle: '',
-          headerTintColor: 'white',
+          ...headerBarOptions('white', ''),
           headerStyle: {height: AvatarHeaderHeight},
         }}
-        initialParams={{screenType}}
       />
       <MainStack.Screen
         name="CategorySelection"
         component={CategorySelection}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTintColor: 'white',
-          headerTitle: '',
+          ...headerBarOptions('white', ''),
         }}
       />
       <MainStack.Screen
         name="CreateCustomCategory"
         component={CreateCustomCategory}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTintColor: 'white',
-          headerTitle: '',
+          ...headerBarOptions('white', ''),
         }}
       />
       <MainStack.Screen
         name="IndividualMoment"
         component={IndividualMoment}
+        initialParams={{screenType}}
         options={{
+          ...modalStyle,
           gestureEnabled: false,
-          cardStyle: {
-            backgroundColor: 'rgba(0, 0, 0, 0.6)',
-          },
-          cardOverlayEnabled: true,
-          cardStyleInterpolator: ({current: {progress}}) => ({
-            cardStyle: {
-              opacity: progress.interpolate({
-                inputRange: [0, 0.5, 0.9, 1],
-                outputRange: [0, 0.25, 0.7, 1],
-              }),
-            },
-          }),
         }}
-        initialParams={{screenType}}
       />
       <MainStack.Screen
         name="MomentCommentsScreen"
         component={MomentCommentsScreen}
         initialParams={{screenType}}
+        options={{
+          ...headerBarOptions('black', 'Comments'),
+        }}
       />
       <MainStack.Screen
         name="MomentUploadPrompt"
         component={MomentUploadPromptScreen}
+        initialParams={{screenType}}
         options={{
           ...modalStyle,
         }}
-        initialParams={{screenType}}
       />
       <MainStack.Screen
         name="FriendsListScreen"
         component={FriendsListScreen}
         initialParams={{screenType}}
+        options={{
+          ...headerBarOptions('black', 'Friends'),
+        }}
       />
       <MainStack.Screen
         name="EditProfile"
         component={EditProfile}
         options={{
-          headerShown: true,
-          headerTitle: 'Edit Profile',
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTintColor: 'white',
+          ...headerBarOptions('white', 'Edit Profile'),
         }}
       />
     </MainStack.Navigator>
   );
 };
 
+export const headerBarOptions: (
+  color: 'white' | 'black',
+  title: string,
+) => StackNavigationOptions = (color, title) => ({
+  headerShown: true,
+  headerTransparent: true,
+  headerBackTitleVisible: false,
+  headerBackImage: () => (
+    <BackIcon
+      height={normalize(18)}
+      width={normalize(18)}
+      color={color}
+      style={styles.backButton}
+    />
+  ),
+  headerTitle: () => (
+    <Text style={[styles.headerTitle, {color: color}]}>{title}</Text>
+  ),
+});
+
+const modalStyle: StackNavigationOptions = {
+  cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'},
+  gestureDirection: 'vertical',
+  cardOverlayEnabled: true,
+  cardStyleInterpolator: ({current: {progress}}) => ({
+    cardStyle: {
+      opacity: progress.interpolate({
+        inputRange: [0, 0.5, 0.9, 1],
+        outputRange: [0, 0.25, 0.7, 1],
+      }),
+    },
+  }),
+};
+
+const styles = StyleSheet.create({
+  backButton: {
+    marginLeft: 30,
+  },
+  headerTitle: {
+    fontSize: normalize(16),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+  },
+  whiteHeaderTitle: {
+    fontSize: normalize(16),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+    color: 'white',
+  },
+  blackHeaderTitle: {
+    fontSize: normalize(16),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+    color: 'black',
+  },
+});
+
 export default MainStackScreen;