From 2d555f7cfa42306dec49e3c1b3cfe1f743f8d173 Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Wed, 22 Mar 2023 20:37:26 +0200
Subject: [PATCH 01/13] Use virtualized list to pre-render images offscreen

---
 src/components/AttachmentCarousel/index.js | 78 +++++++++++++++++++---
 1 file changed, 67 insertions(+), 11 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index c2caebcc07a2..f11b52cb0ff3 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {View, VirtualizedList} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -39,6 +39,10 @@ const defaultProps = {
     onNavigate: () => {},
 };
 
+function CellRendererComponent(props) {
+    return <View {...props} style={[props.style, styles.w100]} />;
+}
+
 class AttachmentCarousel extends React.Component {
     constructor(props) {
         super(props);
@@ -47,11 +51,16 @@ class AttachmentCarousel extends React.Component {
         this.cycleThroughAttachments = this.cycleThroughAttachments.bind(this);
 
         this.state = {
+            page: 0,
+            attachments: [],
             source: this.props.source,
             shouldShowArrow: this.canUseTouchScreen,
             isForwardDisabled: true,
             isBackDisabled: true,
+            layout: {},
         };
+
+        this.scrollRef = React.createRef();
     }
 
     componentDidMount() {
@@ -75,7 +84,6 @@ class AttachmentCarousel extends React.Component {
     getAttachment(attachmentItem) {
         const source = _.get(attachmentItem, 'source', '');
         const file = _.get(attachmentItem, 'file', {name: ''});
-        this.props.onNavigate({source: addEncryptedAuthTokenToURL(source), file});
 
         return {
             source,
@@ -95,7 +103,7 @@ class AttachmentCarousel extends React.Component {
      * This is called when there are new reports to set the state
      */
     makeStateWithReports() {
-        let page;
+        let page = this.state.page;
         const actions = ReportActionsUtils.getSortedReportActions(_.values(this.props.reportActions), true);
 
         /**
@@ -124,11 +132,9 @@ class AttachmentCarousel extends React.Component {
             }
         });
 
-        const {file} = this.getAttachment(attachments[page]);
         this.setState({
             page,
             attachments,
-            file,
             isForwardDisabled: page === 0,
             isBackDisabled: page === attachments.length - 1,
         });
@@ -146,6 +152,8 @@ class AttachmentCarousel extends React.Component {
         this.setState(({attachments, page}) => {
             const nextIndex = page - deltaSlide;
             const {source, file} = this.getAttachment(attachments[nextIndex]);
+            this.props.onNavigate({source: addEncryptedAuthTokenToURL(source), file});
+            this.scrollRef.current.scrollToIndex({index: nextIndex, animated: false});
             return {
                 page: nextIndex,
                 source,
@@ -156,11 +164,37 @@ class AttachmentCarousel extends React.Component {
         });
     }
 
+    onMainLayout = ({nativeEvent}) => {
+        this.setState({layout: nativeEvent.layout});
+    }
+
+    getItemLayout = (data, index) => {
+        const width = this.state.layout.width;
+        return ({
+            length: width,
+            offset: width * index,
+            index,
+        });
+    }
+
+    renderItem = ({item}) => {
+        console.log('item: ', item);
+
+        return (
+            <CarouselItem
+                onPress={() => this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
+                source={item.source}
+                file={item.file}
+            />
+        );
+    }
+
     render() {
         const isPageSet = Number.isInteger(this.state.page);
-        const authSource = addEncryptedAuthTokenToURL(this.state.source);
+
         return (
             <View
+                onLayout={this.onMainLayout}
                 style={[styles.attachmentModalArrowsContainer]}
                 onMouseEnter={() => this.toggleArrowsVisibility(true)}
                 onMouseLeave={() => this.toggleArrowsVisibility(false)}
@@ -204,11 +238,21 @@ class AttachmentCarousel extends React.Component {
                     onPress={() => this.canUseTouchScreen && this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
                     onCycleThroughAttachments={this.cycleThroughAttachments}
                 >
-                    <AttachmentView
-                        onPress={() => this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
-                        source={authSource}
-                        key={authSource}
-                        file={this.state.file}
+                    <VirtualizedList
+                        horizontal
+                        ref={this.scrollRef}
+                        initialScrollIndex={this.state.page}
+                        initialNumToRender={1}
+                        windowSize={5}
+                        data={this.state.attachments}
+                        contentContainerStyle={[styles.flex1]}
+                        style={[styles.flex1]}
+                        CellRendererComponent={CellRendererComponent}
+                        renderItem={this.renderItem}
+                        getItemLayout={this.getItemLayout}
+                        keyExtractor={item => item.source}
+                        getItemCount={() => this.state.attachments.length}
+                        getItem={(data, i) => this.getAttachment(data[i])}
                     />
                 </CarouselActions>
             </View>
@@ -216,6 +260,18 @@ class AttachmentCarousel extends React.Component {
     }
 }
 
+function CarouselItem(props) {
+    const authSource = addEncryptedAuthTokenToURL(props.source);
+
+    return (
+        <AttachmentView
+            onPress={props.onPress}
+            source={authSource}
+            file={props.file}
+        />
+    );
+}
+
 AttachmentCarousel.propTypes = propTypes;
 AttachmentCarousel.defaultProps = defaultProps;
 

From 61debcca878afeec7fd2595b93dbf27df5c9e1b2 Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Tue, 4 Apr 2023 17:32:34 +0300
Subject: [PATCH 02/13] AttachmentCarousel: Use window layout dimensions

---
 src/components/AttachmentCarousel/index.js | 35 +++++++++-------------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index f11b52cb0ff3..53bc8ae899cf 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -18,6 +18,7 @@ import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes
 import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
 import Tooltip from '../Tooltip';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import compose from '../../libs/compose';
 
 const propTypes = {
@@ -31,6 +32,7 @@ const propTypes = {
     reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
 
     ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -57,7 +59,6 @@ class AttachmentCarousel extends React.Component {
             shouldShowArrow: this.canUseTouchScreen,
             isForwardDisabled: true,
             isBackDisabled: true,
-            layout: {},
         };
 
         this.scrollRef = React.createRef();
@@ -164,12 +165,8 @@ class AttachmentCarousel extends React.Component {
         });
     }
 
-    onMainLayout = ({nativeEvent}) => {
-        this.setState({layout: nativeEvent.layout});
-    }
-
     getItemLayout = (data, index) => {
-        const width = this.state.layout.width;
+        const width = this.props.windowWidth;
         return ({
             length: width,
             offset: width * index,
@@ -177,24 +174,19 @@ class AttachmentCarousel extends React.Component {
         });
     }
 
-    renderItem = ({item}) => {
-        console.log('item: ', item);
-
-        return (
-            <CarouselItem
-                onPress={() => this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
-                source={item.source}
-                file={item.file}
-            />
-        );
-    }
+    renderItem = ({item}) => (
+        <CarouselItem
+            onPress={() => this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
+            source={item.source}
+            file={item.file}
+        />
+    )
 
     render() {
         const isPageSet = Number.isInteger(this.state.page);
 
         return (
             <View
-                onLayout={this.onMainLayout}
                 style={[styles.attachmentModalArrowsContainer]}
                 onMouseEnter={() => this.toggleArrowsVisibility(true)}
                 onMouseLeave={() => this.toggleArrowsVisibility(false)}
@@ -240,13 +232,13 @@ class AttachmentCarousel extends React.Component {
                 >
                     <VirtualizedList
                         horizontal
+                        scrollEnabled={false}
                         ref={this.scrollRef}
                         initialScrollIndex={this.state.page}
-                        initialNumToRender={1}
-                        windowSize={5}
+                        initialNumToRender={3}
+                        windowSize={3}
                         data={this.state.attachments}
                         contentContainerStyle={[styles.flex1]}
-                        style={[styles.flex1]}
                         CellRendererComponent={CellRendererComponent}
                         renderItem={this.renderItem}
                         getItemLayout={this.getItemLayout}
@@ -283,4 +275,5 @@ export default compose(
         },
     }),
     withLocalize,
+    withWindowDimensions,
 )(AttachmentCarousel);

From 7ef2e1f012e040ef5439104673271bdab33c89ea Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Wed, 5 Apr 2023 11:35:22 +0300
Subject: [PATCH 03/13] AttachmentCarousel: Make virtual list work in mobile

---
 src/components/AttachmentCarousel/index.js | 120 ++++++++++-----------
 1 file changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 53bc8ae899cf..422bc737c227 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, VirtualizedList} from 'react-native';
+import {View, FlatList} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -41,10 +41,6 @@ const defaultProps = {
     onNavigate: () => {},
 };
 
-function CellRendererComponent(props) {
-    return <View {...props} style={[props.style, styles.w100]} />;
-}
-
 class AttachmentCarousel extends React.Component {
     constructor(props) {
         super(props);
@@ -61,11 +57,12 @@ class AttachmentCarousel extends React.Component {
             isBackDisabled: true,
         };
 
-        this.scrollRef = React.createRef();
-    }
+        this.state = {
+            ...this.state,
+            ...this.makeStateWithReports(),
+        };
 
-    componentDidMount() {
-        this.makeStateWithReports();
+        this.scrollRef = React.createRef();
     }
 
     componentDidUpdate(prevProps) {
@@ -74,7 +71,9 @@ class AttachmentCarousel extends React.Component {
         if (previousReportActionsCount === currentReportActionsCount) {
             return;
         }
-        this.makeStateWithReports();
+
+        const nextState = this.makeStateWithReports();
+        this.setState(nextState);
     }
 
     /**
@@ -104,7 +103,7 @@ class AttachmentCarousel extends React.Component {
      * This is called when there are new reports to set the state
      */
     makeStateWithReports() {
-        let page = this.state.page;
+        let page = 0;
         const actions = ReportActionsUtils.getSortedReportActions(_.values(this.props.reportActions), true);
 
         /**
@@ -133,12 +132,12 @@ class AttachmentCarousel extends React.Component {
             }
         });
 
-        this.setState({
+        return {
             page,
             attachments,
             isForwardDisabled: page === 0,
             isBackDisabled: page === attachments.length - 1,
-        });
+        };
     }
 
     /**
@@ -166,7 +165,7 @@ class AttachmentCarousel extends React.Component {
     }
 
     getItemLayout = (data, index) => {
-        const width = this.props.windowWidth;
+        const width = this.width || this.props.windowWidth;
         return ({
             length: width,
             offset: width * index,
@@ -174,24 +173,33 @@ class AttachmentCarousel extends React.Component {
         });
     }
 
-    renderItem = ({item}) => (
-        <CarouselItem
-            onPress={() => this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
-            source={item.source}
-            file={item.file}
-        />
+    renderItem = ({item}) => {
+        const authSource = addEncryptedAuthTokenToURL(item.source);
+
+        return (
+            <AttachmentView
+                onPress={() => this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
+                source={authSource}
+                file={item.file}
+            />
+        );
+    }
+
+    renderCell = props => (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <View {...props} style={[props.style, styles.flex1]} />
     )
 
-    render() {
-        const isPageSet = Number.isInteger(this.state.page);
+    keyExtractor = item => item.source
 
+    render() {
         return (
             <View
-                style={[styles.attachmentModalArrowsContainer]}
+                style={[styles.attachmentModalArrowsContainer, styles.flex1]}
                 onMouseEnter={() => this.toggleArrowsVisibility(true)}
                 onMouseLeave={() => this.toggleArrowsVisibility(false)}
             >
-                {(isPageSet && this.state.shouldShowArrow) && (
+                {this.state.shouldShowArrow && (
                     <>
                         {!this.state.isBackDisabled && (
                             <View style={styles.leftAttachmentArrow}>
@@ -223,47 +231,39 @@ class AttachmentCarousel extends React.Component {
                         )}
                     </>
                 )}
-                <CarouselActions
-                    styles={[styles.attachmentModalArrowsContainer]}
-                    canSwipeLeft={!this.state.isBackDisabled}
-                    canSwipeRight={!this.state.isForwardDisabled}
-                    onPress={() => this.canUseTouchScreen && this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
-                    onCycleThroughAttachments={this.cycleThroughAttachments}
-                >
-                    <VirtualizedList
-                        horizontal
-                        scrollEnabled={false}
-                        ref={this.scrollRef}
-                        initialScrollIndex={this.state.page}
-                        initialNumToRender={3}
-                        windowSize={3}
-                        data={this.state.attachments}
-                        contentContainerStyle={[styles.flex1]}
-                        CellRendererComponent={CellRendererComponent}
-                        renderItem={this.renderItem}
-                        getItemLayout={this.getItemLayout}
-                        keyExtractor={item => item.source}
-                        getItemCount={() => this.state.attachments.length}
-                        getItem={(data, i) => this.getAttachment(data[i])}
-                    />
-                </CarouselActions>
+                <FlatList
+                    horizontal
+                    disableIntervalMomentum
+                    inverted={this.canUseTouchScreen}
+                    pagingEnabled
+                    decelerationRate="fast"
+                    showsHorizontalScrollIndicator={false}
+                    bounces={false}
+                    snapToAlignment="start"
+                    snapToInterval={this.width || this.props.windowWidth}
+
+                    // Enable scrolling by swiping on mobile (touch) devices only
+                    // disable scroll for desktop/browsers because they add their own scrollbars
+                    scrollEnabled={this.canUseTouchScreen}
+                    ref={this.scrollRef}
+                    initialScrollIndex={this.state.page}
+                    initialNumToRender={3}
+                    windowSize={15}
+                    maxToRenderPerBatch={3}
+                    updateCellsBatchingPeriod={250}
+                    data={this.state.attachments}
+                    contentContainerStyle={[styles.flexGrow1]}
+                    CellRendererComponent={this.renderCell}
+                    renderItem={this.renderItem}
+                    getItemLayout={this.getItemLayout}
+                    keyExtractor={this.keyExtractor}
+                    listKey="AttachmentCarousel"
+                />
             </View>
         );
     }
 }
 
-function CarouselItem(props) {
-    const authSource = addEncryptedAuthTokenToURL(props.source);
-
-    return (
-        <AttachmentView
-            onPress={props.onPress}
-            source={authSource}
-            file={props.file}
-        />
-    );
-}
-
 AttachmentCarousel.propTypes = propTypes;
 AttachmentCarousel.defaultProps = defaultProps;
 

From 724642426a5096b60ad80d2df15d0b492494b977 Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Wed, 5 Apr 2023 16:07:39 +0300
Subject: [PATCH 04/13] AttachmentCarousel: Fix flicker navigating back on
 mobile

---
 src/components/AttachmentCarousel/index.js |  4 ++--
 src/components/ImageView/index.native.js   | 11 ++++-------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 422bc737c227..1707205298a9 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -153,7 +153,7 @@ class AttachmentCarousel extends React.Component {
             const nextIndex = page - deltaSlide;
             const {source, file} = this.getAttachment(attachments[nextIndex]);
             this.props.onNavigate({source: addEncryptedAuthTokenToURL(source), file});
-            this.scrollRef.current.scrollToIndex({index: nextIndex, animated: false});
+            this.scrollRef.current.scrollToIndex({index: nextIndex, animated: true});
             return {
                 page: nextIndex,
                 source,
@@ -248,7 +248,7 @@ class AttachmentCarousel extends React.Component {
                     ref={this.scrollRef}
                     initialScrollIndex={this.state.page}
                     initialNumToRender={3}
-                    windowSize={15}
+                    windowSize={7}
                     maxToRenderPerBatch={3}
                     updateCellsBatchingPeriod={250}
                     data={this.state.attachments}
diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js
index 11732715b941..d2f808e56aab 100644
--- a/src/components/ImageView/index.native.js
+++ b/src/components/ImageView/index.native.js
@@ -37,10 +37,11 @@ class ImageView extends PureComponent {
         super(props);
 
         this.state = {
-            isLoading: true,
+            isLoaded: false,
             imageWidth: 0,
             imageHeight: 0,
             interactionPromise: undefined,
+            containerHeight: props.windowHeight,
         };
 
         // Use the default double click interval from the ImageZoom library
@@ -121,7 +122,7 @@ class ImageView extends PureComponent {
             const maxDimensionsScale = 11;
             imageWidth = Math.min(imageWidth, (containerWidth * maxDimensionsScale));
             imageHeight = Math.min(imageHeight, (containerHeight * maxDimensionsScale));
-            this.setState({imageHeight, imageWidth, isLoading: false});
+            this.setState({imageHeight, imageWidth, isLoaded: true});
         });
     }
 
@@ -145,18 +146,14 @@ class ImageView extends PureComponent {
     }
 
     imageLoadingStart() {
-        if (this.state.isLoading) {
-            return;
-        }
         this.resetImageZoom();
-        this.setState({imageHeight: 0, imageWidth: 0, isLoading: true});
     }
 
     render() {
         // Default windowHeight accounts for the modal header height
         const windowHeight = this.props.windowHeight - variables.contentHeaderHeight;
         const hasImageDimensions = this.state.imageWidth !== 0 && this.state.imageHeight !== 0;
-        const shouldShowLoadingIndicator = this.state.isLoading || !hasImageDimensions;
+        const shouldShowLoadingIndicator = !this.state.isLoaded || !hasImageDimensions;
 
         // Zoom view should be loaded only after measuring actual image dimensions, otherwise it causes blurred images on Android
         return (

From 478c497ea573e7b406840aa13186b2c0a5b0a605 Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Wed, 5 Apr 2023 20:16:46 +0300
Subject: [PATCH 05/13] AttachmentCarousel: fix navigation

---
 src/components/AttachmentCarousel/index.js | 62 +++++++++++++---------
 1 file changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 1707205298a9..07bba9ba10bf 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -6,7 +6,6 @@ import _ from 'underscore';
 import * as Expensicons from '../Icon/Expensicons';
 import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
-import CarouselActions from './CarouselActions';
 import Button from '../Button';
 import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
 import AttachmentView from '../AttachmentView';
@@ -46,6 +45,11 @@ class AttachmentCarousel extends React.Component {
         super(props);
 
         this.canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
+        this.viewabilityConfig = {
+            // To facilitate paging through the attachments, we want to consider an item "viewable" when it is
+            // more than 90% visible. When that happens we update the page index in the state.
+            itemVisiblePercentThreshold: 95,
+        };
         this.cycleThroughAttachments = this.cycleThroughAttachments.bind(this);
 
         this.state = {
@@ -53,8 +57,6 @@ class AttachmentCarousel extends React.Component {
             attachments: [],
             source: this.props.source,
             shouldShowArrow: this.canUseTouchScreen,
-            isForwardDisabled: true,
-            isBackDisabled: true,
         };
 
         this.state = {
@@ -135,8 +137,6 @@ class AttachmentCarousel extends React.Component {
         return {
             page,
             attachments,
-            isForwardDisabled: page === 0,
-            isBackDisabled: page === attachments.length - 1,
         };
     }
 
@@ -145,23 +145,14 @@ class AttachmentCarousel extends React.Component {
      * @param {Number} deltaSlide
     */
     cycleThroughAttachments(deltaSlide) {
-        if ((deltaSlide > 0 && this.state.isForwardDisabled) || (deltaSlide < 0 && this.state.isBackDisabled)) {
+        const nextIndex = this.state.page - deltaSlide;
+        const nextItem = this.state.attachments[nextIndex];
+
+        if (!nextItem) {
             return;
         }
 
-        this.setState(({attachments, page}) => {
-            const nextIndex = page - deltaSlide;
-            const {source, file} = this.getAttachment(attachments[nextIndex]);
-            this.props.onNavigate({source: addEncryptedAuthTokenToURL(source), file});
-            this.scrollRef.current.scrollToIndex({index: nextIndex, animated: true});
-            return {
-                page: nextIndex,
-                source,
-                file,
-                isBackDisabled: nextIndex === attachments.length - 1,
-                isForwardDisabled: nextIndex === 0,
-            };
-        });
+        this.scrollRef.current.scrollToIndex({index: nextIndex, animated: true});
     }
 
     getItemLayout = (data, index) => {
@@ -192,7 +183,28 @@ class AttachmentCarousel extends React.Component {
 
     keyExtractor = item => item.source
 
+    /**
+     * Updates the page state when the user navigates between attachments
+     * @param {Array<{item: *, index: Number}>} viewableItems
+     */
+    updatePage = ({viewableItems}) => {
+        // Since we can have only one item in view at a time, we can use the first item in the array
+        // to get the index of the current page
+        const entry = _.first(viewableItems);
+        if (!entry) {
+            return;
+        }
+
+        const page = entry.index;
+        const {source, file} = this.getAttachment(entry.item);
+        this.props.onNavigate({source: addEncryptedAuthTokenToURL(source), file});
+        this.setState({page, source});
+    }
+
     render() {
+        const isForwardDisabled = this.state.page === 0;
+        const isBackDisabled = this.state.page === _.size(this.state.attachments) - 1;
+
         return (
             <View
                 style={[styles.attachmentModalArrowsContainer, styles.flex1]}
@@ -201,7 +213,7 @@ class AttachmentCarousel extends React.Component {
             >
                 {this.state.shouldShowArrow && (
                     <>
-                        {!this.state.isBackDisabled && (
+                        {!isBackDisabled && (
                             <View style={styles.leftAttachmentArrow}>
                                 <Tooltip text={this.props.translate('common.previous')}>
                                     <Button
@@ -215,7 +227,7 @@ class AttachmentCarousel extends React.Component {
                                 </Tooltip>
                             </View>
                         )}
-                        {!this.state.isForwardDisabled && (
+                        {!isForwardDisabled && (
                             <View style={styles.rightAttachmentArrow}>
                                 <Tooltip text={this.props.translate('common.next')}>
                                     <Button
@@ -232,15 +244,16 @@ class AttachmentCarousel extends React.Component {
                     </>
                 )}
                 <FlatList
+                    listKey="AttachmentCarousel"
                     horizontal
                     disableIntervalMomentum
-                    inverted={this.canUseTouchScreen}
                     pagingEnabled
+                    inverted={this.canUseTouchScreen}
                     decelerationRate="fast"
                     showsHorizontalScrollIndicator={false}
                     bounces={false}
                     snapToAlignment="start"
-                    snapToInterval={this.width || this.props.windowWidth}
+                    snapToInterval={this.props.windowWidth}
 
                     // Enable scrolling by swiping on mobile (touch) devices only
                     // disable scroll for desktop/browsers because they add their own scrollbars
@@ -257,7 +270,8 @@ class AttachmentCarousel extends React.Component {
                     renderItem={this.renderItem}
                     getItemLayout={this.getItemLayout}
                     keyExtractor={this.keyExtractor}
-                    listKey="AttachmentCarousel"
+                    viewabilityConfig={this.viewabilityConfig}
+                    onViewableItemsChanged={this.updatePage}
                 />
             </View>
         );

From 325351a7830a1751878758fe0b372e2192d4efb3 Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Wed, 5 Apr 2023 20:21:54 +0300
Subject: [PATCH 06/13] AttachmentCarousel: Add back "CarouselActions"

---
 .../CarouselActions/index.native.js           | 78 +------------------
 src/components/AttachmentCarousel/index.js    |  2 +
 2 files changed, 3 insertions(+), 77 deletions(-)

diff --git a/src/components/AttachmentCarousel/CarouselActions/index.native.js b/src/components/AttachmentCarousel/CarouselActions/index.native.js
index ebc7b7768077..d7517d1dacd0 100644
--- a/src/components/AttachmentCarousel/CarouselActions/index.native.js
+++ b/src/components/AttachmentCarousel/CarouselActions/index.native.js
@@ -1,79 +1,3 @@
-import React, {Component} from 'react';
-import {PanResponder, Dimensions, Animated} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../../../styles/styles';
-
-const propTypes = {
-    /** Attachment that's rendered */
-    children: PropTypes.element.isRequired,
-
-    /** Callback to fire when swiping left or right */
-    onCycleThroughAttachments: PropTypes.func.isRequired,
-
-    /** Callback to handle a press event */
-    onPress: PropTypes.func.isRequired,
-
-    /** Boolean to prevent a left swipe action */
-    canSwipeLeft: PropTypes.bool.isRequired,
-
-    /** Boolean to prevent a right swipe action */
-    canSwipeRight: PropTypes.bool.isRequired,
-};
-
-class Carousel extends Component {
-    constructor(props) {
-        super(props);
-        this.pan = new Animated.Value(0);
-
-        this.panResponder = PanResponder.create({
-            onStartShouldSetPanResponder: () => true,
-
-            onPanResponderMove: (event, gestureState) => Animated.event([null, {
-                dx: this.pan,
-            }], {useNativeDriver: false})(event, gestureState),
-
-            onPanResponderRelease: (event, gestureState) => {
-                if (gestureState.dx === 0 && gestureState.dy === 0) {
-                    return this.props.onPress();
-                }
-
-                const deltaSlide = gestureState.dx > 0 ? 1 : -1;
-                if (Math.abs(gestureState.vx) < 1 || (deltaSlide === 1 && !this.props.canSwipeLeft) || (deltaSlide === -1 && !this.props.canSwipeRight)) {
-                    return Animated.spring(this.pan, {useNativeDriver: false, toValue: 0}).start();
-                }
-
-                const width = Dimensions.get('window').width;
-                const slideLength = deltaSlide * (width * 1.1);
-                Animated.timing(this.pan, {useNativeDriver: false, duration: 100, toValue: slideLength}).start(({finished}) => {
-                    if (!finished) {
-                        return;
-                    }
-
-                    this.props.onCycleThroughAttachments(-deltaSlide);
-                    this.pan.setValue(-slideLength);
-                    Animated.timing(this.pan, {useNativeDriver: false, duration: 100, toValue: 0}).start();
-                });
-            },
-        });
-    }
-
-    render() {
-        return (
-            <Animated.View
-                style={[
-                    styles.w100,
-                    styles.h100,
-                    {transform: [{translateX: this.pan}]},
-                ]}
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...this.panResponder.panHandlers}
-            >
-                {this.props.children}
-            </Animated.View>
-        );
-    }
-}
-
-Carousel.propTypes = propTypes;
+const Carousel = ({children}) => children;
 
 export default Carousel;
diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 07bba9ba10bf..a25c2fddd437 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -19,6 +19,7 @@ import Tooltip from '../Tooltip';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import compose from '../../libs/compose';
+import CarouselActions from './CarouselActions';
 
 const propTypes = {
     /** source is used to determine the starting index in the array of attachments */
@@ -273,6 +274,7 @@ class AttachmentCarousel extends React.Component {
                     viewabilityConfig={this.viewabilityConfig}
                     onViewableItemsChanged={this.updatePage}
                 />
+                <CarouselActions onCycleThroughAttachments={this.cycleThroughAttachments} />
             </View>
         );
     }

From a121c70b1d27573e79a27a30f28d1d59ae439a9b Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Wed, 5 Apr 2023 20:40:24 +0300
Subject: [PATCH 07/13] AttachmentCarousel: address eslint errors and add
 documentation

---
 src/components/AttachmentCarousel/index.js | 86 +++++++++++++---------
 1 file changed, 52 insertions(+), 34 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index a25c2fddd437..12d313a02bfe 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -45,16 +45,21 @@ class AttachmentCarousel extends React.Component {
     constructor(props) {
         super(props);
 
+        this.scrollRef = React.createRef();
         this.canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
         this.viewabilityConfig = {
             // To facilitate paging through the attachments, we want to consider an item "viewable" when it is
             // more than 90% visible. When that happens we update the page index in the state.
             itemVisiblePercentThreshold: 95,
         };
+
         this.cycleThroughAttachments = this.cycleThroughAttachments.bind(this);
+        this.getItemLayout = this.getItemLayout.bind(this);
+        this.renderItem = this.renderItem.bind(this);
+        this.renderCell = this.renderCell.bind(this);
+        this.updatePage = this.updatePage.bind(this);
 
         this.state = {
-            page: 0,
             attachments: [],
             source: this.props.source,
             shouldShowArrow: this.canUseTouchScreen,
@@ -64,8 +69,6 @@ class AttachmentCarousel extends React.Component {
             ...this.state,
             ...this.makeStateWithReports(),
         };
-
-        this.scrollRef = React.createRef();
     }
 
     componentDidUpdate(prevProps) {
@@ -94,6 +97,21 @@ class AttachmentCarousel extends React.Component {
         };
     }
 
+    /**
+     * Calculate items layout information to optimize scrolling performance
+     * @param {*} data
+     * @param {Number} index
+     * @returns {{offset: Number, length: Number, index: Number}}
+     */
+    getItemLayout(data, index) {
+        const width = this.props.windowWidth;
+        return ({
+            length: width,
+            offset: width * index,
+            index,
+        });
+    }
+
     /**
      * Toggles the visibility of the arrows
      * @param {Boolean} shouldShowArrow
@@ -103,7 +121,8 @@ class AttachmentCarousel extends React.Component {
     }
 
     /**
-     * This is called when there are new reports to set the state
+     * Map report actions to attachment items
+     * @returns {{attachments: Array<{source: String, file: {name: String}}>, page: Number}}
      */
     makeStateWithReports() {
         let page = 0;
@@ -156,39 +175,11 @@ class AttachmentCarousel extends React.Component {
         this.scrollRef.current.scrollToIndex({index: nextIndex, animated: true});
     }
 
-    getItemLayout = (data, index) => {
-        const width = this.width || this.props.windowWidth;
-        return ({
-            length: width,
-            offset: width * index,
-            index,
-        });
-    }
-
-    renderItem = ({item}) => {
-        const authSource = addEncryptedAuthTokenToURL(item.source);
-
-        return (
-            <AttachmentView
-                onPress={() => this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
-                source={authSource}
-                file={item.file}
-            />
-        );
-    }
-
-    renderCell = props => (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <View {...props} style={[props.style, styles.flex1]} />
-    )
-
-    keyExtractor = item => item.source
-
     /**
      * Updates the page state when the user navigates between attachments
      * @param {Array<{item: *, index: Number}>} viewableItems
      */
-    updatePage = ({viewableItems}) => {
+    updatePage({viewableItems}) {
         // Since we can have only one item in view at a time, we can use the first item in the array
         // to get the index of the current page
         const entry = _.first(viewableItems);
@@ -202,6 +193,33 @@ class AttachmentCarousel extends React.Component {
         this.setState({page, source});
     }
 
+    /**
+     * Defines how a container for a single attachment should be rendered
+     * @param {Object} props
+     * @returns {JSX.Element}
+     */
+    renderCell(props) {
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return <View {...props} style={[props.style, styles.flex1]} />;
+    }
+
+    /**
+     * Defines how a single attachment should be rendered
+     * @param {{ source: String, file: { name: String } }} item
+     * @returns {JSX.Element}
+     */
+    renderItem({item}) {
+        const authSource = addEncryptedAuthTokenToURL(item.source);
+
+        return (
+            <AttachmentView
+                onPress={() => this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
+                source={authSource}
+                file={item.file}
+            />
+        );
+    }
+
     render() {
         const isForwardDisabled = this.state.page === 0;
         const isBackDisabled = this.state.page === _.size(this.state.attachments) - 1;
@@ -270,7 +288,7 @@ class AttachmentCarousel extends React.Component {
                     CellRendererComponent={this.renderCell}
                     renderItem={this.renderItem}
                     getItemLayout={this.getItemLayout}
-                    keyExtractor={this.keyExtractor}
+                    keyExtractor={item => item.source}
                     viewabilityConfig={this.viewabilityConfig}
                     onViewableItemsChanged={this.updatePage}
                 />

From 9ebc5940225e3972e0d2e79da43b0bbeb59751fc Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Wed, 5 Apr 2023 21:46:58 +0300
Subject: [PATCH 08/13] AttachmentCarousel: fix web & mobile web rendering
 issues

Large `updateCellsBatchingPeriod` values affect negatively swiping
because view is getting added and removed and this causes the list
content to shift

When we don't set `updateCellsBatchingPeriod` this happens quicker
and is less if even noticeable
---
 .../CarouselActions/index.js                  |  6 ------
 .../CarouselActions/index.native.js           |  3 ++-
 src/components/AttachmentCarousel/index.js    | 20 ++++++++++---------
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/AttachmentCarousel/CarouselActions/index.js b/src/components/AttachmentCarousel/CarouselActions/index.js
index 26af8917a04a..6f75f6774810 100644
--- a/src/components/AttachmentCarousel/CarouselActions/index.js
+++ b/src/components/AttachmentCarousel/CarouselActions/index.js
@@ -11,12 +11,6 @@ const propTypes = {
 
     /** Styles to be assigned to Carousel */
     styles: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-
-    /** Children to render */
-    children: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.node,
-    ]).isRequired,
 };
 
 class Carousel extends React.Component {
diff --git a/src/components/AttachmentCarousel/CarouselActions/index.native.js b/src/components/AttachmentCarousel/CarouselActions/index.native.js
index d7517d1dacd0..69df7784141c 100644
--- a/src/components/AttachmentCarousel/CarouselActions/index.native.js
+++ b/src/components/AttachmentCarousel/CarouselActions/index.native.js
@@ -1,3 +1,4 @@
-const Carousel = ({children}) => children;
+// No need to implement this in native, because all the native actions (swiping) are handled by the parent component
+const Carousel = () => {};
 
 export default Carousel;
diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 12d313a02bfe..59a08db29af7 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -172,7 +172,9 @@ class AttachmentCarousel extends React.Component {
             return;
         }
 
-        this.scrollRef.current.scrollToIndex({index: nextIndex, animated: true});
+        // The sliding transition is a bit too much on web, because of the wider and bigger images,
+        // so we only enable it for mobile
+        this.scrollRef.current.scrollToIndex({index: nextIndex, animated: this.canUseTouchScreen});
     }
 
     /**
@@ -200,7 +202,7 @@ class AttachmentCarousel extends React.Component {
      */
     renderCell(props) {
         // eslint-disable-next-line react/jsx-props-no-spreading
-        return <View {...props} style={[props.style, styles.flex1]} />;
+        return <View {...props} style={[props.style, styles.h100, {width: this.props.windowWidth}]} />;
     }
 
     /**
@@ -265,26 +267,26 @@ class AttachmentCarousel extends React.Component {
                 <FlatList
                     listKey="AttachmentCarousel"
                     horizontal
-                    disableIntervalMomentum
-                    pagingEnabled
-                    inverted={this.canUseTouchScreen}
+                    inverted
                     decelerationRate="fast"
                     showsHorizontalScrollIndicator={false}
                     bounces={false}
+
+                    // Scroll only one image at a time no matter how fast the user swipes
+                    disableIntervalMomentum
+                    pagingEnabled
                     snapToAlignment="start"
                     snapToInterval={this.props.windowWidth}
 
                     // Enable scrolling by swiping on mobile (touch) devices only
-                    // disable scroll for desktop/browsers because they add their own scrollbars
+                    // disable scroll for desktop/browsers because they add their scrollbars
                     scrollEnabled={this.canUseTouchScreen}
                     ref={this.scrollRef}
                     initialScrollIndex={this.state.page}
                     initialNumToRender={3}
-                    windowSize={7}
+                    windowSize={5}
                     maxToRenderPerBatch={3}
-                    updateCellsBatchingPeriod={250}
                     data={this.state.attachments}
-                    contentContainerStyle={[styles.flexGrow1]}
                     CellRendererComponent={this.renderCell}
                     renderItem={this.renderItem}
                     getItemLayout={this.getItemLayout}

From d6a5ba1571d026ce26facd4fb21033addad32cf6 Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Wed, 5 Apr 2023 23:41:27 +0300
Subject: [PATCH 09/13] Attachment Carousel: Pressing over should show/hide the
 navigation arrows for touch devices

---
 .../CarouselActions/index.js                  | 14 ++------
 src/components/AttachmentCarousel/index.js    | 32 ++++++++++++-------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/components/AttachmentCarousel/CarouselActions/index.js b/src/components/AttachmentCarousel/CarouselActions/index.js
index 6f75f6774810..9144f0c7d0d1 100644
--- a/src/components/AttachmentCarousel/CarouselActions/index.js
+++ b/src/components/AttachmentCarousel/CarouselActions/index.js
@@ -1,16 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Pressable} from 'react-native';
 
 const propTypes = {
-    /** Handles onPress events with a callback  */
-    onPress: PropTypes.func.isRequired,
-
     /** Callback to cycle through attachments */
     onCycleThroughAttachments: PropTypes.func.isRequired,
-
-    /** Styles to be assigned to Carousel */
-    styles: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };
 
 class Carousel extends React.Component {
@@ -45,11 +38,8 @@ class Carousel extends React.Component {
     }
 
     render() {
-        return (
-            <Pressable style={this.props.styles} onPress={this.props.onPress}>
-                {this.props.children}
-            </Pressable>
-        );
+        // This component is only used to listen for keyboard events
+        return null;
     }
 }
 
diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 59a08db29af7..cde2ab9757d9 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -1,11 +1,12 @@
 import React from 'react';
-import {View, FlatList} from 'react-native';
+import {View, FlatList, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import * as Expensicons from '../Icon/Expensicons';
 import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
+import CarouselActions from './CarouselActions';
 import Button from '../Button';
 import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
 import AttachmentView from '../AttachmentView';
@@ -19,7 +20,6 @@ import Tooltip from '../Tooltip';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import compose from '../../libs/compose';
-import CarouselActions from './CarouselActions';
 
 const propTypes = {
     /** source is used to determine the starting index in the array of attachments */
@@ -201,8 +201,23 @@ class AttachmentCarousel extends React.Component {
      * @returns {JSX.Element}
      */
     renderCell(props) {
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        return <View {...props} style={[props.style, styles.h100, {width: this.props.windowWidth}]} />;
+        const style = [props.style, styles.h100, {width: this.props.windowWidth}];
+
+        // Touch screen devices can toggle between showing and hiding the arrows by tapping on the image/container
+        // Other devices toggle the arrows through hovering (mouse) instead (see render() root element)
+        if (!this.canUseTouchScreen) {
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            return <View {...props} style={style} />;
+        }
+
+        return (
+            <Pressable
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                onPress={() => this.setState(current => ({shouldShowArrow: !current.shouldShowArrow}))}
+                style={style}
+            />
+        );
     }
 
     /**
@@ -212,14 +227,7 @@ class AttachmentCarousel extends React.Component {
      */
     renderItem({item}) {
         const authSource = addEncryptedAuthTokenToURL(item.source);
-
-        return (
-            <AttachmentView
-                onPress={() => this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
-                source={authSource}
-                file={item.file}
-            />
-        );
+        return <AttachmentView source={authSource} file={item.file} />;
     }
 
     render() {

From 3b818309a8680beefe4c976d52a29732071bf1fc Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Wed, 5 Apr 2023 23:43:27 +0300
Subject: [PATCH 10/13] ImageView: discard my changes - no longer necessary

These changes were necessary to alleviate a bug that happened because image width/height
would briefly be set to 0 and there was a noticeable jump while scrolling

At some point the issue disappeared on its own, probably because of less re-renders
---
 src/components/ImageView/index.native.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js
index d2f808e56aab..11732715b941 100644
--- a/src/components/ImageView/index.native.js
+++ b/src/components/ImageView/index.native.js
@@ -37,11 +37,10 @@ class ImageView extends PureComponent {
         super(props);
 
         this.state = {
-            isLoaded: false,
+            isLoading: true,
             imageWidth: 0,
             imageHeight: 0,
             interactionPromise: undefined,
-            containerHeight: props.windowHeight,
         };
 
         // Use the default double click interval from the ImageZoom library
@@ -122,7 +121,7 @@ class ImageView extends PureComponent {
             const maxDimensionsScale = 11;
             imageWidth = Math.min(imageWidth, (containerWidth * maxDimensionsScale));
             imageHeight = Math.min(imageHeight, (containerHeight * maxDimensionsScale));
-            this.setState({imageHeight, imageWidth, isLoaded: true});
+            this.setState({imageHeight, imageWidth, isLoading: false});
         });
     }
 
@@ -146,14 +145,18 @@ class ImageView extends PureComponent {
     }
 
     imageLoadingStart() {
+        if (this.state.isLoading) {
+            return;
+        }
         this.resetImageZoom();
+        this.setState({imageHeight: 0, imageWidth: 0, isLoading: true});
     }
 
     render() {
         // Default windowHeight accounts for the modal header height
         const windowHeight = this.props.windowHeight - variables.contentHeaderHeight;
         const hasImageDimensions = this.state.imageWidth !== 0 && this.state.imageHeight !== 0;
-        const shouldShowLoadingIndicator = !this.state.isLoaded || !hasImageDimensions;
+        const shouldShowLoadingIndicator = this.state.isLoading || !hasImageDimensions;
 
         // Zoom view should be loaded only after measuring actual image dimensions, otherwise it causes blurred images on Android
         return (

From b7907cf6114f296b843835a0937fb876698506f0 Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Wed, 12 Apr 2023 11:58:13 +0300
Subject: [PATCH 11/13] AttachmentCarousel: fix mouse/trackpad issues on
 web/desktop

---
 src/components/AttachmentCarousel/index.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index cde2ab9757d9..b9901b4472e5 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -163,7 +163,7 @@ class AttachmentCarousel extends React.Component {
     /**
      * Increments or decrements the index to get another selected item
      * @param {Number} deltaSlide
-    */
+     */
     cycleThroughAttachments(deltaSlide) {
         const nextIndex = this.state.page - deltaSlide;
         const nextItem = this.state.attachments[nextIndex];
@@ -275,7 +275,13 @@ class AttachmentCarousel extends React.Component {
                 <FlatList
                     listKey="AttachmentCarousel"
                     horizontal
-                    inverted
+
+                    // Inverting the list for touchscreen devices that can swipe or have an animation when scrolling
+                    // promotes the natural feeling of swiping left/right to go to the next/previous image
+                    // We don't want to invert the list for desktop/web because this interferes with mouse
+                    // wheel or trackpad scrolling (in cases like document preview where you can scroll vertically)
+                    inverted={this.canUseTouchScreen}
+
                     decelerationRate="fast"
                     showsHorizontalScrollIndicator={false}
                     bounces={false}

From 62678f7fc688ea127d53e80d7765a7e983282e8c Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Wed, 12 Apr 2023 12:10:12 +0300
Subject: [PATCH 12/13] AttachmentCarousel: use container width instead of
 window width

We can't guarantee the carousel will always be as wide as the
window, so it's better to use the containing layout width

For example
On web/desktop the carousel is not rendered in a fullscreen modal
and is slightly smaller than the whole window width
---
 src/components/AttachmentCarousel/index.js | 88 +++++++++++-----------
 1 file changed, 45 insertions(+), 43 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index b9901b4472e5..e0fe6e4b0df4 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -18,7 +18,6 @@ import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes
 import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
 import Tooltip from '../Tooltip';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import compose from '../../libs/compose';
 
 const propTypes = {
@@ -32,7 +31,6 @@ const propTypes = {
     reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
 
     ...withLocalizePropTypes,
-    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -63,6 +61,7 @@ class AttachmentCarousel extends React.Component {
             attachments: [],
             source: this.props.source,
             shouldShowArrow: this.canUseTouchScreen,
+            containerWidth: 0,
         };
 
         this.state = {
@@ -104,10 +103,9 @@ class AttachmentCarousel extends React.Component {
      * @returns {{offset: Number, length: Number, index: Number}}
      */
     getItemLayout(data, index) {
-        const width = this.props.windowWidth;
         return ({
-            length: width,
-            offset: width * index,
+            length: this.state.containerWidth,
+            offset: this.state.containerWidth * index,
             index,
         });
     }
@@ -201,7 +199,7 @@ class AttachmentCarousel extends React.Component {
      * @returns {JSX.Element}
      */
     renderCell(props) {
-        const style = [props.style, styles.h100, {width: this.props.windowWidth}];
+        const style = [props.style, styles.h100, {width: this.state.containerWidth}];
 
         // Touch screen devices can toggle between showing and hiding the arrows by tapping on the image/container
         // Other devices toggle the arrows through hovering (mouse) instead (see render() root element)
@@ -237,6 +235,7 @@ class AttachmentCarousel extends React.Component {
         return (
             <View
                 style={[styles.attachmentModalArrowsContainer, styles.flex1]}
+                onLayout={({nativeEvent}) => this.setState({containerWidth: nativeEvent.layout.width + 1})}
                 onMouseEnter={() => this.toggleArrowsVisibility(true)}
                 onMouseLeave={() => this.toggleArrowsVisibility(false)}
             >
@@ -272,42 +271,46 @@ class AttachmentCarousel extends React.Component {
                         )}
                     </>
                 )}
-                <FlatList
-                    listKey="AttachmentCarousel"
-                    horizontal
-
-                    // Inverting the list for touchscreen devices that can swipe or have an animation when scrolling
-                    // promotes the natural feeling of swiping left/right to go to the next/previous image
-                    // We don't want to invert the list for desktop/web because this interferes with mouse
-                    // wheel or trackpad scrolling (in cases like document preview where you can scroll vertically)
-                    inverted={this.canUseTouchScreen}
-
-                    decelerationRate="fast"
-                    showsHorizontalScrollIndicator={false}
-                    bounces={false}
-
-                    // Scroll only one image at a time no matter how fast the user swipes
-                    disableIntervalMomentum
-                    pagingEnabled
-                    snapToAlignment="start"
-                    snapToInterval={this.props.windowWidth}
-
-                    // Enable scrolling by swiping on mobile (touch) devices only
-                    // disable scroll for desktop/browsers because they add their scrollbars
-                    scrollEnabled={this.canUseTouchScreen}
-                    ref={this.scrollRef}
-                    initialScrollIndex={this.state.page}
-                    initialNumToRender={3}
-                    windowSize={5}
-                    maxToRenderPerBatch={3}
-                    data={this.state.attachments}
-                    CellRendererComponent={this.renderCell}
-                    renderItem={this.renderItem}
-                    getItemLayout={this.getItemLayout}
-                    keyExtractor={item => item.source}
-                    viewabilityConfig={this.viewabilityConfig}
-                    onViewableItemsChanged={this.updatePage}
-                />
+
+                {this.state.containerWidth > 0 && (
+                    <FlatList
+                        listKey="AttachmentCarousel"
+                        horizontal
+
+                        // Inverting the list for touchscreen devices that can swipe or have an animation when scrolling
+                        // promotes the natural feeling of swiping left/right to go to the next/previous image
+                        // We don't want to invert the list for desktop/web because this interferes with mouse
+                        // wheel or trackpad scrolling (in cases like document preview where you can scroll vertically)
+                        inverted={this.canUseTouchScreen}
+
+                        decelerationRate="fast"
+                        showsHorizontalScrollIndicator={false}
+                        bounces={false}
+
+                        // Scroll only one image at a time no matter how fast the user swipes
+                        disableIntervalMomentum
+                        pagingEnabled
+                        snapToAlignment="start"
+                        snapToInterval={this.state.containerWidth}
+
+                        // Enable scrolling by swiping on mobile (touch) devices only
+                        // disable scroll for desktop/browsers because they add their scrollbars
+                        scrollEnabled={this.canUseTouchScreen}
+                        ref={this.scrollRef}
+                        initialScrollIndex={this.state.page}
+                        initialNumToRender={3}
+                        windowSize={5}
+                        maxToRenderPerBatch={3}
+                        data={this.state.attachments}
+                        CellRendererComponent={this.renderCell}
+                        renderItem={this.renderItem}
+                        getItemLayout={this.getItemLayout}
+                        keyExtractor={item => item.source}
+                        viewabilityConfig={this.viewabilityConfig}
+                        onViewableItemsChanged={this.updatePage}
+                    />
+                )}
+
                 <CarouselActions onCycleThroughAttachments={this.cycleThroughAttachments} />
             </View>
         );
@@ -325,5 +328,4 @@ export default compose(
         },
     }),
     withLocalize,
-    withWindowDimensions,
 )(AttachmentCarousel);

From bd0fac0c79037627fd0813b63519a171c602e0da Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Mon, 17 Apr 2023 21:23:30 +0300
Subject: [PATCH 13/13] Refactor AttachmentCarousel: use componentDidMount for
 initial state

---
 src/components/AttachmentCarousel/index.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index e0fe6e4b0df4..0a2090dc39b9 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -63,11 +63,10 @@ class AttachmentCarousel extends React.Component {
             shouldShowArrow: this.canUseTouchScreen,
             containerWidth: 0,
         };
+    }
 
-        this.state = {
-            ...this.state,
-            ...this.makeStateWithReports(),
-        };
+    componentDidMount() {
+        this.makeStateWithReports();
     }
 
     componentDidUpdate(prevProps) {
@@ -77,8 +76,7 @@ class AttachmentCarousel extends React.Component {
             return;
         }
 
-        const nextState = this.makeStateWithReports();
-        this.setState(nextState);
+        this.makeStateWithReports();
     }
 
     /**
@@ -120,7 +118,6 @@ class AttachmentCarousel extends React.Component {
 
     /**
      * Map report actions to attachment items
-     * @returns {{attachments: Array<{source: String, file: {name: String}}>, page: Number}}
      */
     makeStateWithReports() {
         let page = 0;
@@ -152,10 +149,10 @@ class AttachmentCarousel extends React.Component {
             }
         });
 
-        return {
+        this.setState({
             page,
             attachments,
-        };
+        });
     }
 
     /**