Merge pull request #24356 from margelo/fix/attachment-caruousel-canus…

…etouchscreen

fix: check canUseTouchScreen on each render

src/components/Attachments/AttachmentCarousel/index.js

@@ -2,7 +2,6 @@ import React, {useRef, useCallback, useState, useEffect} from 'react';
 import {View, FlatList, PixelRatio, Keyboard} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 import styles from '../../../styles/styles';
 import CarouselActions from './CarouselActions';
 import withWindowDimensions from '../../withWindowDimensions';
@@ -19,8 +18,8 @@ import Navigation from '../../../libs/Navigation/Navigation';
 import BlockingView from '../../BlockingViews/BlockingView';
 import * as Illustrations from '../../Icon/Illustrations';
 import variables from '../../../styles/variables';
+import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 
-const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 const viewabilityConfig = {
     // To facilitate paging through the attachments, we want to consider an item "viewable" when it is
     // more than 95% visible. When that happens we update the page index in the state.
@@ -31,6 +30,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl
     const scrollRef = useRef(null);
 
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
+    const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 
     const [containerWidth, setContainerWidth] = useState(0);
     const [page, setPage] = useState(0);
@@ -99,7 +99,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl
 
             scrollRef.current.scrollToIndex({index: nextIndex, animated: canUseTouchScreen});
         },
-        [attachments, page],
+        [attachments, canUseTouchScreen, page],
     );
 
     /**
@@ -159,7 +159,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl
                 onPress={canUseTouchScreen ? () => setShouldShowArrows(!shouldShowArrows) : undefined}
             />
         ),
-        [activeSource, setShouldShowArrows, shouldShowArrows],
+        [activeSource, canUseTouchScreen, setShouldShowArrows, shouldShowArrows],
     );
 
     return (

src/components/Attachments/AttachmentCarousel/useCarouselArrows.js

@@ -2,9 +2,8 @@ import {useCallback, useEffect, useRef, useState} from 'react';
 import CONST from '../../../CONST';
 import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 
-const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
-
 function useCarouselArrows() {
+    const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
     const [shouldShowArrows, setShouldShowArrowsInternal] = useState(canUseTouchScreen);
     const autoHideArrowTimeout = useRef(null);
 
@@ -25,7 +24,7 @@ function useCarouselArrows() {
         autoHideArrowTimeout.current = setTimeout(() => {
             setShouldShowArrowsInternal(false);
         }, CONST.ARROW_HIDE_DELAY);
-    }, [cancelAutoHideArrows]);
+    }, [canUseTouchScreen, cancelAutoHideArrows]);
 
     const setShouldShowArrows = useCallback(
         (show = true) => {