1 files changed, 58 insertions, 0 deletions
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
new file mode 100644
index 00000000..82b5fdc0
--- /dev/null
+++ b/src/components/profile/Content.tsx
@@ -0,0 +1,58 @@
+import React, {useState} from 'react';
+import {StyleSheet, LayoutChangeEvent} from 'react-native';
+import Animated from 'react-native-reanimated';
+const {ScrollView} = Animated;
+
+import {UserType} from '../../types';
+import ProfileCutout from './ProfileCutout';
+import ProfileHeader from './ProfileHeader';
+import ProfileBody from './ProfileBody';
+import MomentsBar from './MomentsBar';
+import Feed from './Feed';
+import LinearGradient from 'react-native-linear-gradient';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+interface ContentProps {
+  y: Animated.Value<number>;
+  user: UserType;
+}
+const Content: React.FC<ContentProps> = ({y, user}) => {
+  const [profileBodyHeight, setProfileBodyHeight] = useState(0);
+  const onLayout = (e: LayoutChangeEvent) => {
+    const {height} = e.nativeEvent.layout;
+    setProfileBodyHeight(height);
+  };
+  return (
+    <ScrollView
+      style={styles.container}
+      onScroll={(e) => y.setValue(e.nativeEvent.contentOffset.y)}
+      showsVerticalScrollIndicator={false}
+      scrollEventThrottle={1}
+      stickyHeaderIndices={[2, 4]}>
+      <ProfileCutout>
+        <ProfileHeader />
+      </ProfileCutout>
+      <ProfileBody {...{onLayout}} />
+      <MomentsBar {...{y, profileBodyHeight}} />
+      <Feed {...{user}} />
+      <LinearGradient
+        locations={[0.89, 1]}
+        colors={['transparent', 'rgba(0, 0, 0, 0.6)']}
+        style={styles.gradient}
+      />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  gradient: {
+    height: SCREEN_HEIGHT,
+    width: SCREEN_WIDTH,
+    position: 'absolute',
+  },
+});
+
+export default Content;