1 files changed, 30 insertions, 25 deletions

diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index ca31ad5b..7d231312 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,22 +1,17 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useRef, useState} from 'react';
-import {FlatList, Keyboard} from 'react-native';
+import {FlatList, Keyboard, ViewToken} from 'react-native';
 import {useSelector} from 'react-redux';
 import {MomentPost, TabsGradient} from '../../components';
-import {AVATAR_DIM} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootreducer';
 import {MomentPostType} from '../../types';
-import {isIPhoneX} from '../../utils';
-
-/**
- * Individual moment view opened when user clicks on a moment tile
- */
+import {SCREEN_HEIGHT} from '../../utils';
 
 type MomentContextType = {
   keyboardVisible: boolean;
-  scrollTo: (index: number) => void;
+  currentVisibleMomentId: string | undefined;
 };
 
 export const MomentContext = React.createContext({} as MomentContextType);
@@ -48,6 +43,26 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
   );
   const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
   const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState<
+    string | undefined
+  >();
+  const [viewableItems, setViewableItems] = useState<ViewToken[]>([]);
+
+  // https://stackoverflow.com/a/57502343
+  const viewabilityConfigCallback = useRef(
+    (info: {viewableItems: ViewToken[]}) => {
+      setViewableItems(info.viewableItems);
+    },
+  );
+
+  useEffect(() => {
+    if (viewableItems.length > 0) {
+      const index = viewableItems[0].index;
+      if (index !== null && momentData.length > 0) {
+        setCurrentVisibleMomentId(momentData[index].moment_id);
+      }
+    }
+  }, [viewableItems]);
 
   useEffect(() => {
     const showKeyboard = () => setKeyboardVisible(true);
@@ -60,20 +75,11 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
     };
   }, []);
 
-  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 (
     <MomentContext.Provider
       value={{
         keyboardVisible,
-        scrollTo,
+        currentVisibleMomentId,
       }}>
       <FlatList
         ref={scrollRef}
@@ -89,13 +95,12 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
         keyExtractor={(item, _) => item.moment_id}
         showsVerticalScrollIndicator={false}
         initialScrollIndex={initialIndex}
-        onScrollToIndexFailed={(info) => {
-          setTimeout(() => {
-            scrollRef.current?.scrollToIndex({
-              index: info.index,
-            });
-          }, 500);
-        }}
+        onViewableItemsChanged={viewabilityConfigCallback.current}
+        getItemLayout={(data, index) => ({
+          length: SCREEN_HEIGHT,
+          offset: SCREEN_HEIGHT * index,
+          index,
+        })}
         pagingEnabled
       />
       <TabsGradient />