Customize the Corner Radius of a Modal in SwiftUI

Written by Team Kodeco

In SwiftUI, you have the ability to modify the corner radius of a modal presentation. This provides a way to customize the aesthetics of your modal views to better fit the overall style of your application. To request a specific corner radius for a presentation, use the presentationCornerRadius modifier.

Let’s consider a fun example where we present a modal sheet of favorite movies with a customized corner radius.

struct ContentView: View {
  @State private var showModal = false

  let favoriteMovies = [
    "The Shawshank Redemption",
    "The Godfather",
    "The Dark Knight",
    "Pulp Fiction",
    "Fight Club",
    "Forrest Gump",
    "Inception",
    "The Matrix",
    "Interstellar",
    "The Lion King"
  ]

  var body: some View {
    Button("Show Favorite Movies") {
      showModal = true
    }
    .sheet(isPresented: $showModal) {
      VStack {
        List(favoriteMovies, id: \.self) { movie in
          Text(movie)
        }
      }
      .presentationDetents([.medium, .large])
      .presentationCornerRadius(21)
    }
  }
}

Tap on the Show Favorite Movies button and your preview should look like this:

In this example, we have a list of favorite movies displayed in a modal sheet. The .presentationCornerRadius(21) modifier applies a corner radius of 21 points to the modal sheet. You can adjust this value to increase or decrease the rounded corners of your modal. If you set cornerRadius to nil, the system default corner radius will be used.

This simple modifier can help create a smoother and more visually appealing transition between your base view and your modal view, enhancing the overall user experience.