3 files changed, 75 insertions, 56 deletions

diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx
index e5e6f59b..d5998ac1 100644
--- a/src/screens/onboarding/BasicInfoOnboarding.tsx
+++ b/src/screens/onboarding/BasicInfoOnboarding.tsx
@@ -13,7 +13,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import {normalize} from 'react-native-elements';
-import Animated, {Easing, useValue} from 'react-native-reanimated';
+import Animated, {EasingNode, useValue} from 'react-native-reanimated';
 import {
   ArrowButton,
   Background,
@@ -99,7 +99,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
     Animated.timing(fadeButtonValue, {
       toValue: target,
       duration: 100,
-      easing: Easing.linear,
+      easing: EasingNode.linear,
     }).start();
   };
 
@@ -108,7 +108,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
       Animated.timing(fadeValue, {
         toValue: 1,
         duration: 1000,
-        easing: Easing.linear,
+        easing: EasingNode.linear,
       }).start();
     };
     fade();
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 4ad4515d..80438bcd 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,103 +1,121 @@
 import {BlurView} from '@react-native-community/blur';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React from 'react';
-import {FlatList, StyleSheet, View} from 'react-native';
+import React, {useEffect, useRef, useState} from 'react';
+import {FlatList, Keyboard, StyleSheet} from 'react-native';
 import {useSelector} from 'react-redux';
 import {IndividualMomentTitleBar, MomentPost} from '../../components';
+import {AVATAR_DIM} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootreducer';
-import {MomentType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {MomentPostType} from '../../types';
+import {isIPhoneX, normalize, StatusBarHeight} from '../../utils';
 
 /**
  * Individual moment view opened when user clicks on a moment tile
  */
+
+type MomentContextType = {
+  keyboardVisible: boolean;
+  scrollTo: (index: number) => void;
+};
+
+export const MomentContext = React.createContext({} as MomentContextType);
+
 type IndividualMomentRouteProp = RouteProp<MainStackParams, 'IndividualMoment'>;
+
 type IndividualMomentNavigationProp = StackNavigationProp<
   MainStackParams,
   'IndividualMoment'
 >;
+
 interface IndividualMomentProps {
   route: IndividualMomentRouteProp;
   navigation: IndividualMomentNavigationProp;
 }
 
-const ITEM_HEIGHT = SCREEN_HEIGHT * 0.9;
-
 const IndividualMoment: React.FC<IndividualMomentProps> = ({
   route,
   navigation,
 }) => {
-  const {moment_category, moment_id} = route.params.moment;
-  const {userXId, screenType} = route.params;
-
+  const {
+    userXId,
+    screenType,
+    moment: {moment_category, moment_id},
+  } = route.params;
   const {moments} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.moments,
   );
-
+  const scrollRef = useRef<FlatList<MomentPostType>>(null);
   const momentData = moments.filter(
     (m) => m.moment_category === moment_category,
   );
   const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+
+  useEffect(() => {
+    const showKeyboard = () => setKeyboardVisible(true);
+    const hideKeyboard = () => setKeyboardVisible(false);
+    Keyboard.addListener('keyboardWillShow', showKeyboard);
+    Keyboard.addListener('keyboardWillHide', hideKeyboard);
+    return () => {
+      Keyboard.removeListener('keyboardWillShow', showKeyboard);
+      Keyboard.removeListener('keyboardWillHide', hideKeyboard);
+    };
+  }, []);
+
+  const scrollTo = (index: number) => {
+    // TODO: make this dynamic
+    const offset = isIPhoneX() ? -(AVATAR_DIM + 100) : -(AVATAR_DIM + 160);
+    scrollRef.current?.scrollToIndex({
+      index: index,
+      viewOffset: offset,
+    });
+  };
 
   return (
-    <BlurView
-      blurType="light"
-      blurAmount={30}
-      reducedTransparencyFallbackColor="white"
-      style={styles.contentContainer}>
-      <IndividualMomentTitleBar
-        style={styles.header}
-        close={() => navigation.pop()}
-        {...{title: moment_category}}
-      />
-      <View style={styles.content}>
+    <MomentContext.Provider
+      value={{
+        keyboardVisible,
+        scrollTo,
+      }}>
+      <BlurView
+        blurType="light"
+        blurAmount={30}
+        reducedTransparencyFallbackColor="white"
+        style={styles.contentContainer}>
+        <IndividualMomentTitleBar
+          style={styles.header}
+          close={() => navigation.goBack()}
+          title={moment_category}
+        />
         <FlatList
+          ref={scrollRef}
           data={momentData}
-          renderItem={({item}: {item: MomentType}) => (
-            <MomentPost userXId={userXId} screenType={screenType} item={item} />
+          renderItem={({item, index}) => (
+            <MomentPost
+              moment={item}
+              userXId={userXId}
+              screenType={screenType}
+              index={index}
+            />
           )}
-          keyExtractor={(item, index) => index.toString()}
+          keyExtractor={(item, _) => item.moment_id}
           showsVerticalScrollIndicator={false}
-          snapToAlignment={'start'}
-          snapToInterval={ITEM_HEIGHT}
-          decelerationRate={'fast'}
           initialScrollIndex={initialIndex}
-          getItemLayout={(data, index) => ({
-            length: ITEM_HEIGHT,
-            offset: ITEM_HEIGHT * index,
-            index,
-          })}
-          pagingEnabled
         />
-      </View>
-    </BlurView>
+      </BlurView>
+    </MomentContext.Provider>
   );
 };
 const styles = StyleSheet.create({
   contentContainer: {
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
     paddingTop: StatusBarHeight,
     flex: 1,
-    paddingBottom: 0,
-  },
-  content: {
-    flex: 9,
   },
   header: {
-    flex: 1,
-  },
-  postContainer: {
-    height: ITEM_HEIGHT,
-    width: SCREEN_WIDTH,
-    flex: 1,
-  },
-  postHeader: {
-    flex: 1,
+    height: normalize(70),
   },
-  postContent: {flex: 9},
 });
 
 export default IndividualMoment;
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 402e5f44..7dfe8ae9 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -48,8 +48,9 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
     React.useState(true);
 
   //Keeps track of the current comments object in focus so that the application knows which comment to post a reply to
-  const [commentTapped, setCommentTapped] =
-    useState<CommentType | CommentThreadType | undefined>();
+  const [commentTapped, setCommentTapped] = useState<
+    CommentType | CommentThreadType | undefined
+  >();
 
   useEffect(() => {
     navigation.setOptions({