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

diff --git a/src/components/profile/Cover.tsx b/src/components/profile/Cover.tsx
new file mode 100644
index 00000000..01199f06
--- /dev/null
+++ b/src/components/profile/Cover.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import {Image, StyleSheet} from 'react-native';
+import Animated from 'react-native-reanimated';
+import {IMAGE_WIDTH, COVER_HEIGHT} from '../../constants';
+import {AuthContext} from '../../routes/authentication';
+
+const {interpolate, Extrapolate} = Animated;
+interface CoverProps {
+  y: Animated.Value<number>;
+}
+const Cover: React.FC<CoverProps> = ({y}) => {
+  const {cover} = React.useContext(AuthContext);
+  const scale: Animated.Node<number> = interpolate(y, {
+    inputRange: [-COVER_HEIGHT, 0],
+    outputRange: [1.5, 1.25],
+    extrapolateRight: Extrapolate.CLAMP,
+  });
+  return (
+    <Animated.View style={[styles.container, {transform: [{scale}]}]}>
+      <Image
+        style={styles.image}
+        source={
+          cover
+            ? {uri: cover}
+            : require('../../assets/images/cover-placeholder.png')
+        }
+      />
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+  },
+  image: {
+    width: IMAGE_WIDTH,
+    height: COVER_HEIGHT,
+  },
+});
+export default Cover;