[Due for payment 2026-01-05] [$250] IOS - Attachment - Arrows to navigate through attachments are not displayed when a video is playing

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.29-5
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1119/folder/13176710/41236953/928688830
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to a conversation that has several attachments in it's history
2. Select a video from the attachments uploaded
3. Observe the forward/back arrows

Expected Result:

Arrows to navigate through attachments should be visible in the video preview

Actual Result:

Arrows to navigate through attachments remains hidden in the video preview and when the video start to play

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6973944_1760389202644.ExpensifyNoAttachmentArrowDisplayedInVideo.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021978212614173687150
• Upwork Job ID: 1978212614173687150
• Last Price Increase: 2025-11-11
• Automatic offers:
• situchan | Contributor | 109449901

Issue Owner

Current Issue Owner: @lakchote

[melvin-bot]

Triggered auto assignment to @muttmuure (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[gijoe0295]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Arrows to navigate through attachments are not displayed when a video is playing

What is the root cause of that problem?

The carousel arrows are designed to auto-hide after 3 seconds of inactivity:

App/src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts

Line 22 in 5a2602c

* Automatically hide the arrows if there is no interaction for 3 seconds.

For image attachments, we restore arrow visibility whenever the user taps on the image:

App/src/components/Lightbox/index.tsx

Line 228 in 20b1488

onTap={onTap}

App/src/components/Attachments/AttachmentCarousel/Pager/index.tsx

Line 95 in 4cc6c31

onTap: handleTap,

App/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts

Lines 52 to 58 in 68eb38b

	const handleTap = useCallback(() => {
	if (!isScrollEnabled.get()) {
	return;
	}
	onRequestToggleArrows();
	}, [isScrollEnabled, onRequestToggleArrows]);

App/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts

Lines 12 to 22 in 68eb38b

	const onRequestToggleArrows = useCallback(
	(showArrows?: boolean) => {
	if (showArrows === undefined) {
	setShouldShowArrows?.((prevShouldShowArrows) => !prevShouldShowArrows);
	return;
	}
	setShouldShowArrows?.(showArrows);
	},
	[setShouldShowArrows],
	);

However, for video attachments, tapping only toggles the video controls and doesn’t trigger the arrow visibility logic:

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 437 to 445 in 75bd0cd

	onPress={() => {
	if (isFullScreenRef.current) {
	return;
	}
	if (!canUseTouchScreen) {
	togglePlayCurrentVideo();
	return;
	}
	toggleControl();

So once the arrows auto-hide, they remain hidden during playback (until you swipe to another attachment).

What changes do you think we should make in order to solve the problem?

In AttachmentView here:

1. Retrieve onTap from AttachmentCarouselPagerContext - the arrows toggler.
2. Pass it down to AttachmentViewVideo > BaseVideoPlayer.
3. Inside BaseVideoPlayer, call onTap() right after toggleControl in the onPress handler to bring the arrows back on tap.

Optionally, we can sync the arrows visibility with the video controls visibility. To do that:

• Modify the onTap from the context and consequently the handleTap here to accept shouldShowArrows param that enable us to manually update their visibility instead of just toggling based on the current visibility
• In BaseVideoPlayer, add an useEffect to synchronize the carousel arrows with the video controls that calls onTap(true) or onTap(false) based on controlStatusState is SHOW or HIDE

That is aligned with major messaging platforms like Slack where the carousel arrows are part of the video/attachment control and pressing the attachment will toggle all these controls:

Screen.Recording.2025-10-14.at.23.14.27.mov

What alternative solutions did you explore? (Optional)

None

[Eskalifer1]

Proposal

Please re-state the problem that we are trying to solve in this issue.

IOS - Attachment - Arrows to navigate through attachments are not displayed when a video is playing

What is the root cause of that problem?

Currently, our arrows are hidden 3 seconds after they appear:

App/src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts

Lines 21 to 33 in d90c0fc

	/**
	* Automatically hide the arrows if there is no interaction for 3 seconds.
	*/
	const autoHideArrows = useCallback(() => {
	if (!canUseTouchScreen) {
	return;
	}
	cancelAutoHideArrows();
	autoHideArrowTimeout.current = setTimeout(() => {
	setShouldShowArrowsInternal(false);
	}, CONST.ARROW_HIDE_DELAY);
	}, [canUseTouchScreen, cancelAutoHideArrows]);

And we don't have any logic that would work for videos to show arrows for any user action.

What changes do you think we should make in order to solve the problem?

I suggest adding an approach that is widely used in other similar sliders in other applications:

1. When the user starts swiping, show the arrows and do not hide them until the swipe ends after 3 seconds. To do this, we need to do the following:
   Edit this hook:
   

   App/src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts

   Line 6 in d90c0fc

   function useCarouselArrows() {

Add another ref that will stop the reset timer and its restore function:

const isAutoHidePaused = useRef(false);

App/src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts

Lines 14 to 19 in d90c0fc

	const cancelAutoHideArrows = useCallback(() => {
	if (!autoHideArrowTimeout.current) {
	return;
	}
	clearTimeout(autoHideArrowTimeout.current);
	}, []);

const cancelAutoHideArrows = useCallback(() => {
        if (autoHideArrowTimeout.current) {
            clearTimeout(autoHideArrowTimeout.current);
            autoHideArrowTimeout.current = null;
        }
    }, []);

App/src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts

Lines 24 to 27 in d90c0fc

	const autoHideArrows = useCallback(() => {
	if (!canUseTouchScreen) {
	return;
	}

if (!canUseTouchScreen || isAutoHidePaused.current) {
            return;
        }

    /**
     * Pauses auto-hide while user is interacting (e.g., swiping)
     */
    const pauseAutoHideArrows = useCallback(() => {
        isAutoHidePaused.current = true;
        cancelAutoHideArrows();
    }, [cancelAutoHideArrows]);

    /**
     * Resumes auto-hide after user stops interacting
     */
    const resumeAutoHideArrows = useCallback(() => {
        isAutoHidePaused.current = false;
        autoHideArrows();
    }, [autoHideArrows]);

Pass this functions to AttachmentCarouselView. From AttachmentCarouselView pass it down to AttachmentCarouselPager:

App/src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.native.tsx

Lines 99 to 108 in 0acf608

	<AttachmentCarouselPager
	items={attachments}
	initialPage={page}
	onAttachmentError={onAttachmentError}
	activeAttachmentID={activeAttachmentID}
	setShouldShowArrows={setShouldShowArrows}
	onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
	onSwipeDown={onSwipeDown}
	ref={pagerRef}
	reportID={report?.reportID}

Pass a new function here:

App/src/components/Attachments/AttachmentCarousel/Pager/index.tsx

Lines 138 to 147 in 0acf608

	<AnimatedPagerView
	pageMargin={40}
	offscreenPageLimit={1}
	onPageScroll={pageScrollHandler}
	onPageSelected={onPageSelected}
	style={styles.flex1}
	initialPage={initialPage}
	animatedProps={animatedProps}
	ref={pagerRef}
	>

                    onPageScrollStateChanged={(event) => {
                        const state = event.nativeEvent.pageScrollState;
                        
                        if (state === 'dragging') {
                            setShouldShowArrows?.(true);
                            pauseAutoHideArrows?.();
                        }

                        if (state === 'idle') {
                            resumeAutoHideArrows?.();
                        }
                    }}

PS: we can discuss if we want to use other, but similar approach(Like use useCarouselContextEvents instead of passing it through the props)
2. Additionally, we can add buttons to appear when the video is paused, if necessary:
Create new context(Or anu other way, we can discuss how to do it):

import {createContext, useContext} from 'react';

type CarouselArrowsContextValue = {
    setShouldShowArrows?: (show?: boolean) => void;
};

const CarouselArrowsContext = createContext<CarouselArrowsContextValue | null>(null);

export const useCarouselArrowsContext = () => useContext(CarouselArrowsContext);

export const CarouselArrowsProvider = CarouselArrowsContext.Provider;

Wrap this into context:

App/src/components/Attachments/AttachmentCarousel/Pager/index.tsx

Lines 136 to 151 in 0acf608

	<AttachmentCarouselPagerContext.Provider value={contextValue}>
	<GestureDetector gesture={nativeGestureHandler}>
	<AnimatedPagerView
	pageMargin={40}
	offscreenPageLimit={1}
	onPageScroll={pageScrollHandler}
	onPageSelected={onPageSelected}
	style={styles.flex1}
	initialPage={initialPage}
	animatedProps={animatedProps}
	ref={pagerRef}
	>
	{carouselItems}
	</AnimatedPagerView>
	</GestureDetector>
	</AttachmentCarouselPagerContext.Provider>

 <CarouselArrowsProvider value={{setShouldShowArrows}}>

In videoPlayer get this value:

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Line 33 in 0acf608

function BaseVideoPlayer({

    const carouselArrows = useCarouselArrowsContext();

    const {setShouldShowArrows} = useMemo(() => {
        if (carouselArrows === null) {
            return {setShouldShowArrows: () => {}};
        }

        return {
            ...carouselArrows,
        };
    }, [carouselArrows]);

Update this function(Or we cam update pauseVideo and playVideo if needed):

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 109 to 119 in 0acf608

	const togglePlayCurrentVideo = useCallback(() => {
	setIsEnded(false);
	videoResumeTryNumberRef.current = 0;
	if (!isCurrentlyURLSet) {
	updateCurrentURLAndReportID(url, reportID);
	} else if (isPlaying) {
	pauseVideo();
	} else {
	playVideo();
	}
	}, [isCurrentlyURLSet, isPlaying, pauseVideo, playVideo, reportID, updateCurrentURLAndReportID, url, videoResumeTryNumberRef]);

    const togglePlayCurrentVideo = useCallback(() => {
        setIsEnded(false);
        videoResumeTryNumberRef.current = 0;
        if (!isCurrentlyURLSet) {
            updateCurrentURLAndReportID(url, reportID);
        } else if (isPlaying) {
            pauseVideo();
            setShouldShowArrows?.(true);
        } else {
            playVideo();
            setShouldShowArrows?.(false);
        }
    }, [isCurrentlyURLSet, isPlaying, pauseVideo, playVideo, reportID, updateCurrentURLAndReportID, url, videoResumeTryNumberRef, setShouldShowArrows]);

This way, the arrows will only appear when the user pauses the video, rather than when they are generally searching for something.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021978212614173687150

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @abdulrahuman5196 (External)

[melvin-bot]

@abdulrahuman5196 Huh... This is 4 days overdue. Who can take care of this?

[abdulrahuman5196]

@muttmuure I am currently occupied with the existing tasks. Could you kindly reassign the label again so a different c+ is assigned to the issue?