From 34414dcf71e0c764e7c6102ef3711135e0d88a4c Mon Sep 17 00:00:00 2001 From: George Rusu Date: Thu, 1 Jul 2021 11:20:34 -0700 Subject: Check to make sure momentData is initialized and not empty before indexing --- src/screens/profile/IndividualMoment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index a322b1e9..0fd15b2c 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -49,7 +49,7 @@ const IndividualMoment: React.FC = ({route}) => { const viewabilityConfigCallback = useRef( (info: {viewableItems: ViewToken[]; changed: ViewToken[]}) => { const index = info.viewableItems[0].index; - if (index !== null) { + if (index !== null && momentData.length > 0) { setCurrentVisibleMomentId(momentData[index].moment_id); } }, -- cgit v1.2.3-70-g09d2 From 97a3f554746b3b73eb57b21e2d8b8d8b5a1a049c Mon Sep 17 00:00:00 2001 From: George Rusu Date: Thu, 1 Jul 2021 11:54:30 -0700 Subject: Remove viewabilityConfigCallback --- src/screens/profile/IndividualMoment.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 0fd15b2c..bd87f4b0 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; @@ -66,6 +67,10 @@ const IndividualMoment: React.FC = ({route}) => { }; }, []); + console.log('moment data length: \n ' + momentData.length); + console.log('Moment length: \n ' + moments.length); + console.log('initINDEX: \n' + initialIndex); + const ITEM_HEIGHT = SCREEN_HEIGHT; return ( = ({route}) => { keyExtractor={(item, _) => item.moment_id} showsVerticalScrollIndicator={false} initialScrollIndex={initialIndex} - onViewableItemsChanged={viewabilityConfigCallback.current} + // onViewableItemsChanged={viewabilityConfigCallback.current} + // getItemLayout={} + // snaptoIte + // snapToInterval={ITEM_HEIGHT} + getItemLayout={(data, index) => ({ + length: ITEM_HEIGHT, + offset: ITEM_HEIGHT * index, + index, + })} onScrollToIndexFailed={(info) => { + console.log('this is when it fails: '); setTimeout(() => { + console.log('trying to scroll to some index: ' + info.index); + console.log('ScrollRef: ' + scrollRef.current); scrollRef.current?.scrollToIndex({ index: info.index, }); -- cgit v1.2.3-70-g09d2 From 622706f1beeb2de01554994977a66df7becd1591 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 1 Jul 2021 15:33:04 -0400 Subject: Fix crash issue on notification tap, Fix initial index issue --- src/screens/profile/IndividualMoment.tsx | 39 ++++++++++++-------------------- 1 file changed, 15 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index bd87f4b0..7d231312 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -46,15 +46,23 @@ const IndividualMoment: React.FC = ({route}) => { const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState< string | undefined >(); + const [viewableItems, setViewableItems] = useState([]); + // https://stackoverflow.com/a/57502343 const viewabilityConfigCallback = useRef( - (info: {viewableItems: ViewToken[]; changed: ViewToken[]}) => { - const index = info.viewableItems[0].index; + (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); @@ -67,10 +75,6 @@ const IndividualMoment: React.FC = ({route}) => { }; }, []); - console.log('moment data length: \n ' + momentData.length); - console.log('Moment length: \n ' + moments.length); - console.log('initINDEX: \n' + initialIndex); - const ITEM_HEIGHT = SCREEN_HEIGHT; return ( = ({route}) => { keyExtractor={(item, _) => item.moment_id} showsVerticalScrollIndicator={false} initialScrollIndex={initialIndex} - // onViewableItemsChanged={viewabilityConfigCallback.current} - // getItemLayout={} - // snaptoIte - // snapToInterval={ITEM_HEIGHT} + onViewableItemsChanged={viewabilityConfigCallback.current} getItemLayout={(data, index) => ({ - length: ITEM_HEIGHT, - offset: ITEM_HEIGHT * index, + length: SCREEN_HEIGHT, + offset: SCREEN_HEIGHT * index, index, })} - onScrollToIndexFailed={(info) => { - console.log('this is when it fails: '); - setTimeout(() => { - console.log('trying to scroll to some index: ' + info.index); - console.log('ScrollRef: ' + scrollRef.current); - scrollRef.current?.scrollToIndex({ - index: info.index, - }); - }, 500); - }} pagingEnabled /> -- cgit v1.2.3-70-g09d2 From 5d07edcc1945b90046148b6c2424f20f024efae2 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 1 Jul 2021 15:33:19 -0400 Subject: Fix moment avatar rerender issue --- src/components/moments/MomentPost.tsx | 39 +++++++++++++++++++---------------- 1 file changed, 21 insertions(+), 18 deletions(-) (limited to 'src') 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 = ({ } }, [currentVisibleMomentId]); - const MomentPosterPreview = () => ( - - - navigateToProfile(state, dispatch, navigation, screenType, user) - } - style={styles.header}> - - {user.username} - - + const momentPosterPreview = useMemo( + () => ( + + + navigateToProfile(state, dispatch, navigation, screenType, user) + } + style={styles.header}> + + {user.username} + + + ), + [user.username], ); return ( @@ -284,7 +287,7 @@ const MomentPost: React.FC = ({ screenType={screenType} /> - + {momentPosterPreview} {!hideText && ( <> {moment.caption !== '' && -- cgit v1.2.3-70-g09d2 From 5caf2c7584c9fd79715eb36bc7017b54393f00c3 Mon Sep 17 00:00:00 2001 From: Ivan Chen 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') 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([]); // 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