4 files changed, 50 insertions, 35 deletions
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStackNavigator.tsx
index bc0a9560..bc0a9560 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStackNavigator.tsx
diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/ProfileStackScreen.tsx
index 4c93b1ee..4fc9f0c7 100644
--- a/src/routes/profile/Profile.tsx
+++ b/src/routes/profile/ProfileStackScreen.tsx
@@ -10,9 +10,11 @@ import {
   EditProfile,
   CategorySelection,
 } from '../../screens';
-import {ProfileStack, ProfileStackParams} from './ProfileStack';
+import {ProfileStack, ProfileStackParams} from './ProfileStackNavigator';
 import {RouteProp} from '@react-navigation/native';
 import {ScreenType} from '../../types';
+import {AvatarHeaderHeight} from '../../utils';
+import {StackNavigationOptions} from '@react-navigation/stack';
 
 /**
  * Trying to explain the purpose of each route on the stack (ACTUALLY A STACK)
@@ -31,42 +33,51 @@ interface ProfileStackProps {
   route: ProfileStackRouteProps;
 }
 
-const Profile: React.FC<ProfileStackProps> = ({route}) => {
+const ProfileStackScreen: React.FC<ProfileStackProps> = ({route}) => {
   const {screenType} = route.params;
 
-  /**
-   * This parameter isProfileStack acts as a switch between Search and Profile Stacks
-   */
   const isProfileStack = screenType === ScreenType.Profile;
+
+  const modalStyle: StackNavigationOptions = {
+    cardStyle: {backgroundColor: 'transparent'},
+    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],
+        }),
+      },
+      overlayStyle: {
+        backgroundColor: '#505050',
+        opacity: progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, 0.9],
+          extrapolate: 'clamp',
+        }),
+      },
+    }),
+  };
+
   return (
     <ProfileStack.Navigator
       screenOptions={{
         headerShown: false,
-        cardStyle: {backgroundColor: 'white'},
-        cardOverlayEnabled: true,
-        cardStyleInterpolator: ({current: {progress}}) => ({
-          cardStyle: {
-            opacity: progress.interpolate({
-              inputRange: [0, 0.5, 0.9, 1],
-              outputRange: [0, 0.25, 0.7, 1],
-            }),
-          },
-          overlayStyle: {
-            backgroundColor: '#505050',
-            opacity: progress.interpolate({
-              inputRange: [0, 1],
-              outputRange: [0, 0.9],
-              extrapolate: 'clamp',
-            }),
-          },
-        }),
       }}
-      mode="modal"
+      mode="card"
       initialRouteName={isProfileStack ? 'Profile' : 'Search'}>
       <ProfileStack.Screen
         name="Profile"
         component={ProfileScreen}
-        options={{headerShown: false}}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTitle: '',
+          headerTintColor: 'white',
+          headerStyle: {height: AvatarHeaderHeight},
+        }}
         initialParams={{
           screenType,
         }}
@@ -87,7 +98,9 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
           headerShown: true,
           headerTransparent: true,
           headerBackTitleVisible: false,
+          headerTitle: '',
           headerTintColor: 'white',
+          headerStyle: {height: AvatarHeaderHeight},
         }}
         initialParams={{screenType}}
       />
@@ -103,7 +116,11 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
         }}
       />
       {isProfileStack ? (
-        <ProfileStack.Screen name="CaptionScreen" component={CaptionScreen} />
+        <ProfileStack.Screen
+          name="CaptionScreen"
+          component={CaptionScreen}
+          options={{...modalStyle, gestureEnabled: false}}
+        />
       ) : (
         <React.Fragment />
       )}
@@ -111,8 +128,7 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
         name="IndividualMoment"
         component={IndividualMoment}
         options={{
-          headerShown: false,
-          cardStyle: {backgroundColor: 'transparent'},
+          ...modalStyle,
         }}
         initialParams={{screenType}}
       />
@@ -120,8 +136,7 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
         name="MomentCommentsScreen"
         component={MomentCommentsScreen}
         options={{
-          headerShown: false,
-          cardStyle: {backgroundColor: 'transparent'},
+          ...modalStyle,
         }}
         initialParams={{screenType}}
       />
@@ -129,7 +144,7 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
         name="FollowersListScreen"
         component={FollowersListScreen}
         options={{
-          cardStyle: {backgroundColor: 'transparent'},
+          ...modalStyle,
         }}
         initialParams={{screenType}}
       />
@@ -148,4 +163,4 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
   );
 };
 
-export default Profile;
+export default ProfileStackScreen;
diff --git a/src/routes/profile/index.ts b/src/routes/profile/index.ts
index eed5c6b4..05a6b24a 100644
--- a/src/routes/profile/index.ts
+++ b/src/routes/profile/index.ts
@@ -1,2 +1,2 @@
-export * from './ProfileStack';
-export * from './Profile';
+export * from './ProfileStackNavigator';
+export * from './ProfileStackScreen';
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index e6c30134..f3043696 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -2,7 +2,7 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import React, {Fragment} from 'react';
 import {NavigationIcon} from '../../components';
 import {ScreenType} from '../../types';
-import Profile from '../profile/Profile';
+import Profile from '../profile/ProfileStackScreen';
 
 const Tabs = createBottomTabNavigator();