1 files changed, 37 insertions, 8 deletions
diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx
index b39b726e..363e9e21 100644
--- a/src/routes/profile/Profile.tsx
+++ b/src/routes/profile/Profile.tsx
@@ -1,29 +1,52 @@
 import React from 'react';
 import {
-  ProfileScreen,
+  IndividualMoment,
   CaptionScreen,
   SocialMediaTaggs,
   SearchScreen,
+  ProfileScreen,
 } from '../../screens';
-import {RouteProp} from '@react-navigation/native';
 import {ProfileStack, ProfileStackParams} from './ProfileStack';
+import {RouteProp} from '@react-navigation/native';
 import {AvatarTitle} from '../../components';
 
-type ProfileScreenRouteProps = RouteProp<ProfileStackParams, 'Profile'>;
+type ProfileStackRouteProps = RouteProp<ProfileStackParams, 'Profile'>;
 
-interface ProfileScreenProps {
-  route: ProfileScreenRouteProps;
+interface ProfileStackProps {
+  route: ProfileStackRouteProps;
 }
 
-const Profile: React.FC<ProfileScreenProps> = ({route}) => {
+const Profile: React.FC<ProfileStackProps> = ({route}) => {
   const {isProfileView} = route.params;
   return (
     <ProfileStack.Navigator
-      initialRouteName={!isProfileView ? `Profile` : `Search`}
-      screenOptions={{headerShown: false}}>
+      screenOptions={{
+        headerShown: false,
+        cardStyle: {backgroundColor: 'transparent'},
+        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: '#808080',
+            opacity: progress.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 0.9],
+              extrapolate: 'clamp',
+            }),
+          },
+        }),
+      }}
+      mode="modal"
+      initialRouteName={!isProfileView ? `Profile` : `Search`}>
       <ProfileStack.Screen
         name="Profile"
         component={ProfileScreen}
+        options={{headerShown: false}}
         initialParams={{isProfileView: isProfileView}}
       />
       {isProfileView ? (
@@ -47,6 +70,12 @@ const Profile: React.FC<ProfileScreenProps> = ({route}) => {
       ) : (
         <React.Fragment />
       )}
+      <ProfileStack.Screen
+        name="IndividualMoment"
+        component={IndividualMoment}
+        options={{headerShown: false}}
+        initialParams={{isProfileView: isProfileView}}
+      />
     </ProfileStack.Navigator>
   );
 };