From e0e51ede0f77984eebec7943674ca27cdcb4cda6 Mon Sep 17 00:00:00 2001 From: Youssef Lourayad Date: Fri, 27 Oct 2023 11:50:28 +0400 Subject: [PATCH 1/4] Fix viewing attachments --- src/components/OptionsList/BaseOptionsList.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index 91fd77dbea300..31dfe307cbb4e 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useRef, useEffect, forwardRef, memo} from 'react'; +import React, {useRef, useCallback, useEffect, forwardRef, memo} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../styles/styles'; @@ -120,14 +120,16 @@ function BaseOptionsList({ flattenedData.current = buildFlatSectionArray(); }); - const onViewableItemsChanged = () => { + const onViewableItemsChanged = useCallback(() => { if (didLayout.current || !onLayout) { return; } didLayout.current = true; onLayout(); - }; + }, []); + + const viewConfigRef = useRef({viewAreaCoveragePercentThreshold: 95}); /** * This function is used to compute the layout of any given item in our list. @@ -277,7 +279,7 @@ function BaseOptionsList({ initialNumToRender={12} maxToRenderPerBatch={5} windowSize={5} - viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}} + viewabilityConfig={viewConfigRef.current} onViewableItemsChanged={onViewableItemsChanged} bounces={bounces} /> From d2844c954da477fc730f83326db75a539d708f2b Mon Sep 17 00:00:00 2001 From: Youssef Lourayad Date: Fri, 27 Oct 2023 11:58:05 +0400 Subject: [PATCH 2/4] Add dependencies to useCallback --- src/components/OptionsList/BaseOptionsList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index 31dfe307cbb4e..cfab94ca632d5 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -127,7 +127,7 @@ function BaseOptionsList({ didLayout.current = true; onLayout(); - }, []); + }, [didLayout, onLayout]); const viewConfigRef = useRef({viewAreaCoveragePercentThreshold: 95}); From 1c8903fd454769aaac3272a1bec4b5259cab5469 Mon Sep 17 00:00:00 2001 From: Youssef Lourayad Date: Fri, 27 Oct 2023 12:23:32 +0400 Subject: [PATCH 3/4] Remove unneeded ref --- src/components/OptionsList/BaseOptionsList.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index cfab94ca632d5..5a700ae61da24 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -129,8 +129,6 @@ function BaseOptionsList({ onLayout(); }, [didLayout, onLayout]); - const viewConfigRef = useRef({viewAreaCoveragePercentThreshold: 95}); - /** * This function is used to compute the layout of any given item in our list. * We need to implement it so that we can programmatically scroll to items outside the virtual render window of the SectionList. @@ -279,7 +277,7 @@ function BaseOptionsList({ initialNumToRender={12} maxToRenderPerBatch={5} windowSize={5} - viewabilityConfig={viewConfigRef.current} + viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}} onViewableItemsChanged={onViewableItemsChanged} bounces={bounces} /> From 8531566b46380a9c66c541ed0af5735addd65209 Mon Sep 17 00:00:00 2001 From: Youssef Lourayad Date: Fri, 27 Oct 2023 20:02:35 +0400 Subject: [PATCH 4/4] Apply fix in AttachmentModal instead of BaseOptionsList --- src/components/OptionsList/BaseOptionsList.js | 6 +++--- src/pages/home/report/ReportAttachments.js | 15 ++++++++++----- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index 5a700ae61da24..91fd77dbea300 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useRef, useCallback, useEffect, forwardRef, memo} from 'react'; +import React, {useRef, useEffect, forwardRef, memo} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../styles/styles'; @@ -120,14 +120,14 @@ function BaseOptionsList({ flattenedData.current = buildFlatSectionArray(); }); - const onViewableItemsChanged = useCallback(() => { + const onViewableItemsChanged = () => { if (didLayout.current || !onLayout) { return; } didLayout.current = true; onLayout(); - }, [didLayout, onLayout]); + }; /** * This function is used to compute the layout of any given item in our list. diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 5f194d10bce3b..23da908fed179 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useCallback} from 'react'; import _ from 'underscore'; import PropTypes from 'prop-types'; import AttachmentModal from '../../../components/AttachmentModal'; @@ -24,6 +24,14 @@ function ReportAttachments(props) { const report = ReportUtils.getReport(reportID); const source = decodeURI(_.get(props, ['route', 'params', 'source'])); + const onCarouselAttachmentChange = useCallback( + (attachment) => { + const route = ROUTES.REPORT_ATTACHMENTS.getRoute(reportID, attachment.source); + Navigation.navigate(route); + }, + [reportID], + ); + return ( Navigation.dismissModal()} - onCarouselAttachmentChange={(attachment) => { - const route = ROUTES.REPORT_ATTACHMENTS.getRoute(reportID, attachment.source); - Navigation.navigate(route); - }} + onCarouselAttachmentChange={onCarouselAttachmentChange} /> ); }