[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, 46 insertions, 0 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;