diff options
| -rw-r--r-- | src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 31 |
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} /> |