refactored styles in main stack

1 files changed, 27 insertions, 54 deletions

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 0141a418..b8b471c2 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -67,20 +67,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],
-        }),
-      },
-    }),
-  };
-
   return (
     <MainStack.Navigator
       screenOptions={{
@@ -92,16 +78,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 &&
@@ -128,62 +107,42 @@ 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"
@@ -196,10 +155,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       <MainStack.Screen
         name="MomentUploadPrompt"
         component={MomentUploadPromptScreen}
+        initialParams={{screenType}}
         options={{
           ...modalStyle,
         }}
-        initialParams={{screenType}}
       />
       <MainStack.Screen
         name="FriendsListScreen"
@@ -240,6 +199,20 @@ export const headerBarOptions: (
   ),
 });
 
+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,