[Due for payment 2026-07-21] mweb - AI promo modal - Middle page can be skipped easily when swiping through the carousel

[applause-bot]

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.4.15-1
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #92007
Email or phone of affected tester (no customers): sdjnoisdjdosijsonssjo@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with a new account.
3. Complete onboarding.
4. Swipe through the carousel.

Expected Result:

The middle page will not skip when swiping through the carousel.

Actual Result:

The middle page can be skipped easily when swiping through the carousel.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7184855_1781805390470.Screen_Recording_20260619_015207_Chrome.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Nathan Lemma
Bug ID: 7184855

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/9f117412c46ac8861a1fc504932b28c594a7fb96f56001ef680ab9c8a664f225

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #92007

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MelvinBot]

Proposal

What is the root cause of that problem?

On web, pagingEnabled on the carousel's FlatList is not real per-page paging — react-native-web implements it purely as CSS scroll-snap, and the snap points end up on the wrong element, so a fast fling coasts straight past the middle page.

Specifically:

• react-native-web maps pagingEnabled to scroll-snap-type: x mandatory on the scroller and scroll-snap-align: start on the scroller's direct children only.
• For a FlatList, the only direct child of the underlying ScrollView is the single VirtualizedList content container — so the snap-align lands on that one wrapper, not on each page View (FeatureTrainingModalCarouselBody.tsx:234).
• With effectively one snap point, mandatory snapping can't arrest the browser's native fling momentum page-by-page, so a quick swipe lands on the last page. The native-only props that would fix this (disableIntervalMomentum, snapToInterval, decelerationRate) are no-ops in react-native-web.

This matches the reported platforms — mWeb Chrome and desktop Chrome/Safari (web), not native App.

Evidence

• node_modules/react-native-web/dist/exports/ScrollView/index.js:641-649 — pagingEnabledHorizontal: {scrollSnapType: 'x mandatory'}, pagingEnabledChild: {scrollSnapAlign: 'start'}.
• node_modules/react-native-web/dist/exports/ScrollView/index.js:558-567 — scroll-snap-align is wrapped around the ScrollView's direct React children only; a FlatList's direct child is the VirtualizedList content container, so per-page Views are not snap points.
• Grep of that file shows zero handling of disableIntervalMomentum / snapToInterval / decelerationRate — they don't affect web.
• No patches/react-native-web override touches this behavior.
• The carousel FlatList: FeatureTrainingModalCarouselBody.tsx:222-247.

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

Make each page a real CSS snap point on web by applying scroll-snap-align: start to the per-item wrapper View at FeatureTrainingModalCarouselBody.tsx:234 (CSS scroll-snap recognizes any descendant of the scroll container as a snap point, not just direct children). This is a web-only style (scrollSnapAlign), added via a platform-specific style helper since it isn't in RN's style types.

For native (iOS/Android) parity — defense in depth even though native paging already works — also add disableIntervalMomentum and snapToInterval={carouselViewportWidth} to the FlatList; these are ignored on web.

What alternative solutions did you explore? (Optional)

Rendering the pages as direct children of the scroll container (so RNW's built-in scroll-snap-align applies) would also work, but is a larger refactor than tagging each page with the snap-align style. There is no existing carousel in the repo that proves a cleaner web anti-skip technique — the only other horizontal carousel (MoneyRequestReportPreviewContent.tsx) relies on snapToOffsets/decelerationRate, which are native-only.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement this to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[IuliiaHerets]

Android 12 / Chrome
No AI modal after onboarding

Screenrecorder-2026-06-19-00-34-35-698.mp4