From 5caf2c7584c9fd79715eb36bc7017b54393f00c3 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 1 Jul 2021 15:41:58 -0400
Subject: Update logic for viewable items in SP

---
 .../suggestedPeople/SuggestedPeopleScreen.tsx      | 25 ++++++++++++++--------
 1 file changed, 16 insertions(+), 9 deletions(-)

(limited to 'src/screens/suggestedPeople/SuggestedPeopleScreen.tsx')

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={
-- 
cgit v1.2.3-70-g09d2