SwiftUI Toasts

To use toast notifications, you must first install the toast system in your application's root view using the .installToast(position:) modifier. This sets up the necessary environment to present toasts throughout your view hierarchy. You can specify the preferred position, such as .bottom.

import SwiftUI
import Toasts

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
        .installToast(position: .bottom)
    }
  }
}

Toasts can be customized by modifying the ToastValue initialization:

• Remove icon: Simply omit the icon parameter.
• Add a button: Provide a ToastButton instance with a title, color, and an action closure.

// Message only toast
let toast = ToastValue(
  message: "Message only toast."
)

// Toast with action button
let toast = ToastValue(
  message: "Toast with action required.",
  button: ToastButton(title: "Confirm", color: .green, action: {
    // Handle button action
  })
)

In complex view hierarchies (like those using TabView or multiple tabs), the toast system might not automatically detect safe area changes. Use the .addToastSafeAreaObserver() modifier on your subviews to ensure the toast system correctly responds to safe area insets within those specific contexts.

struct Tab1View: View {
  var body: some View {
    ScrollView {
      // Your content here
    }
    .addToastSafeAreaObserver()
  }
}

You can present a loading toast that executes an asynchronous task. The presentToast method accepts a task closure that returns a value. You can then provide onSuccess and onFailure closures to transform the task's result or error into a new ToastValue (e.g., showing a success checkmark or an error icon).

presentToast(
  message: "Loading...",
  task: {
    // Handle loading task
    return "Success"
  },
  onSuccess: { result in
    ToastValue(icon: Image(systemName: "checkmark.circle"), message: result)
  },
  onFailure: { error in
    ToastValue(icon: Image(systemName: "xmark.circle"), message: error.localizedDescription)
  }
)

To trigger a toast, access the presentToast environment value. Create a ToastValue object containing an optional icon (an Image) and a message (a String), then pass it to the presentToast function.

@Environment(\.presentToast) var presentToast

Button("Show Toast") {
  let toast = ToastValue(
    icon: Image(systemName: "bell"),
    message: "You have a new notification."
  )
  presentToast(toast)
}