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

[TMA-950] BUGFIX Video Notification Crash

2 files changed, 35 insertions, 21 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 />
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 39d98bcc..6156e950 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -44,6 +44,7 @@ const SuggestedPeopleScreen: React.FC = () => {
   const [hideStatusBar, setHideStatusBar] = useState(false);
   // boolean for showing/hiding loading indicator
   const [loading, setLoading] = useState(true);
+  const [viewableItems, setViewableItems] = useState<ViewToken[]>([]);
 
   // set loading to false once there are people to display
   useEffect(() => {
@@ -59,6 +60,20 @@ const SuggestedPeopleScreen: React.FC = () => {
 
   const stausBarRef = useRef(hideStatusBar);
 
+  // https://stackoverflow.com/a/57502343
+  const viewabilityConfigCallback = useRef(
+    (info: {viewableItems: ViewToken[]}) => {
+      setViewableItems(info.viewableItems);
+    },
+  );
+
+  useEffect(() => {
+    if (viewableItems.length > 0) {
+      setHideStatusBar(viewableItems[0].index !== 0);
+      stausBarRef.current = viewableItems[0].index !== 0;
+    }
+  }, [viewableItems]);
+
   useEffect(() => {
     const handlePageChange = async () => {
       const checkAsync = await AsyncStorage.getItem(
@@ -208,14 +223,6 @@ const SuggestedPeopleScreen: React.FC = () => {
     updateDisplayedUser(user, 'no_record', '');
   };
 
-  const onViewableItemsChanged = useCallback(
-    ({viewableItems}: {viewableItems: ViewToken[]}) => {
-      setHideStatusBar(viewableItems[0].index !== 0);
-      stausBarRef.current = viewableItems[0].index !== 0;
-    },
-    [],
-  );
-
   useFocusEffect(() => {
     if (suggested_people_linked === 0) {
       navigation.navigate('SPWelcomeScreen');
@@ -244,7 +251,7 @@ const SuggestedPeopleScreen: React.FC = () => {
         }}
         keyExtractor={(_, index) => index.toString()}
         showsVerticalScrollIndicator={false}
-        onViewableItemsChanged={onViewableItemsChanged}
+        onViewableItemsChanged={viewabilityConfigCallback.current}
         onEndReached={() => setPage(page + 1)}
         onEndReachedThreshold={3}
         refreshControl={