A lightweight alternative to system sheets on iOS.

You can add Modals to your project using Swift Package Manager.

• From the File menu, select Add Packages...
• Enter the repo URL

http://github.com/fieldday-ai/Modals.git

To set up Modals in your project, wrap the root view of your project in the ModalStackView. This will allow modals to be overlayed from the root level of the view hierarchy.

@main
struct ModalsExample: App {
    var body: some Scene {
        WindowGroup {
            // Wrap your root view in the ModalStackView
            ModalStackView {
                ContentView()
            }
        }
    }
}

To register a modal, call the .modal() modifier on any View (just like with system sheets).

struct ContentView: View {
    
    @State var isPresented: Bool = false
    
    var body: some View {
        Button {
            isPresented = true
        } label: {
            Text("Open")
        }
        .modal(isPresented: $isPresented) {
            Text("Modal!")
        }
    }
}

To change the size of the modal, pass in a ModalSize into the .modal() modifier.

.modal(
    ...,
    size: .medium
) { 
    ...
}

There are .small, .medium, and .large default sizes, as well as custom sizes defined by a constant .height or a .fraction of the screen height (inspired by presenationDetents on system sheets).

To change the corner radius of the modal, use the cornerRadius argument in the .modal() modifier.

.modal(
    ...,
    cornerRadius: 18
) { 
    ... 
}

You can also pass in an array of available customization options to the .modal() modifier.

• .prefersDragHandle: Replaces the default close button with a center-aligned drag handle.
• .disableContentDragging: Disables the ability to drag on content to dismiss the modal (sometimes useful when a ScrollView is embedded in the modal).

.modal(
    ...,
    options: [.prefersDragHandle]
) { 
    ... 
}

The ModalStack can be customized by using a variety of supported modifers.

In the below context, "Content" is just whatever view is being overlayed by the modal.

Content scaling can be disabled by using the .contentScaling() modifier.

ModalStackView {
    ...
}
.contentScaling(false)

Content saturation can be disabled by using the .contentSaturation() modifier.

ModalStackView {
    ...
}
.contentSaturation(false)

Content background color can be adjusted using the .contentBackgroundColor() modifier. This is the only way to have a background color ignore safe area completely while content scaling is enabled.

ModalStackView {
    ...
}
.contentBackgroundColor(Color.blue)

To change the container background color (in the video, the area that is white behind the root content & presented modals), use the .containerBackgroundColor() modifier.

ModalStackView {
    ...
}
.containerBackgroundColor(Color.blue)