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

diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FollowCount.tsx
new file mode 100644
index 00000000..72817e7a
--- /dev/null
+++ b/src/components/profile/FollowCount.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {View, Text, StyleSheet, ViewProps} from 'react-native';
+
+interface FollowCountProps extends ViewProps {
+  mode: 'followers' | 'following';
+  count: number;
+}
+
+const FollowCount: React.FC<FollowCountProps> = ({style, mode, count}) => {
+  const displayed: string =
+    count < 5e3
+      ? `${count}`
+      : count < 1e5
+      ? `${(count / 1e3).toFixed(1)}k`
+      : count < 1e6
+      ? `${(count / 1e3).toFixed(0)}k`
+      : `${count / 1e6}m`;
+  return (
+    <View style={[styles.container, style]}>
+      <Text style={styles.count}>{displayed}</Text>
+      <Text style={styles.label}>
+        {mode === 'followers' ? 'Followers' : 'Following'}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  count: {
+    fontWeight: '700',
+    fontSize: 18,
+  },
+  label: {
+    fontWeight: '400',
+    fontSize: 16,
+  },
+});
+
+export default FollowCount;