1 files changed, 27 insertions, 4 deletions
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 6cf792ef..c25ec01a 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,5 +1,12 @@
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
-import React, {memo, Fragment, useCallback, useEffect, useState} from 'react';
+import React, {
+  memo,
+  Fragment,
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+} from 'react';
 import {
   FlatList,
   ListRenderItemInfo,
@@ -8,6 +15,7 @@ import {
   StyleSheet,
   Text,
   View,
+  ViewToken,
 } from 'react-native';
 import {Image} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
@@ -61,6 +69,7 @@ const SuggestedPeopleScreen: React.FC = () => {
   const [page, setPage] = useState(0);
   const [refreshing, setRefreshing] = useState(false);
   const [shouldResetData, setShouldResetData] = useState(false);
+  const [hideStatusBar, setHideStatusBar] = useState(false);
 
   // loads data and append it to users based on current page
   useEffect(() => {
@@ -215,19 +224,32 @@ const SuggestedPeopleScreen: React.FC = () => {
     }
   };
 
+  const onViewableItemsChanged = useCallback(
+    ({viewableItems}: {viewableItems: ViewToken[]}) => {
+      setHideStatusBar(viewableItems[0].index !== 0);
+    },
+    [],
+  );
+
   const SPBody = memo(
     ({item}: {item: ListRenderItemInfo<SuggestedPeopleDataType>}) => {
       const data = item.item;
       const firstItem = item.index === 0;
-      return (
-        <>
-          <StatusBar barStyle={'light-content'} />
+      const backgroundImage = useMemo(
+        () => (
           <Image
             source={{
               uri: data.suggested_people_url,
             }}
             style={styles.image}
           />
+        ),
+        [data.suggested_people_url],
+      );
+      return (
+        <>
+          <StatusBar barStyle={'light-content'} hidden={hideStatusBar} />
+          {backgroundImage}
           <View style={styles.mainContainer}>
             <Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
             <View style={styles.body}>
@@ -275,6 +297,7 @@ const SuggestedPeopleScreen: React.FC = () => {
         renderItem={(item) => <SPBody item={item} />}
         keyExtractor={(item, index) => index.toString()}
         showsVerticalScrollIndicator={false}
+        onViewableItemsChanged={onViewableItemsChanged}
         onEndReached={() => setPage(page + 1)}
         refreshControl={
           <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />