Stretchy header

An overscroll-aware header that expands with a pull, stays edge-to-edge, and returns with native scroll physics.

iOS 17+Swift 6MITView source

Stretchy header, rendered by SwiftUI on an iPhone simulator

Recorded in the iOS simulator

Real SwiftUI, captured on an iPhone 17 Pro simulator. Run the native gallery

Installation

Install the native Swift CLI, then add the component to your app.

Terminal

hugsy add stretchy-header

Prefer to copy it yourself? Open the complete Swift file and add it to your iOS app target in Xcode. No package dependency is required.

Usage

SwiftUI

HugsyStretchyHeader(height: 320) {
  Image("cover")
    .resizable()
    .scaledToFill()
} content: {
  StoryDetails()
    .padding(24)
}

Provide a header and content builder. The component owns its ScrollView and named coordinate space, so do not wrap it in another vertical ScrollView. The header is clipped to its expanding bounds. Apply your own safe-area policy at the screen level.

API reference

Stretchy header parameters
Parameter	Type & behavior	Default
`height`	`CGFloat` Resting header height in points, clamped to at least 44.	`320`
`header`	`() -> Header` The edge-to-edge header view. It is clipped to expanding bounds.	`Required`
`content`	`() -> Content` The body of the native ScrollView. Avoid wrapping it in another vertical ScrollView.	`Required`

Interaction

Pull downward at the top of the scroll view. The header stretches with the gesture and returns with the scroll view.

RestingPullingStretchedReturningScrolled

Accessibility

Uses a native ScrollView with normal content order. Reduce Motion disables the extra stretching effect without disabling scrolling. Keep important header text readable rather than scaling it into an image.

Test with VoiceOver, Dynamic Type, and Reduce Motion on a physical device before shipping. The gallery demonstrates the interaction, not every application-specific content state.