[TMA-447] Natural Transitions (#145)

* edit profile text now is back to black

* changed default style to card and added custom modal transitions

* resolved linter error

1 files changed, 166 insertions, 0 deletions

diff --git a/src/routes/profile/ProfileStackScreen.tsx b/src/routes/profile/ProfileStackScreen.tsx
new file mode 100644
index 00000000..4fc9f0c7
--- /dev/null
+++ b/src/routes/profile/ProfileStackScreen.tsx
@@ -0,0 +1,166 @@
+import React from 'react';
+import {
+  IndividualMoment,
+  CaptionScreen,
+  SocialMediaTaggs,
+  SearchScreen,
+  ProfileScreen,
+  MomentCommentsScreen,
+  FollowersListScreen,
+  EditProfile,
+  CategorySelection,
+} from '../../screens';
+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)
+ * 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.
+ * Search : To display the search screen. Search for a user on this screen, click on a result tile and navigate to the same.
+ * When you click on the search icon after looking at a user's profile, the stack gets reset and you come back to the top of the stack (First screen : Search in this case)
+ * SocialMediaTaggs : To display user data for any social media account set up by the user.
+ * IndividualMoment : To display individual images uploaded by the user (Navigate to comments from this screen, click on a commenter's profile pic / username, look at a user's profile. Click on the profile icon again to come back to your own profile).
+ * MomentCommentsScreen : Displays comments posted by users on an image uploaded by the user.
+ * EditProfile : To edit logged in user's information.
+ */
+
+type ProfileStackRouteProps = RouteProp<ProfileStackParams, 'Profile'>;
+
+interface ProfileStackProps {
+  route: ProfileStackRouteProps;
+}
+
+const ProfileStackScreen: React.FC<ProfileStackProps> = ({route}) => {
+  const {screenType} = route.params;
+
+  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,
+      }}
+      mode="card"
+      initialRouteName={isProfileStack ? 'Profile' : 'Search'}>
+      <ProfileStack.Screen
+        name="Profile"
+        component={ProfileScreen}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTitle: '',
+          headerTintColor: 'white',
+          headerStyle: {height: AvatarHeaderHeight},
+        }}
+        initialParams={{
+          screenType,
+        }}
+      />
+      {!isProfileStack ? (
+        <ProfileStack.Screen
+          name="Search"
+          component={SearchScreen}
+          initialParams={{screenType}}
+        />
+      ) : (
+        <React.Fragment />
+      )}
+      <ProfileStack.Screen
+        name="SocialMediaTaggs"
+        component={SocialMediaTaggs}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTitle: '',
+          headerTintColor: 'white',
+          headerStyle: {height: AvatarHeaderHeight},
+        }}
+        initialParams={{screenType}}
+      />
+      <ProfileStack.Screen
+        name="CategorySelection"
+        component={CategorySelection}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTintColor: 'white',
+          headerTitle: '',
+        }}
+      />
+      {isProfileStack ? (
+        <ProfileStack.Screen
+          name="CaptionScreen"
+          component={CaptionScreen}
+          options={{...modalStyle, gestureEnabled: false}}
+        />
+      ) : (
+        <React.Fragment />
+      )}
+      <ProfileStack.Screen
+        name="IndividualMoment"
+        component={IndividualMoment}
+        options={{
+          ...modalStyle,
+        }}
+        initialParams={{screenType}}
+      />
+      <ProfileStack.Screen
+        name="MomentCommentsScreen"
+        component={MomentCommentsScreen}
+        options={{
+          ...modalStyle,
+        }}
+        initialParams={{screenType}}
+      />
+      <ProfileStack.Screen
+        name="FollowersListScreen"
+        component={FollowersListScreen}
+        options={{
+          ...modalStyle,
+        }}
+        initialParams={{screenType}}
+      />
+      <ProfileStack.Screen
+        name="EditProfile"
+        component={EditProfile}
+        options={{
+          headerShown: true,
+          headerTitle: 'Edit Profile',
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTintColor: 'white',
+        }}
+      />
+    </ProfileStack.Navigator>
+  );
+};
+
+export default ProfileStackScreen;