[$250] Expense - Tab shift from manual-scan-distance is delayed

[IuliiaHerets]

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.0.79-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Applause Internal Team
Device used: Redmi note 10s Android 13
App Component: Money Requests

Action Performed:

1. Launch app in mweb and Android
2. Tab fab-- create expense
3. Swipe the page and note the tab shift from manual-scan-distance

Expected Result:

Tab shift from manual-scan-distance must be consistent in both mweb and Android.

Actual Result:

Tab shift from manual-scan-distance is slow in mweb but not in Android.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6703184_1735334645891.Screenrecorder-2024-12-28-02-48-07-181_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021873846742783366143
• Upwork Job ID: 1873846742783366143
• Last Price Increase: 2024-12-30

[melvin-bot]

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

[Christinadobrzyn]

I think this can be external

[melvin-bot]

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

[melvin-bot]

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

[QichenZhu]

Proposal

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

Tab highlight lags when switching tabs using gestures on web.

What is the root cause of that problem?

On native platforms, the highlight changes gradually during tab switching.

On web platforms, the highlight jumps suddenly after the tab finishes switching, because we have removed the highlight animation to fix #50265.

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

Since #50265 is a minor issue, we can revert the fix.

Before	After
Record_2025-01-03-01-51-38-2025-01-02.12_54_55.061.mp4	Record_2025-01-03-01-53-43-2025-01-02.12_54_57.820.mp4

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

Not needed as this is a UI issue.

What alternative solutions did you explore? (Optional)

If #50265 still needs a fix, we can replace useEffect with useLayoutEffect in node_modules/react-native-tab-view/lib/module/PanResponderAdapter.js

  React.useLayoutEffect(() => {
    const offset = -navigationStateRef.current.index * layout.width;
    panX.setValue(offset);
  }, [layout.width, panX]);

[Christinadobrzyn]

Hi @eVoloshchak can you check out the above proposal when you're back? TY!