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

diff --git a/src/components/profile/MomentsBar.tsx b/src/components/profile/MomentsBar.tsx
new file mode 100644
index 00000000..dcc88d89
--- /dev/null
+++ b/src/components/profile/MomentsBar.tsx
@@ -0,0 +1,75 @@
+// @refresh react
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import Animated from 'react-native-reanimated';
+import Moment from './Moment';
+import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants';
+import {StatusBarHeight} from '../../utils';
+
+const {View, ScrollView, interpolate, Extrapolate} = Animated;
+interface MomentsBarProps {
+  y: Animated.Value<number>;
+  profileBodyHeight: number;
+}
+const MomentsBar: React.FC<MomentsBarProps> = ({y, profileBodyHeight}) => {
+  const moments: Array<JSX.Element> = [];
+  for (let i = 0; i < 10; i++) {
+    moments.push(<Moment key={i} style={styles.moment} />);
+  }
+  const shadowOpacity: Animated.Node<number> = interpolate(y, {
+    inputRange: [
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20,
+    ],
+    outputRange: [0, 0.2],
+    extrapolate: Extrapolate.CLAMP,
+  });
+  const paddingTop: Animated.Node<number> = interpolate(y, {
+    inputRange: [
+      0,
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
+    ],
+    outputRange: [20, 20, StatusBarHeight],
+    extrapolate: Extrapolate.CLAMP,
+  });
+  const paddingBottom: Animated.Node<number> = interpolate(y, {
+    inputRange: [
+      0,
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
+    ],
+    outputRange: [30, 30, 15],
+    extrapolate: Extrapolate.CLAMP,
+  });
+  return (
+    <View style={[styles.container, {shadowOpacity}]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={{paddingTop, paddingBottom}}
+        contentContainerStyle={styles.contentContainer}>
+        {moments}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    shadowColor: '#000',
+    shadowRadius: 10,
+    shadowOffset: {width: 0, height: 2},
+    zIndex: 1,
+  },
+  contentContainer: {
+    alignItems: 'center',
+    paddingHorizontal: 15,
+  },
+  moment: {
+    marginHorizontal: 14,
+  },
+});
+
+export default MomentsBar;