Skip to content

feat(scroll): add inverted prop#2131

Merged
naqvitalha merged 8 commits intomainfrom
feat/inverted-prop
Mar 4, 2026
Merged

feat(scroll): add inverted prop#2131
naqvitalha merged 8 commits intomainfrom
feat/inverted-prop

Conversation

@naqvitalha
Copy link
Collaborator

Description

Re-introduces the inverted prop for FlashList v2, addressing the most requested feature gap since the v1-to-v2 migration. The implementation uses platform-specific CSS transforms — scaleY(-1) on iOS/web and rotate(180deg) on Android (for performance, see #751) — applied at the container, cell, header, and footer levels.

Note: On Android, the rotate optimization causes the scrollbar to appear on the left side.

Fixes #1844

Reviewers' hat-rack 🎩

  • Transform cascade: container inverts the list, then each cell/header/footer counter-inverts to render content right-side-up
  • Android uses rotate(180deg) instead of scaleY(-1) due to known perf issues (Inverted scroll super laggy on Android #751)
  • Verify onEndReached still fires correctly in the inverted direction
  • Check interaction with maintainVisibleContentPosition (these are independent approaches — inverted doesn't use it)

Test plan

  • Unit tests pass (yarn test — 183 passing)
  • Type check passes (yarn type-check)
  • Lint passes (yarn lint)
  • Verified on iOS simulator — scrolling, loading older messages, adding new messages all work correctly
  • E2e snapshot tests added (ChatInverted.test.e2e.ts) — reference screenshots need to be generated on first run
  • Verify on Android

Re-introduce the inverted prop for FlashList v2. This uses platform-specific
transforms (scaleY on iOS/web, rotate on Android for performance) applied at
the container, cell, header, and footer levels.

Includes a ChatInverted fixture example and e2e test.

Fixes #1844
…reenshots

Remove timestamp display and use index-based message generation to ensure
consistent snapshots across e2e test runs.
… item

The new Chat (Inverted) entry pushed Twitter FlatList Timeline just
off-screen on iPhone 16 Pro, causing the e2e test to fail with
"View is not hittable". Add a swipe before tapping that item.
@naqvitalha naqvitalha force-pushed the feat/inverted-prop branch from 982bbbb to 46452d8 Compare March 3, 2026 23:15
naqvitalha and others added 2 commits March 4, 2026 09:02
…ers, and backdrop

These were rendered inside the inverted container without
counter-transforms, causing them to appear upside-down.

The invertedTransformStyle is undefined when inverted is falsy,
so these changes are no-ops for non-inverted lists.
…entStyle

- Extract duplicated inverted transform ternary into getInvertedTransformStyle utility
- Replace duplicated logic in RecyclerView, ViewHolder, and useSecondaryProps
- Add ListEmptyComponentStyle prop matching ListHeader/FooterComponentStyle pattern
- Only wrap ListEmptyComponent in CompatView when inverted or styled (no regression for non-inverted)
- Add InvertedTest fixture sample with items/empty/sticky toggle scenarios
- Add InvertedTest e2e tests with reference screenshots
- Add ListEmptyComponentStyle to docs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@naqvitalha naqvitalha requested a review from tmgsca March 4, 2026 18:03
@naqvitalha
Copy link
Collaborator Author

Addressed review comments:

  • as const on PlatformHelper.web.ts: Yes, intentional — it's consistent across all four platform helpers (ios, android, web, default). Narrows the transform values to literal types which aligns with RN's ViewStyle transform expectations.

  • Early return in getInvertedTransformStyle: Good call — moved the inverted guard to the call sites. getInvertedTransformStyle now only takes horizontal and always returns a style object. (85a6246)

The new inverted samples pushed Twitter Timeline below the visible
area on the examples screen, causing all Twitter e2e tests to fail
with "View is not hittable".
@naqvitalha naqvitalha merged commit 8c00817 into main Mar 4, 2026
11 checks passed
@naqvitalha naqvitalha deleted the feat/inverted-prop branch March 4, 2026 20:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

FlashList v2 Chat UX Regression: Inconsistent scroll behavior with paginated messages

2 participants