fix: broken screen animation during navigation transition #76343

mdneyazahmad · 2025-11-30T19:53:26Z

Explanation of Change

When we swipe between tab navigator, gesture animation triggers. If we try to navigate to different screen during this transition time. This creates a broken animation. We disable the swipe gesture to fix the issue.

Note: #76343 (comment) Swipe on tab navigator is not disabled only for the first time on iOS. This is related to a bug in the package react-native-pager-view. It was decided to handle this case in a separate issue here

Fixed Issues

$ #74735
PROPOSAL: #74735 (comment)

Tests

Screens

FAB menu -> Create expense
FAB menu -> Track distance
FAB menu -> Start chat
Select a report -> Split expense
Workspaces -> Select a workspace -> Receipt partners -> Manage invites
Goto gallery -> Pick an image -> Share -> Expensify (iOS/Android)

For the above screens, perform the following steps

Switch between tabs
Verify that there is no swipe gesture support for screen transition.
Verify that it works as normal with click / tap.

Verify that no errors appear in the JS console

Offline tests

NA

QA Steps

Same as test

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

android-native.mp4

Android: mWeb Chrome

android-chrome.mp4

iOS: Native

ios-native.mp4

iOS: mWeb Safari

ios-safari.mp4

MacOS: Chrome / Safari

macos-chrome.mp4

codecov · 2025-11-30T20:01:18Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
src/libs/Navigation/OnyxTabNavigator.tsx	`86.48% <ø> (-0.36%)`	⬇️
src/pages/NewChatSelectorPage.tsx	`0.00% <ø> (ø)`
src/pages/iou/request/IOURequestStartPage.tsx	`86.30% <ø> (-0.19%)`	⬇️
... and 8 files with indirect coverage changes

mdneyazahmad · 2025-12-01T07:23:54Z

@aimane-chnaif I was able to test the usage of component on different pages, but I was not able to test for these two. Could you help me test these.

App/src/pages/iou/request/IOURequestStartPage.tsx

Line 327 in fbed79d

App/src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx

Line 318 in fbed79d

aimane-chnaif · 2025-12-02T21:20:56Z

@mdneyazahmad

per diem:

Screen.Recording.2025-12-02.at.10.17.57.pm.mov

receipt partner:

Screen.Recording.2025-12-02.at.10.19.07.pm.mov

You should connect uber to see invite page

melvin-bot · 2025-12-04T06:55:02Z

@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

mdneyazahmad · 2025-12-04T06:58:09Z

@aimane-chnaif I indeed move to features screen. The feature is locked behind a subscription.

Meanwhile, I open the pr for review.

aimane-chnaif · 2025-12-04T07:39:51Z

@aimane-chnaif I indeed move to features screen. The feature is locked behind a subscription.

You can upgrade.

trjExpensify

I guess I'm a little confused. On the Create expense > Scan screen why would swiping not close the modal vs switch to the manual tab? 🤔

CC: @Expensify/design

dannymcclain · 2025-12-04T14:53:56Z

I'm confused too—I'm having a hard time understanding this issue in general. Would someone mind giving me a dumbed-down explanation? 🙏

aimane-chnaif · 2025-12-04T15:01:07Z

@trjExpensify @dannymcclain

swipe gesture is enabled on web too. you can try using mouse long click.
The bug happens while swiping between tabs,

Screen.Recording.2025-12-04.at.3.58.05.pm.mov

In this video, select currency button doesn't go to currency selection page correctly.

dannymcclain · 2025-12-04T15:03:12Z

Ah ok I see now. 👍 Thanks for explaining!

trjExpensify · 2025-12-04T15:12:45Z

I guess I have two questions:

Why do we have a swipe gesture on web for the tabs? Seems redundant. Also inconsistent because "swiping" on the manual tab doesn't close the RHP modal as it would on mobile.
On mobile, do we really think swiping should change tabs? I see on staging it does not, and I think that's expected personally.

dannymcclain · 2025-12-04T15:16:12Z

Why do we have a swipe gesture on web for the tabs?

Yeah I agree this seems like pretty pointless functionality.

On mobile, do we really think swiping should change tabs? I see on staging it does not, and I think that's expected personally.

TBH I've always had mixed feelings about this behavior as well. Swiping does change tabs for me, but if we're talking about removing that functionality, I think we need broader team input.

aimane-chnaif · 2025-12-04T15:17:42Z

On mobile, do we really think swiping should change tabs? I see on staging it does not, and I think that's expected personally.

Tested iOS. Swipe works

Screen.Recording.2025-12-04.at.4.15.59.pm.mov

Screen.Recording.2025-12-04.at.4.16.42.pm.mov

if we're talking about removing that functionality, I think we need broader team input.

👍

trjExpensify · 2025-12-04T15:26:55Z

Alright, I killed the app completely and now it works on Create expense. 🤷

It kinda' works on Track distance, but only from the Manual screen as on the map screen it scrolls the interactive map and does nothing over the start/stop rows.

Anyway, fine to leave it.. just seems a bit overkill.

dannymcclain · 2025-12-04T15:29:16Z

Yeah, my issue with it is it's kinda unpredictable since different screens have different interactive components on them (like the map you pointed out). I'm not against ditching the swipe behavior, because I agree, I don't see it as being super necessary. I just don't want to make a casual decision in a PR and have a bunch of people upset because we changed it without telling anyone 😂

trjExpensify · 2025-12-04T15:33:31Z

@aimane-chnaif do you have any idea where we introduced this in the first place? It might be good to follow the history to see what discussion it came from.

aimane-chnaif · 2025-12-04T15:43:04Z

Not sure about web behavior but for mobile, I think the recent discussion happened in #65746 (comment). (please read through history from this comment)
@dannymcclain you were involved as well.

dannymcclain · 2025-12-04T16:16:42Z

Oh nice, and I'm not even contradicting myself! 😂 Seems like the design team is aligned on just removing the swipe to change tabs altogether.

trjExpensify · 2025-12-04T16:36:35Z

Haha, nice! I mean, like in the git history, can we trace it back to where we implemented swipe to change tab, Aimane?

dubielzyk-expensify · 2025-12-05T02:40:44Z

Haha, nice! I mean, like in the git history, can we trace it back to where we implemented swipe to change tab, Aimane?

I thought the swipe was a default behavior of these TabView controllers with React Native/React Navigation? Also all for removing it. We had to disable it for MultiScan anyways since we had multiple swipe areas.

…nimation issue

mdneyazahmad · 2025-12-08T13:40:13Z

Updated

aimane-chnaif · 2025-12-08T16:54:57Z

@mdneyazahmad please merge main and fix lint errors

aimane-chnaif · 2025-12-08T17:11:29Z

I am still able to swipe on iOS (only first time)

ios.mov

…tion-transition

mdneyazahmad · 2025-12-09T19:53:02Z

@aimane-chnaif the bug is related to react-native-pager-view. The maintainer has published a new version (v7.0.2) which fixes the issue. Ideally upgrading react-native-pager-view in our project should fix it. I tried to update it on my system, but it is taking a lot of time to build the app, and it fails with some errors. Could you try do the same, and let me know whether it work after the fix.

callstack/react-native-pager-view#1043

aimane-chnaif · 2025-12-09T20:00:58Z

Good findings!

@Valforte regarding this iOS specific bug, should we fix here or handle as separate bug? The root cause is in upstream and seems fixed in react-native-pager-view 7.0.2
The current version is 6.9.1 (the major version was bumped)

App/package.json

Line 193 in d44e37f

"react-native-pager-view": "6.9.1",

aimane-chnaif

Approving to request review from @Valforte and see above comment

Valforte · 2025-12-15T15:06:40Z

Let's move forward with the fix as-is and leave the version bump for a new issue as that might have unintended consequences

aimane-chnaif · 2025-12-15T15:08:27Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified there are no new alerts related to the canBeMissing param for useOnyx
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

android.mov

Android: mWeb Chrome

mchrome.mov

iOS: HybridApp

ios-bug.mov

iOS: mWeb Safari

msafari.mov

MacOS: Chrome / Safari

web.mov

aimane-chnaif · 2025-12-15T15:09:05Z

Let's move forward with the fix as-is and leave the version bump for a new issue as that might have unintended consequences

@Valforte ok then we're good to merge.

OSBotify · 2025-12-17T15:44:39Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2025-12-18T19:00:41Z

🚀 Deployed to staging by https://github.com/Valforte in version: 9.2.82-0 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	failure ❌
🍎 iOS 🍎	success ✅

OSBotify · 2025-12-18T19:30:04Z

🚀 Deployed to staging by https://github.com/Valforte in version: 9.2.82-0 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	cancelled 🔪
🍎 iOS 🍎	success ✅

lanitochka17 · 2025-12-18T21:14:24Z

This PR is failing because of issue ##78051

The issue is reproducible in: IOS

Bug7033178_1766088932190.20251219_041309.1.mp4

OSBotify · 2025-12-18T21:44:55Z

🚀 Deployed to staging by https://github.com/Valforte in version: 9.2.82-0 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

mdneyazahmad · 2025-12-18T22:21:42Z

@lanitochka17 aimane-chnaif has identified this issue here. Valforte has decided to continue with the pr, and handle the update in a new issue. I have added a note on this PR description for the context about this iOS swipe issue.

OSBotify · 2025-12-19T13:17:10Z

