Skip to content

Adopt iOS Large Title headers with scroll-edge appearance #47

@kmch4n

Description

@kmch4n

Summary

Move the top-of-screen titles on Home, Search, Dashboard, Calendar, and Settings to the iOS-native Large Title pattern — the title is rendered large at rest and collapses into a standard-height navigation bar as the user scrolls.

Motivation

  • Large Titles are the default navigation chrome across Apple's first-party apps (Mail, Messages, Settings, Music, Photos).
  • They signal the current screen clearly without a separate header component and reclaim vertical space at the top of long lists.
  • Combined with Liquid Glass, the scroll-edge appearance (transparent at top → material when content scrolls behind) is the signature iOS look.

Proposal

Configure each top-level tab's stack screen with options similar to:

{
    headerLargeTitle: true,
    headerTransparent: true,
    headerBlurEffect: "regular",
    headerLargeTitleShadowVisible: false,
}

Apply to:

  • src/app/(tabs)/index/_layout.tsx
  • src/app/(tabs)/search/_layout.tsx
  • src/app/(tabs)/dashboard/_layout.tsx
  • src/app/(tabs)/calendar/_layout.tsx
  • src/app/(tabs)/settings/_layout.tsx

Settings sub-screens (techniques, tags, favorite-resorts, etc.) should keep compact titles since they are pushed screens.

Notes

  • Search bars integrate cleanly with Large Titles via headerSearchBarOptions — this could replace or complement the existing FilterBar search input.
  • Content under the header must account for the collapsible height; contentInsetAdjustmentBehavior: "automatic" handles this on iOS.
  • Android falls back to standard-height headers automatically.

Acceptance criteria

  • Home, Search, Dashboard, Calendar, and Settings top-level tabs use Large Title headers on iOS.
  • Titles collapse and the header gains a material background as content scrolls under it.
  • Content layout does not overlap the collapsible header (top inset respected).
  • Android behavior is unchanged or improved (no regressions).

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:navigationBottom tab bar and navigation behaviorenhancementNew feature or requestfeature-ideaUser-facing feature ideas and product explorationpriority:mediumMedium priority

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions