Skip to content

feat(mobile): swipe between For You and Latest feed tabs - #14473

Merged
dylanjeffers merged 1 commit into
mainfrom
feat/mobile-feed-swipe-tabs
Jun 11, 2026
Merged

dylanjeffers merged 1 commit into
mainfrom
feat/mobile-feed-swipe-tabs

Conversation

@dylanjeffers

Copy link
Copy Markdown
Contributor

Summary

Adds swipe left/right gesture paging to the mobile home feed, letting users swipe between the For You and Latest tabs in addition to tapping the existing tab headers (which remain fully functional).

  • Wraps the two feed lineups in a horizontal PagerView (react-native-pager-view) — already a dependency and linked into iOS pods / Android autolink, so no new native module is added.
  • Page order mirrors the tab headers: swipe left → Latest, swipe right → For You.
  • Both lineups stay mounted as pager pages, so each keeps its own scroll position.
  • Existing data gating is preserved (enabled: isForYou / !isForYou) — only the active feed fetches; swiping enables the other feed on arrival, just like tapping did before.

Two-way sync between tab state and pager

Tab state comes from useFeedTab (persisted to localStorage).

  • Tap → updates state immediately (instant pill highlight); a useEffect slides the pager to match.
  • Swipe → onPageSelected commits the new tab and fires the existing FEED_CHANGE_VIEW analytics event.

Correctness details handled

  • Guarded committer — onPageSelected skips when the pager already matches state. This swallows the initial onPageSelected PagerView emits on mount (Android), which would otherwise fire a spurious FEED_CHANGE_VIEW event and could clobber the persisted tab, and it prevents double-counting a header tap.
  • Async-load reconciliation — useFeedTab returns the FOR_YOU default while localStorage resolves, so a user whose last tab was "Latest" would briefly land on the wrong page. An effect re-aligns the pager once the stored tab resolves.

Testing

  • tsc --noEmit → 0 errors
  • eslint on the changed file → clean

🤖 Generated with Claude Code

Wrap the home feed in a horizontal PagerView so users can swipe
left/right to toggle between the For You and Latest feeds, in addition
to tapping the existing tab headers. Uses react-native-pager-view
(already a dependency — no new native module).

Tab state and the pager stay in two-way sync: header taps update state
immediately and an effect slides the pager to match; swipes commit the
new tab via onPageSelected. The page-selected handler is guarded to
skip when the pager already matches state, which swallows the initial
onPageSelected PagerView emits on mount (Android) — avoiding a spurious
FEED_CHANGE_VIEW analytics event and a clobber of the persisted tab —
and a reconciliation effect realigns the pager once the persisted tab
resolves from localStorage after mount.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Jun 11, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: dcc9f92

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@dylanjeffers
dylanjeffers merged commit 5ec7686 into main Jun 11, 2026
3 checks passed
@dylanjeffers
dylanjeffers deleted the feat/mobile-feed-swipe-tabs branch June 11, 2026 21:54
dylanjeffers added a commit that referenced this pull request Jun 16, 2026
## Summary

The For You / Latest swipe pager
([#14473](#14473))
wrapped the feed in a `PagerView`, which swallowed the horizontal swipe
that opens the left nav drawer. The drawer's own full-width native swipe
(`swipeEdgeWidth: SCREEN_WIDTH`) also competed with the pager, so:
- a right-swipe on **Latest** opened the drawer instead of paging back
to For You, and
- gesture arbitration with the track tiles' tap gesture was flaky
(swipes starting on a tile, and fast flings, often didn't register).

## Changes

- **Disable the drawer's native swipe while the feed is focused and the
drawer is closed** (via `setGesturesDisabled`), re-enabled once the
drawer is open so swipe-to-close still works, and restored on blur. This
leaves the pager as the sole owner of horizontal paging.
- **Add a rightward-only pan on the For You page** that opens the
drawer, composed `Gesture.Simultaneous` with the pager's native gesture
so fast flings aren't claimed by the pager before the pan activates.

## Behavior

| Page | Swipe right | Swipe left |
|------|-------------|------------|
| For You | Opens drawer (fast or slow, incl. from a track tile) | →
Latest |
| Latest | → For You | (nothing) |

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant