diff options
| -rw-r--r-- | src/components/moments/MomentPost.tsx | 39 | ||||
| -rw-r--r-- | src/screens/profile/IndividualMoment.tsx | 31 | ||||
| -rw-r--r-- | src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 25 |
3 files changed, 56 insertions, 39 deletions
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index f5a256d6..319542f9 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -1,5 +1,5 @@ import {useNavigation} from '@react-navigation/native'; -import React, {useContext, useEffect, useRef, useState} from 'react'; +import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'; import { Image, KeyboardAvoidingView, @@ -173,22 +173,25 @@ const MomentPost: React.FC<MomentPostProps> = ({ } }, [currentVisibleMomentId]); - const MomentPosterPreview = () => ( - <View style={styles.momentPosterContainer}> - <TouchableOpacity - onPress={() => - navigateToProfile(state, dispatch, navigation, screenType, user) - } - style={styles.header}> - <TaggAvatar - style={styles.avatar} - userXId={userXId} - screenType={screenType} - editable={false} - /> - <Text style={styles.headerText}>{user.username}</Text> - </TouchableOpacity> - </View> + const momentPosterPreview = useMemo( + () => ( + <View style={styles.momentPosterContainer}> + <TouchableOpacity + onPress={() => + navigateToProfile(state, dispatch, navigation, screenType, user) + } + style={styles.header}> + <TaggAvatar + style={styles.avatar} + userXId={userXId} + screenType={screenType} + editable={false} + /> + <Text style={styles.headerText}>{user.username}</Text> + </TouchableOpacity> + </View> + ), + [user.username], ); return ( @@ -284,7 +287,7 @@ const MomentPost: React.FC<MomentPostProps> = ({ screenType={screenType} /> </View> - <MomentPosterPreview /> + {momentPosterPreview} {!hideText && ( <> {moment.caption !== '' && diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index a322b1e9..7d231312 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -7,6 +7,7 @@ import {MomentPost, TabsGradient} from '../../components'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; import {MomentPostType} from '../../types'; +import {SCREEN_HEIGHT} from '../../utils'; type MomentContextType = { keyboardVisible: boolean; @@ -45,17 +46,25 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => { const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState< string | undefined >(); + const [viewableItems, setViewableItems] = useState<ViewToken[]>([]); + // https://stackoverflow.com/a/57502343 const viewabilityConfigCallback = useRef( - (info: {viewableItems: ViewToken[]; changed: ViewToken[]}) => { - const index = info.viewableItems[0].index; - if (index !== null) { - setCurrentVisibleMomentId(momentData[index].moment_id); - } + (info: {viewableItems: ViewToken[]}) => { + setViewableItems(info.viewableItems); }, ); useEffect(() => { + if (viewableItems.length > 0) { + const index = viewableItems[0].index; + if (index !== null && momentData.length > 0) { + setCurrentVisibleMomentId(momentData[index].moment_id); + } + } + }, [viewableItems]); + + useEffect(() => { const showKeyboard = () => setKeyboardVisible(true); const hideKeyboard = () => setKeyboardVisible(false); Keyboard.addListener('keyboardWillShow', showKeyboard); @@ -87,13 +96,11 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => { showsVerticalScrollIndicator={false} initialScrollIndex={initialIndex} onViewableItemsChanged={viewabilityConfigCallback.current} - onScrollToIndexFailed={(info) => { - setTimeout(() => { - scrollRef.current?.scrollToIndex({ - index: info.index, - }); - }, 500); - }} + getItemLayout={(data, index) => ({ + length: SCREEN_HEIGHT, + offset: SCREEN_HEIGHT * index, + index, + })} pagingEnabled /> <TabsGradient /> 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={ |