[Due for payment 2025-12-26] [$250] Wrong swipe behavior in RHN

[Valforte]

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.48-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @Eskalifer1 at #68983 (comment)
Slack conversation (hyperlinked to channel name):

Action Performed:

1. Open the page where the tabs are present (for example, create expense)
2. Use a swipe to go to the tab from which you can go to the next page (for example, from scan to manual).
3. When you switch, click on the link to go to another page (for example, currency selection).

Expected Result:

The page we clicked on will open and remain open.

Actual Result:

After a short period of time, we are taken to the tab we were swiping to.

Screenshots/Videos

Add any screenshot/video evidence

2025-10-28.19.00.00.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021987966998916927793
• Upwork Job ID: 1987966998916927793
• Last Price Increase: 2025-11-24
• Automatic offers:
• aimane-chnaif | Reviewer | 109629493

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

Triggered auto assignment to @johncschuster (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.

[melvin-bot]

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

[melvin-bot]

Current assignee @aimane-chnaif is eligible for the External assigner, not assigning anyone new.

[mdneyazahmad]

🚨 Edited by proposal-police: This proposal was edited at 2025-11-16 06:51:21 UTC.

Proposal

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

Interaction with RHN screen is broken, when there is ongoing screen navigation animation.

What is the root cause of that problem?

When we swipe the screen, there is a gesture animation, and this does not complete instantly when we release the gesture. It takes some time to finish it. When we interact quickly with a button, which triggers a navigation animation, it seems broken, as the previous animation is not completed and we are starting a new one.

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

When screen transition happens, it's focused state for the screen changes, so we need to track it's focused state.

We are already using useFocusEffect, so create one ref variable to store its state, and cancel the interaction with the screen until the animation completes.

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Lines 124 to 134 in 69d248f

	useFocusEffect(
	useCallback(() => {
	focusTimeoutRef.current = setTimeout(() => textInput.current?.focus(), CONST.ANIMATED_TRANSITION);
	return () => {
	if (!focusTimeoutRef.current) {
	return;
	}
	clearTimeout(focusTimeoutRef.current);
	};
	}, []),
	);

     const isScreenReadyForInteraction = useRef(false);

     useFocusEffect(
        useCallback(() => {
            isScreenReadyForInteraction.current = true;
            focusTimeoutRef.current = setTimeout(() => textInput.current?.focus(), CONST.ANIMATED_TRANSITION);
            return () => {
                isScreenReadyForInteraction.current = false;
                if (!focusTimeoutRef.current) {
                    return;
                }
                clearTimeout(focusTimeoutRef.current);
            };
        }, []),
    );

    const navigateToCurrencySelectionPage = () => {
        if (!isScreenReadyForInteraction.current) {
            return;
        }
        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CURRENCY.getRoute(action, iouType, transactionID, reportID, pageIndex, currency, Navigation.getActiveRoute()));
    };

Updated method

    const navigation = useNavigation();

    const navigateToCurrencySelectionPage = () => {
        if (!navigation.isFocused()) {
            return;
        }
        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CURRENCY.getRoute(action, iouType, transactionID, reportID, pageIndex, currency, Navigation.getActiveRoute()));
    };

What alternative solutions did you explore? (Optional)

We can also fix this issue by making setting pointerEvents: none to the screen. This will prevent tab screen from interaction until the screen transition completes.

We are already using TabScreenWithFocusTrapWrapper as a wrapper to each OnyxTabNavigator screen except one (ShareRootPage), so we can add pointerEvents here, or we can create a completely new component for that.

App/src/libs/Navigation/OnyxTabNavigator.tsx

Lines 244 to 248 in 5046eb4

	<FocusTrapContainerElement
	onContainerElementChanged={handleContainerElementChanged}
	style={[styles.w100, styles.h100]}
	>
	{children}

        const isFocused = useIsFocused();


        <FocusTrapContainerElement
            onContainerElementChanged={handleContainerElementChanged}
            style={[styles.w100, styles.h100, !isFocused && {pointerEvents: 'none'}]}
        >
            {children}
        </FocusTrapContainerElement>

[Valforte]

@aimane-chnaif can you review the current proposals?