Skip to content

feat(mobile): add horizontal swipe navigation between articles#4926

Open
atmasphere wants to merge 1 commit intoRSSNext:devfrom
atmasphere:feature/swipe-between-articles
Open

feat(mobile): add horizontal swipe navigation between articles#4926
atmasphere wants to merge 1 commit intoRSSNext:devfrom
atmasphere:feature/swipe-between-articles

Conversation

@atmasphere
Copy link

Summary

  • Adds swipe left/right to navigate between articles in the entry detail screen
  • Adds a subtle prev/next navigation bar with position counter at the bottom of articles
  • Extracts shared navigateToEntry() function used by swipe, tap buttons, and existing pull-up-to-next

Problem

Currently in article reading mode, the only way to advance to the next article is to scroll all the way to the bottom and pull up. This is impractical for long articles and doesn't match the interaction patterns of other RSS readers (Reeder, Feedbin, Inoreader).

Closes #4577

Implementation

New files

  • useSwipeEntryNavigation.tsx — Hook that wraps content in a PagerView with prev/current/next pages. On swipe completion, navigates via replaceControllerView (same mechanism as pull-up-to-next).
  • EntryNavBar.tsx — Prev/Next button bar with position counter. Buttons disable at list boundaries. Haptic feedback on navigation.

Modified files

  • EntryDetailScreen.tsx — Integrated swipe wrapper and nav bar. Extracted navigateToEntry() as shared function for all navigation methods.

Architecture

  • Uses the existing entryIds array already passed to EntryDetailScreen
  • Uses react-native-pager-view (already a dependency) for gesture handling
  • Follows the same replaceControllerView pattern as pull-up-to-next
  • Pull-up-to-next continues to work alongside horizontal swipe
  • Haptic feedback via expo-haptics (matching PagerList pattern)

Test plan

  • Open an article from a feed with multiple entries
  • Swipe left → navigates to next article
  • Swipe right → navigates to previous article
  • Tap "Next ›" button → navigates to next article
  • Tap "‹ Prev" button → navigates to previous article
  • First article: "‹ Prev" is disabled/grayed
  • Last article: "Next ›" is disabled/grayed
  • Pull-up-to-next at bottom still works
  • Position counter shows correct "N / Total"
  • Vertical scrolling within article is not affected by horizontal swipe
  • Test on iPhone and iPad

Adds swipe left/right to navigate between articles in the entry detail
screen, addressing the UX gap where users had to scroll to the bottom
of an article before advancing to the next one.

Changes:
- New `useSwipeEntryNavigation` hook wrapping content in PagerView
- New `EntryNavBar` component with prev/next buttons and position counter
- EntryDetailScreen integrated with both swipe and existing pull-up-to-next
- Shared `navigateToEntry()` function used by swipe, buttons, and pull-up

The swipe uses the same `entryIds` array and `replaceControllerView`
pattern already used by pull-up-to-next navigation. PagerView (already
a dependency) handles the gesture, with haptic feedback on page change.

Closes RSSNext#4577
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.

Mobile UX: Next Article Swipe Left

1 participant