[Due for payment 2026-10-12] [$175] Scroll forward immediately upon click (web and mobile), without waiting for the animation

@mallenexpensify

Problem

Following up on #96427 and PR #98515: when approving a report in the workspace chat, the view should scroll forward the moment the user clicks, rather than waiting for the animation to complete. The initial PR added a delay because the native app scrolls without animation, which felt confusing, but the desired behavior is to scroll immediately on click on both web and mobile.

Expected behavior

On web and mobile, scroll forward immediately upon click — done, deployed to staging (pending test/feedback).
Do not wait for the animation to finish before scrolling — done, deployed to staging (pending test/feedback).
Native gets an animated scroll to match web's behavior — remaining work.

Status

Per aimane-chnaif: immediate scroll-on-click for web and mobile is implemented and deployed to staging (please test and provide feedback). The only remaining item is giving native an animated scroll to match web's behavior.

Context

Reported in Slack.

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~022105940508242466664
Upwork Job ID: 2105940508242466664
Last Price Increase: 2026-10-02

Issue Owner

Current Issue Owner: @mallenexpensify

@MelvinBot

@MelvinBot implement this

🤖 Draft PR created: Animate the action-badge forward-scroll on native to match web

Please mark it as "Ready for review" when it is ready.

What was left, and what I changed

The remaining item on this issue was "native gets an animated scroll to match web's behavior." The cause is a platform-default mismatch in useReportScrollManager:

Web — index.ts:12 defaults animated to true.
Native — index.native.ts:17 defaults animated to false.

scrollToActionBadgeTarget never passed the option, so it inherited whichever default the platform had. The instant jump was tolerable while the scroll waited on the approve/pay/submit button animation — that delay gave the user a beat to follow along. Now that #98515 fires the scroll on the very next frame after the click, native snaps to the next actionable preview with no visual continuity.

The fix passes {animated: true} explicitly at that single call site. Web is unchanged by construction (it already defaulted to true); only native changes. Every other scrollToIndex caller keeps its existing per-platform default — in particular ReportActionItemMessageEdit's Android Chrome keyboard hack still passes {animated: false} deliberately.

Files changed and checks run

Files changed

src/hooks/useReportActionsScroll.ts — pass animated: true when scrolling to the action-badge target, with a comment on why the platform default can't be relied on here.
src/hooks/useReportScrollManager/types.ts — doc comment now records the follow-scroll as the second deliberate explicit-animated caller.
tests/unit/useReportActionsScrollTest.tsx — updated the existing assertion and added a case pinning the animated-scroll intent.

Checks run locally

Check	Result
`npm test` (6 scroll-related suites)	✅ 88 passed
`npm run typecheck`	✅ passed
`npm run lint-changed`	✅ passed
`npm run spell-changed`	✅ passed
`npm run react-compiler-compliance-check`	✅ passed
Full `npm test` / `npm run lint` / storybook smoke	⏭️ left to CI

One thing to confirm on device

I did not verify this on a real device. The behavior change is native-only, and the test device available for this run was web — where the behavior is unchanged by construction, so a web run could not have validated the fix. The animation itself needs a native check: with an inverted FlashList, an animated scrollToIndex to a target that is several screens away can feel slow or land imprecisely on native in a way it does not on web. If it does, the follow-up is to cap the distance (jump instantly when the target is far off-screen, animate when it is near) rather than to revert the animation.

Next Steps: Reply with @MelvinBot <your feedback> if you want the approach adjusted.

view run

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

@arosiclair

Triggered auto assignment to @arosiclair, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

@arosiclair

@arosiclair for context: this issue was created from https://expensify.slack.com/archives/C090P2M6DBL/p1787020588645039?thread_ts=1785906243.251709&cid=C090P2M6DBL
Can you please mark PR "ready for review" (Melvin couldn't do that) and review?

Deploy Blocker #102959 was identified to be related to the PR #102116 that attempted to fix this issue.

Contributor+ Checklist:

[Contributor] The offending PR and associated issue have been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Link to the comment on the PR:
Link to the comment on the Issue:
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

Link to discussion:
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Precondition:

Workspace A has Approvals turned on, with User B as submitter and User A as approver.
As User B, submit 2 separate expense reports in the workspace chat. Send a few messages after each one so only one report preview fits on screen at a time.

Test:

Log in as User A and open the workspace chat with User B.
Scroll up until the oldest report preview with an Approve button is fully visible.
Tap Approve on it.
The chat starts scrolling right after the tap, without waiting for the approve button animation to finish. It scrolls down smoothly until the next preview with Approve is near the top of the chat.
Verify that the scroll is animated and does not jump straight to the preview.

Do we agree 👍 or 👎

Deploy Blocker #102959 was identified to be related to the PR #102116 that attempted to fix this issue.

This was closed as not bug - #102959 (comment)

@mallenexpensify

Triggered auto assignment to @mallenexpensify (Awaiting Payment)

@aimane-chnaif

Payment Summary

Resolving PRs:

Animate the action-badge forward-scroll on native to match web #102116
Reviewer: @aimane-chnaif owed $175 via NewDot

BugZero Checklist (@mallenexpensify)

I have confirmed assignees, roles, and Upwork contracts look correct
I have paid out Upwork contracts / manual NewDot requests
[BugZero Assignee] I have created a GH issue for creating/updating the regression test once above steps have been agreed upon

@aimane-chnaif

Payment Summary

Contributor+: @aimane-chnaif due $250 via NewDot

Navigation Menu

Repository navigation

[Due for payment 2026-10-12] [$175] Scroll forward immediately upon click (web and mobile), without waiting for the animation #98824

Problem

Expected behavior

Status

Context

What was left, and what I changed

One thing to confirm on device

8 remaining items

Contributor+ Checklist:

Regression Test Proposal

Precondition:

Test:

Payment Summary

BugZero Checklist (@mallenexpensify)

Payment Summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Due for payment 2026-10-12] [$175] Scroll forward immediately upon click (web and mobile), without waiting for the animation #98824

Description

Problem

Expected behavior

Status

Context

Activity

aimane-chnaif commented on Sep 24, 2026

MelvinBot commented on Sep 24, 2026

What was left, and what I changed

One thing to confirm on device

melvin-bot commented on Oct 2, 2026

melvin-bot commented on Oct 2, 2026

aimane-chnaif commented on Oct 2, 2026

jponikarchuk commented on Oct 5, 2026

8 remaining items

aimane-chnaif commented on Oct 11, 2026

Contributor+ Checklist:

Regression Test Proposal

Precondition:

Test:

aimane-chnaif commented on Oct 11, 2026

melvin-bot commented on Oct 11, 2026

melvin-bot commented on Oct 11, 2026

Payment Summary

BugZero Checklist (@mallenexpensify)

mallenexpensify commented on Oct 14, 2026

Payment Summary

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions