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;