ericlewis/pagesheet

Customizable sheets using UISheetPresentationController in SwiftUI

PageSheet

Customizable sheet presentations in SwiftUI. Using UISheetPresentationController under the hood.

Features

• Uses the default sheet API under the hood, ensuring maximum compatibility & stability.
• Exposes the exact same API as the default SwiftUI sheet implementation.
• No hacks, follows the best practices for creating representable views in SwiftUI.
• Configurable using view modifiers, can configure UISheetPresentationController from any child views in the presented sheet's content view.
• Works with the interactiveDismissDisabled(_:Bool) modifier.
• Exposes all of the UISheetPresentationController configuration options.
• Track the currently selected detent using an Environment value.
• Well documented API, following a similar approach to the Developer Documentation.
• Small footprint, ~44kB thin when installed via SwiftPM.

Table of Contents

• Requirements
• Installation
  • Xcode
  • Swift Package Manager
• Examples
  • Example Project
  • Presentation
  • Customization
• Module Documentation
  • PageSheet
  • PageSheetCore
  • PageSheetPlus
• License

Requirements

The codebase supports iOS and requires Xcode 12.0 or newer

Installation

Xcode

Open your project. Navigate to File > Swift Packages > Add Package Dependency. Enter the url https://github.com/ericlewis/PageSheet and tap Next. Select the PageSheet target and press Add Package.

Swift Package Manager

Add the following line to the dependencies in your Package.swift file:

.package(url: "https://github.com/ericlewis/PageSheet.git", .upToNextMajor(from: "1.0.0"))

Next, add PageSheet as a dependency for your targets:

.target(name: "AppTarget", dependencies: ["PageSheet"])

A completed example may look like this:

// swift-tools-version:5.5

import PackageDescription

let package = Package(
    name: "App",
    dependencies: [
        .package(
          url: "https://github.com/ericlewis/PageSheet.git", 
          .upToNextMajor(from: "1.0.0"))
    ],
    targets: [
        .target(
          name: "AppTarget", 
          dependencies: ["PageSheet"])
    ]
)

Examples

Example Project

If you are using Xcode 13.2.1 you can navigate to the Example folder and open the enclosed Swift App Playground to test various features (and see how they are implemented).

Presentation

PageSheet works similarly to a typical sheet view modifier.

import SwiftUI
import PageSheet

struct ContentView: View {
  @State
  private var sheetPresented = false
  
  var body: some View {
    Button("Open Sheet") {
      sheetPresented = true
    }
    .pageSheet(isPresented: $sheetPresented) {
      Text("Hello!")
    }
  }
}

PageSheet also supports presentation via conditional Identifiable objects.

import SwiftUI
import PageSheet

struct ContentView: View {
  @State
  private var string: String?
  
  var body: some View {
    Button("Open Sheet") {
      string = "Hello!"
    }
    .pageSheet(item: $string) { unwrappedString in
      Text(unwrappedString)
    }
  }
}

extension String: Identifiable {
  public var id: String { self }
}

Customization

PageSheet can also be customized using a collection of view modifiers applied to the sheet's content.

import SwiftUI
import PageSheet

struct ContentView: View {
  @State
  private var sheetPresented = false
  
  var body: some View {
    Button("Open Sheet") {
      sheetPresented = true
    }
    .pageSheet(isPresented: $sheetPresented) {
      Text("Hello!")
        .preferGrabberVisible(true)
    }
  }
}

Module Documentation

PageSheet

PageSheet is split into three different modules, with PageSheetCore handling implementation and PageSheetPlus providing a new modifier called sheetPreferences(_:). The namesake module is PageSheet, which combines PageSheetCore & PageSheetPlus into a single import.

If you want to only use PageSheet without the fancy extra modifier (and extra dependency), then use PageSheetCore.

PageSheetCore

PageSheetPlus

License

PageSheet is released under the MIT license. See LICENSE for details.

pagesheet's Issues

Support custom heights

Additional context
e.g. .custom { _ in 42 }

Programmatically setting detent results in clipped view.

Programmatically changing from a large detent to a medium detent causes the content view to resize to the end height, resulting in a white box as the controller moves downward to its new size.

Selected Detent using Binding

Hi, at first, thanks for this amazing library. It seems to be the best backward compatible SwiftUI implementation :)

I saw that your code internally uses @binding for the selected detent.
Is there a way to bind a value outside of your implementation to get informed if the user changes the selected detent by dragging.
Additionally, if I change the selected detent programmatically, it looks like the selected bottom sheet detent didn't change at all.

For that it would be amazing if you could implement a solution similar to the native apple interface where the selected detent is a Binding object.

Figure out 3x render on initial presentation.

For some reason, the view seems to render 3 times on initial presentation, bouncing from the user set values to default, back to user set.

Subtle bug introduced by #8

You can't transition back to a default equal configuration.

Use a new way to determine default identity.

Improve ergonomics

It's hard to remember all of the configuration methods. Sometimes they aren't so obvious in isolation (what is preferring a grabber visibility deep in this component hierarchy?). It's hard to discover the apis for quick configuration. I am leaning towards something similar to environment(_, _). Like this:

Text("hello")
  .sheet(\.prefersGrabberVisible, true)
  .sheet(\.detents, [.medium()])

The sheet method name makes sense, but other ideas should be considered as well:

• .presentation(...)
• .pageSheet(...)
• .presentationPreference(...)
• .sheetPreference(...)

There isn't really much prior art around organized interaction with Preferences aside from creating bespoke methods like environment interactions.

I will note that using preferences the KV way doesn't make it completely obvious that we are moving upwards like a typical preference setting might. Likely important to keep preference somewhere in the signature.

Another useful tool may be a property wrapper to be able to read from preferences:

@Preference(\.pref)
var pref 

This opens the potential for simplifying the entire configuration pipeline.

Food for though 🍎

Occasional AttributedGraph cycle when interactively dismissing

Doesn't cause too much of a problem, but does need to be fix.