Update logic for viewable items in SP

1 files changed, 16 insertions, 9 deletions

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={