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>

1 files changed, 33 insertions, 0 deletions

diff --git a/src/components/profile/MomentTile.tsx b/src/components/profile/MomentTile.tsx
new file mode 100644
index 00000000..70b20d40
--- /dev/null
+++ b/src/components/profile/MomentTile.tsx
@@ -0,0 +1,33 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
+import {MomentType} from 'src/types';
+
+interface MomentTileProps {
+  moment: MomentType;
+}
+const MomentTile: React.FC<MomentTileProps> = ({moment}) => {
+  const navigation = useNavigation();
+  const {path_hash} = moment;
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        navigation.navigate('IndividualMoment', {moment});
+      }}>
+      <View style={styles.image}>
+        <Image style={styles.image} source={{uri: path_hash}} />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    aspectRatio: 1,
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+});
+export default MomentTile;