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

diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
new file mode 100644
index 00000000..e8d8de62
--- /dev/null
+++ b/src/components/profile/ProfileBody.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {StyleSheet, View, Text, LayoutChangeEvent} from 'react-native';
+import {AuthContext} from '../../routes/authentication';
+
+interface ProfileBodyProps {
+  onLayout: (event: LayoutChangeEvent) => void;
+}
+const ProfileBody: React.FC<ProfileBodyProps> = ({onLayout}) => {
+  const {
+    profile,
+    user: {username},
+  } = React.useContext(AuthContext);
+  const {biography, website} = profile;
+  return (
+    <View onLayout={onLayout} style={styles.container}>
+      <Text style={styles.username}>{`@${username}`}</Text>
+      <Text style={styles.biography}>{`${biography}`}</Text>
+      <Text style={styles.website}>{`${website}`}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 5,
+    paddingHorizontal: 20,
+    backgroundColor: 'white',
+  },
+  username: {
+    fontWeight: '600',
+    fontSize: 16,
+    marginBottom: 5,
+  },
+  biography: {
+    fontSize: 16,
+    lineHeight: 22,
+    marginBottom: 5,
+  },
+  website: {
+    fontSize: 16,
+    color: '#4E699C',
+    marginBottom: 5,
+  },
+});
+
+export default ProfileBody;