[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

4 files changed, 52 insertions, 7 deletions

diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx
new file mode 100644
index 00000000..b6d95bd8
--- /dev/null
+++ b/src/components/common/AvatarTitle.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {Image, StyleSheet} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT } from '../../constants';
+import {AuthContext} from '../../routes/authentication';
+
+/**
+ * An image component that returns the <Image> of the icon for a specific social media platform.
+ */
+const AvatarTitle: React.FC = () => {
+  const {avatar} = React.useContext(AuthContext);
+  return (
+    <LinearGradient
+      colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
+      useAngle={true}
+      angle={154.72}
+      angleCenter={{x: 0.5, y: 0.5}}
+      style={[styles.gradient]}>
+      <Image
+        style={styles.avatar}
+        source={
+          avatar
+            ? {uri: avatar}
+            : require('../../assets/images/avatar-placeholder.png')
+        }
+      />
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradient: {
+    width: AVATAR_GRADIENT_DIM,
+    height: AVATAR_GRADIENT_DIM,
+    borderRadius: AVATAR_GRADIENT_DIM / 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  avatar: {
+    width: AVATAR_DIM,
+    height: AVATAR_DIM,
+    borderRadius: AVATAR_DIM / 2,
+  },
+});
+
+export default AvatarTitle;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index c9c4f27a..4a226c8f 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -1,9 +1,10 @@
+export {default as AvatarTitle} from './AvatarTitle';
 export {default as CenteredView} from './CenteredView';
 export {default as OverlayView} from './OverlayView';
 export {default as RadioCheckbox} from './RadioCheckbox';
 export {default as NavigationIcon} from './NavigationIcon';
 export {default as GradientBackground} from './GradientBackground';
-export {default as Post} from './post';
 export {default as SocialIcon} from './SocialIcon';
 export {default as TabsGradient} from './TabsGradient';
 export {default as RecentSearches} from '../search/RecentSearches';
+export * from './post';
diff --git a/src/components/common/post/Post.tsx b/src/components/common/post/Post.tsx
index e5f68917..9fa167f2 100644
--- a/src/components/common/post/Post.tsx
+++ b/src/components/common/post/Post.tsx
@@ -7,14 +7,12 @@ import {SCREEN_WIDTH} from '../../../utils';
 interface PostProps {
   post: PostType;
 }
-const Post: React.FC<PostProps> = ({post: {owner, instagram, social}}) => {
+const Post: React.FC<PostProps> = ({post: {owner, social, data}}) => {
   return (
     <>
-      <PostHeader post={instagram} owner={owner} social={social} />
+      <PostHeader post={data} owner={owner} social={social} />
       <View style={styles.image}>
-        {instagram && (
-          <Image style={styles.image} source={{uri: instagram.media_url}} />
-        )}
+        {data && <Image style={styles.image} source={{uri: data.media_url}} />}
       </View>
     </>
   );
diff --git a/src/components/common/post/index.ts b/src/components/common/post/index.ts
index 033f8a8d..358a59d5 100644
--- a/src/components/common/post/index.ts
+++ b/src/components/common/post/index.ts
@@ -1 +1 @@
-export {default} from './Post';
+export {default as Post} from './Post';