Swift PiecesPro
  • Library
    Screens48Finished, designed screens for real apps.Templates10Complete apps built from the screens.Build Kit24Styles, briefs and recipes for your coding agentEverything58The whole library, with search
  • Docs
  • Pro

Library

  • Screens48
  • Templates10
  • Build Kit24
  • Everything58
  • Docs
  • Pro
  • Account
Get Swift Pieces ProFree library ↗
Swift PiecesPro

Production-ready SwiftUI screens and app templates for iOS. The pieces to build the whole app.

Library

  • Screens
  • Templates
  • Build Kit
  • Everything

Product

  • Pro
  • Your account
  • Sign in

Resources

  • Docs
  • CLI
  • MCP and agents
  • Free library

Social

  • X / Twitter
  • GitHub

SWIFTPIECES PRO

© 2026 Swift Pieces. One payment, lifetime access, per-developer commercial license.

Curated withby Saivion

LibraryScreensNearby

Screen · Travel

Nearby

A map of places nearby with a Maps-style sheet that scrolls, snaps and hands off to its list.

A city guide screen: a drawn map with category pins under a detent sheet of nearby places. The sheet has real scroll handoff in both directions, velocity-seeded snapping, background scale and dim at the top detent, and keyboard avoidance for its search field. The sheet ships as `.detentSheet` for your own screens.

SwiftUIiOS 17.0+detent-sheet

Get Swift Pieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • A nearby-places screen on a drawn map with category pins
  • Scroll handoff in both directions between sheet and list
  • Velocity-seeded snapping, with background scale and dim at the top
  • Keyboard avoidance for the sheet's search field
  • .detentSheet(isPresented:detents:content:) for your own screens

In the Build Kit

Travel (brief). Your agent builds around this screen in the same design.

Used in

Travel App (template)

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

The sheet lives inside your view tree, so the map, feed or canvas behind it keeps receiving touches. It owns the scroll container for its content: dragging moves the sheet until the top detent, then the inner scroll takes over, and pulling down at scroll offset zero moves the sheet again, all within one gesture. Release projects the drag with predictedEndTranslation and snaps to the nearest detent with an interpolating spring seeded by the gesture velocity, with a soft haptic per snap. At the top detent the content behind scales down, gets rounded corners and dims; tapping the dim steps back one detent.

Notes

  • Detents are fractions of the container height ignoring the keyboard. When the keyboard appears the sheet moves to the top detent and its frame is capped at the space above the keyboard; the background content keeps .ignoresSafeArea(.keyboard) so it never shifts.
  • Scroll handoff on iOS 18 uses onScrollGeometryChange for the inner offset and ScrollPosition to commit an upward handoff: past the top detent the drag translates the content, and on release that translation is written into the real scroll offset in the same update. On iOS 17 a geometry probe inside the content reports the offset (downward handoff works the same), and dragging past the top rubber-bands the sheet instead of scrolling.
  • Inner scrolling is only enabled at the top detent and never while the sheet owns a drag, which is what stops a sheet-wide drag from fighting the scroll view.
  • Pass selectedDetent to move the sheet programmatically. Dragging below half of the lowest detent dismisses.
  • The handle is an adjustable VoiceOver element: swipe up or down to move between detents; tapping it cycles them. Reduce Motion skips the background scale and uses plain ease-outs; Reduce Transparency uses an opaque surface.
  • The Nearby screen draws its street map in code from the theme: contour lines, pastel parks and category pins. Tapping a pin or a place selects it, raises a walk-time chip over the pin and turns the sheet into the place's detail at the top detent.
  • The middle detent is sized to show the title, search, filter pills and the rail of pastel blocks with light-weight distances; the full list is one drag further, where the scroll handoff takes over.
  • DetentSheetExample at the end of DetentSheet.swift is the Nearby screen from the preview.

03

Keep building

Pieces that work well next to this one.

Screen · Travel

Stay

A stay detail screen over full-bleed scenery, with a floating booking card that rises and flicks away.

Screen · Travel

Discover

A travel discover feed of story cards that expand into full-screen guides and pull back.

Screen · Productivity

Search

A search screen with recent items and quick actions, and a fuzzy command palette with hold-and-slide to run.