fix: check canUseTouchScreen on each render

src/components/Attachments/AttachmentCarousel/index.js

@@ -19,8 +19,8 @@ import Navigation from '../../../libs/Navigation/Navigation';
 import BlockingView from '../../BlockingViews/BlockingView';
 import * as Illustrations from '../../Icon/Illustrations';
 import variables from '../../../styles/variables';
+import useCanUseTouchScreen from '../../../hooks/useCanUseTouchScreen';
 
-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 +31,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl
     const scrollRef = useRef(null);
 
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
+    const canUseTouchScreen = useCanUseTouchScreen();
 
     const [containerWidth, setContainerWidth] = useState(0);
     const [page, setPage] = useState(0);
@@ -99,7 +100,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl
 
             scrollRef.current.scrollToIndex({index: nextIndex, animated: canUseTouchScreen});
         },
-        [attachments, page],
+        [attachments, canUseTouchScreen, page],
     );
 
     /**
@@ -160,7 +161,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl
                 isUsedInCarousel
             />
         ),
-        [activeSource, setShouldShowArrows, shouldShowArrows],
+        [activeSource, canUseTouchScreen, setShouldShowArrows, shouldShowArrows],
     );
 
     return (

src/components/Attachments/AttachmentCarousel/useCarouselArrows.js

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

src/hooks/useCanUseTouchScreen.js

@@ -0,0 +1,19 @@
+import {useEffect, useState} from 'react';
+import * as DeviceCapabilities from '../libs/DeviceCapabilities';
+
+/**
+ * This hooks returns a boolean of whether the device is a touch screen or not.
+ * @returns {Boolean}
+ */
+export default function useCanUseTouchScreen() {
+    const [canUseTouchScreen, setCanUseTouchScreen] = useState(DeviceCapabilities.canUseTouchScreen());
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        const newCanUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
+        if (canUseTouchScreen === newCanUseTouchScreen) return;
+        setCanUseTouchScreen();
+    });
+
+    return canUseTouchScreen;
+}