[TMA-122] User Profile Screen UI (#27)

* Fix yarn lint issues

* Add react-native-svg to project

* Create UserType & PostType

* Create temporary Post component

* Fix import cycle warning, update AuthContext

* Update onboarding screen imports

* Update config files

* Add rn-fetch-blob package

* Update types

* Add profile fetching to AuthContext

* Update post component

* Import placeholder images from designs

* Add profile UI components

* Create screen offset constants

* Add new api endpoints

* Create screen layout utils

* Create Profile screen UI

* Remove some unused styling

* Restructure ProfileScreen and fix animations

* Add gradient back to screen

* Update Moment circle styling

3 files changed, 78 insertions, 0 deletions

diff --git a/src/components/common/post/Post.tsx b/src/components/common/post/Post.tsx
new file mode 100644
index 00000000..d6c5a7d6
--- /dev/null
+++ b/src/components/common/post/Post.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import {PostType} from '../../../types';
+import PostHeader from './PostHeader';
+import {SCREEN_WIDTH} from '../../../utils';
+
+interface PostProps {
+  post: PostType;
+}
+const Post: React.FC<PostProps> = ({post: {owner}}) => {
+  return (
+    <>
+      <PostHeader owner={owner} />
+      <View style={styles.image} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
+    backgroundColor: '#eee',
+  },
+});
+export default Post;
diff --git a/src/components/common/post/PostHeader.tsx b/src/components/common/post/PostHeader.tsx
new file mode 100644
index 00000000..8558d21d
--- /dev/null
+++ b/src/components/common/post/PostHeader.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import {UserType} from '../../../types';
+import {View, StyleSheet, Image, Text} from 'react-native';
+import {AuthContext} from '../../../routes/authentication';
+
+const AVATAR_DIM = 35;
+interface PostHeaderProps {
+  owner: UserType;
+}
+const PostHeader: React.FC<PostHeaderProps> = ({owner: {username}}) => {
+  const {avatar} = React.useContext(AuthContext);
+  return (
+    <View style={styles.container}>
+      <View style={styles.leftElem}>
+        <Image
+          style={styles.avatar}
+          source={
+            avatar
+              ? {uri: avatar}
+              : require('../../../assets/images/avatar-placeholder.png')
+          }
+        />
+        <Text style={styles.username}>{username}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 10,
+    backgroundColor: 'white',
+  },
+  leftElem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatar: {
+    width: AVATAR_DIM,
+    height: AVATAR_DIM,
+    borderRadius: AVATAR_DIM / 2,
+    marginRight: 10,
+  },
+  username: {
+    fontSize: 18,
+  },
+});
+
+export default PostHeader;
diff --git a/src/components/common/post/index.ts b/src/components/common/post/index.ts
new file mode 100644
index 00000000..033f8a8d
--- /dev/null
+++ b/src/components/common/post/index.ts
@@ -0,0 +1 @@
+export {default} from './Post';