hide "Suggested People" after first page, some work done for hiding status bar

1 files changed, 20 insertions, 6 deletions

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 1199993b..f6b468c3 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -44,6 +44,8 @@ const SuggestedPeopleScreen: React.FC = () => {
   const [people, setPeople] = useState<SuggestedPeopleDataType[]>([]);
   const [page, setPage] = useState(0);
   const [refreshing, setRefreshing] = useState(false);
+  const [hideStatusBar, setHideStatusBar] = useState(false);
+  // const [onFirstPage, setOnFirstPage] = useState(false);
 
   // DEBUG
   useEffect(() => {
@@ -112,23 +114,34 @@ const SuggestedPeopleScreen: React.FC = () => {
     }, [navigation, suggested_people_linked]),
   );
 
+  // const onViewableItemsChanged = useCallback(
+  //   ({viewableItems}: {viewableItems: ViewToken[]}) => {
+  //     setHideStatusBar(viewableItems[0].index !== 0);
+  //   },
+  //   [],
+  // );
+
   const SPBody = ({
     item,
   }: {
     item: ListRenderItemInfo<SuggestedPeopleDataType>;
   }) => {
     const data = item.item;
+    const firstItem = item.index === 0;
     return (
       <>
+        {/* {statusBar} */}
+        {/* <StatusBar barStyle={'light-content'} hidden={item.index !== 0} /> */}
+        <StatusBar barStyle={'light-content'} hidden={hideStatusBar} />
         <Image
-          source={{
-            uri: data.suggested_people_url,
-          }}
-          // source={require('../../assets/images/sarah_miller_full.jpeg')}
+          // source={{
+          //   uri: data.suggested_people_url,
+          // }}
+          source={require('../../assets/images/sarah_miller_full.jpeg')}
           style={styles.image}
         />
         <View style={styles.mainContainer}>
-          <Text style={styles.title}>Suggested People</Text>
+          <Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
           <View style={styles.body}>
             <View style={styles.addUserContainer}>
               <View style={styles.nameInfoContainer}>
@@ -162,13 +175,14 @@ const SuggestedPeopleScreen: React.FC = () => {
     <SuggestedPeopleOnboardingStackScreen />
   ) : (
     <>
-      <StatusBar barStyle={'light-content'} />
+      {/* <StatusBar barStyle={'light-content'} hidden/> */}
       <FlatList
         data={people}
         renderItem={(item) => <SPBody item={item} />}
         keyExtractor={(item, index) => index.toString()}
         showsVerticalScrollIndicator={false}
         onEndReached={() => setPage(page + 1)}
+        // onViewableItemsChanged={onViewableItemsChanged}
         refreshControl={
           <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
         }