[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

1 files changed, 62 insertions, 0 deletions

diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
new file mode 100644
index 00000000..ec382357
--- /dev/null
+++ b/src/components/profile/ProfileHeader.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import Avatar from './Avatar';
+import FollowCount from './FollowCount';
+import {View, Text, StyleSheet} from 'react-native';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {AuthContext} from '../../routes/authentication';
+
+const ProfileHeader: React.FC = () => {
+  const {
+    profile: {name},
+  } = React.useContext(AuthContext);
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        <Avatar style={styles.avatar} />
+        <View style={styles.header}>
+          <Text style={styles.name}>{name}</Text>
+          <View style={styles.row}>
+            <FollowCount
+              style={styles.follows}
+              mode="followers"
+              count={318412}
+            />
+            <FollowCount style={styles.follows} mode="following" count={1036} />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    top: SCREEN_HEIGHT / 2.4,
+    paddingHorizontal: SCREEN_WIDTH / 20,
+    marginBottom: SCREEN_HEIGHT / 10,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  header: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: SCREEN_HEIGHT / 40,
+    marginLeft: SCREEN_WIDTH / 10,
+    marginBottom: SCREEN_HEIGHT / 50,
+  },
+  avatar: {
+    bottom: SCREEN_HEIGHT / 80,
+  },
+  name: {
+    fontSize: 20,
+    fontWeight: '700',
+    marginBottom: SCREEN_HEIGHT / 80,
+  },
+  follows: {
+    marginHorizontal: SCREEN_HEIGHT / 50,
+  },
+});
+
+export default ProfileHeader;