Tma235/231 Individual view and horizontal view (#59)

* Implemented modal stack navigation for moment view, created a rough UI for individual moment view [incl: title, image(not displayed)]

* bare bones beginnning

* Created individual moment screen, moment tile for horizontal view

* Alert

* Fix initial route

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>
Co-authored-by: Ashm Walia <40498934+ashmgarv@users.noreply.github.com>

4 files changed, 63 insertions, 1 deletions

diff --git a/src/routes/profile/MomentStack.tsx b/src/routes/profile/MomentStack.tsx
new file mode 100644
index 00000000..83853c99
--- /dev/null
+++ b/src/routes/profile/MomentStack.tsx
@@ -0,0 +1,11 @@
+import {createStackNavigator} from '@react-navigation/stack';
+import {MomentType} from '../../types';
+
+export type MomentStackParams = {
+  Profile: undefined;
+  IndividualMoment: {
+    moment: MomentType;
+  };
+};
+
+export const MomentStack = createStackNavigator<MomentStackParams>();
diff --git a/src/routes/profile/MomentStackScreen.tsx b/src/routes/profile/MomentStackScreen.tsx
new file mode 100644
index 00000000..8768199a
--- /dev/null
+++ b/src/routes/profile/MomentStackScreen.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {IndividualMoment} from '../../screens';
+import {MomentStack} from './MomentStack';
+import Profile from './Profile';
+
+const MomentStackScreen: React.FC = () => {
+  return (
+    <MomentStack.Navigator
+      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',
+            }),
+          },
+        }),
+      }}
+      initialRouteName="Profile"
+      mode="modal">
+      <MomentStack.Screen
+        name="Profile"
+        component={Profile}
+        options={{headerShown: false}}
+      />
+      <MomentStack.Screen
+        name="IndividualMoment"
+        component={IndividualMoment}
+        options={{headerShown: false}}
+      />
+    </MomentStack.Navigator>
+  );
+};
+
+export default MomentStackScreen;
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx
index 63ab9a10..df4d234f 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStack.tsx
@@ -10,7 +10,10 @@ export type ProfileStackParams = {
     socialMediaHandle: string;
     isProfileView: boolean;
   };
-  CaptionScreen: {title: string; image: object};
+  CaptionScreen: {
+    title: string;
+    image: object;
+  };
 };
 
 export const ProfileStack = createStackNavigator<ProfileStackParams>();
diff --git a/src/routes/profile/index.ts b/src/routes/profile/index.ts
index 367f4cc6..1ab9cb7e 100644
--- a/src/routes/profile/index.ts
+++ b/src/routes/profile/index.ts
@@ -1,2 +1,4 @@
 export * from './ProfileStack';
+export * from './MomentStack';
+export * from './MomentStackScreen';
 export {default} from './Profile';