Merge pull request #484 from grusuTagg/tma950-BUGFIX-Video-Notification-Crash

[TMA-950] BUGFIX Video Notification Crash

1 files changed, 19 insertions, 12 deletions

diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index a322b1e9..7d231312 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -7,6 +7,7 @@ import {MomentPost, TabsGradient} from '../../components';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootreducer';
 import {MomentPostType} from '../../types';
+import {SCREEN_HEIGHT} from '../../utils';
 
 type MomentContextType = {
   keyboardVisible: boolean;
@@ -45,17 +46,25 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
   const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState<
     string | undefined
   >();
+  const [viewableItems, setViewableItems] = useState<ViewToken[]>([]);
+
   // https://stackoverflow.com/a/57502343
   const viewabilityConfigCallback = useRef(
-    (info: {viewableItems: ViewToken[]; changed: ViewToken[]}) => {
-      const index = info.viewableItems[0].index;
-      if (index !== null) {
-        setCurrentVisibleMomentId(momentData[index].moment_id);
-      }
+    (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);
     const hideKeyboard = () => setKeyboardVisible(false);
     Keyboard.addListener('keyboardWillShow', showKeyboard);
@@ -87,13 +96,11 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
         showsVerticalScrollIndicator={false}
         initialScrollIndex={initialIndex}
         onViewableItemsChanged={viewabilityConfigCallback.current}
-        onScrollToIndexFailed={(info) => {
-          setTimeout(() => {
-            scrollRef.current?.scrollToIndex({
-              index: info.index,
-            });
-          }, 500);
-        }}
+        getItemLayout={(data, index) => ({
+          length: SCREEN_HEIGHT,
+          offset: SCREEN_HEIGHT * index,
+          index,
+        })}
         pagingEnabled
       />
       <TabsGradient />