🚀 Deployed to staging by https://github.com/Valforte in version: 9.2.84-0 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

OSBotify · 2025-12-19T23:38:20Z

🚀 Deployed to production by https://github.com/AndrewGable in version: 9.2.84-8 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

fix: broken screen animation during navigation transition

181e372

melvin-bot bot assigned mdneyazahmad Nov 30, 2025

mdneyazahmad mentioned this pull request Dec 1, 2025

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

Closed

mdneyazahmad marked this pull request as ready for review December 4, 2025 06:54

mdneyazahmad requested review from a team as code owners December 4, 2025 06:54

melvin-bot bot requested a review from aimane-chnaif December 4, 2025 06:55

melvin-bot bot requested review from trjExpensify and removed request for a team December 4, 2025 06:55

trjExpensify reviewed Dec 4, 2025

View reviewed changes

fix: disable swipe gesture on material top tab navigator to resolve a…

816979f

…nimation issue

mdneyazahmad added 3 commits December 9, 2025 18:26

chore: resolve linting issues

c2f5d79

chore: fix lint errors

5520388

Merge branch 'main' of github.com:Expensify/App into fix/74735-naviga…

9057baa

…tion-transition

aimane-chnaif mentioned this pull request Dec 12, 2025

chore: Upgrade react-navigation to latest #76933

Merged

54 tasks

aimane-chnaif approved these changes Dec 12, 2025

View reviewed changes

melvin-bot bot requested a review from Valforte December 12, 2025 19:57

Valforte approved these changes Dec 17, 2025

View reviewed changes

Valforte mentioned this pull request Dec 17, 2025

[Due for payment 2025-12-31] [$250] Upgrade react-native-pager-view version to 7.0.2 #77894

Closed

Valforte merged commit f302e6f into Expensify:main Dec 17, 2025
31 of 32 checks passed

OSBotify mentioned this pull request Dec 18, 2025

Deploy Checklist: New Expensify 2025-12-18 #78018

Closed

lanitochka17 mentioned this pull request Dec 18, 2025

iOS - Swipe gesture is possible when swiping for the first time #78051

Closed

7 tasks

mdneyazahmad mentioned this pull request Dec 22, 2025

chore: bump react-native-pager-view to v7.0.2 #78257

Merged

53 tasks

linhvovan29546 mentioned this pull request Dec 25, 2025

[$250] Tab bar in Track distance is hidden when switching tabs #73926

Closed

16 tasks

fix: broken screen animation during navigation transition #76343

fix: broken screen animation during navigation transition #76343

Uh oh!

Conversation

mdneyazahmad commented Nov 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Screens

For the above screens, perform the following steps

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov bot commented Nov 30, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

mdneyazahmad commented Dec 1, 2025

Uh oh!

aimane-chnaif commented Dec 2, 2025

Uh oh!

melvin-bot bot commented Dec 4, 2025

Uh oh!

mdneyazahmad commented Dec 4, 2025

Uh oh!

aimane-chnaif commented Dec 4, 2025

Uh oh!

trjExpensify left a comment

Choose a reason for hiding this comment

Uh oh!

dannymcclain commented Dec 4, 2025

Uh oh!

aimane-chnaif commented Dec 4, 2025

Uh oh!

dannymcclain commented Dec 4, 2025

Uh oh!

trjExpensify commented Dec 4, 2025

Uh oh!

dannymcclain commented Dec 4, 2025

Uh oh!

aimane-chnaif commented Dec 4, 2025

Uh oh!

trjExpensify commented Dec 4, 2025

Uh oh!

dannymcclain commented Dec 4, 2025

Uh oh!

trjExpensify commented Dec 4, 2025

Uh oh!

aimane-chnaif commented Dec 4, 2025

Uh oh!

dannymcclain commented Dec 4, 2025

Uh oh!

trjExpensify commented Dec 4, 2025

Uh oh!

dubielzyk-expensify commented Dec 5, 2025

Uh oh!

mdneyazahmad commented Dec 8, 2025

Uh oh!

aimane-chnaif commented Dec 8, 2025

Uh oh!

aimane-chnaif commented Dec 8, 2025

Uh oh!

mdneyazahmad commented Dec 9, 2025

Uh oh!

aimane-chnaif commented Dec 9, 2025

Uh oh!

aimane-chnaif left a comment

Choose a reason for hiding this comment

Uh oh!

Valforte commented Dec 15, 2025

Uh oh!

aimane-chnaif commented Dec 15, 2025

Reviewer Checklist

Screenshots/Videos

Uh oh!

aimane-chnaif commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

mdneyazahmad commented Nov 30, 2025 •

edited

Loading

codecov bot commented Nov 30, 2025 •

edited by github-actions bot

Loading

aimane-chnaif commented Dec 15, 2025 •

edited

Loading