[TMA-186] Instagram Taggs - Frontend (#45)

* Renamed Moments(Bar) to Taggs(Bar)

* created initial navigation and empty social media taggs screen

* made more progress for the header styling

* Finished social media taggs screen, organized code structure

* linted stuff D:

* moved bar height utility function to utils

* moved color constants to constants

* moved avatar title

* updated comments for social media taggs

* NOW the file is there

1 files changed, 39 insertions, 0 deletions

diff --git a/src/components/taggs/TaggPost.tsx b/src/components/taggs/TaggPost.tsx
new file mode 100644
index 00000000..73f15268
--- /dev/null
+++ b/src/components/taggs/TaggPost.tsx
@@ -0,0 +1,39 @@
+import moment from 'moment';
+import React from 'react';
+import {Image, StyleSheet, View} from 'react-native';
+import {PostType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
+import TaggPostFooter from './TaggPostFooter';
+
+interface TaggPostProps {
+  post: PostType;
+}
+const TaggPost: React.FC<TaggPostProps> = ({post: {socialHandle, data}}) => {
+  const parsedDate = moment(data?.timestamp || '');
+  const date = parsedDate.isValid() ? parsedDate.format('MMM d') : '';
+
+  return (
+    <>
+      <View style={styles.image}>
+        {data && <Image style={styles.image} source={{uri: data.media_url}} />}
+      </View>
+      <TaggPostFooter
+        // we currently don't have a way to retreive num of likes information
+        likes={109}
+        handle={socialHandle}
+        caption={data?.caption || ''}
+        date={date}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
+    backgroundColor: '#eee',
+  },
+});
+
+export default TaggPost;