New SwiftUI Modifiers and Views in iOS 15

Discover some of the latest features in SwiftUI

4 min readJun 9, 2021

Official Swift logo

Hi everyone. Today I will talk about the features announced at WWDC21 that I find important in SwiftUI.

And I’d like to point out that I will only briefly mention the topics. If you want more information about SwiftUI, check out the Apple documentation.

In our example, we will use this model:

struct User : Identifiable{
    var id = UUID()
    let name: String
    let age: Int
}

.searchable

Perhaps one of the most important features is the searchable API. Because when we wanted to search List, we had to do a lot of operations with UIViewRepresentable. Thanks to this API, we can get rid of all these troubles and do dozens of code operations in a single line. Additionally, this API must be in NavigationView.

simulation of use of search bar on a phone — Search bar in SwiftUI

.refreshable

According to the documentation, “When you apply this modifier on iOS and iPadOS to a scrollable view like List, the view provides a standard way for the user to refresh the content. Use an await expression inside the action to refresh your data. The refresh indicator remains visible for the duration of the awaited operation.”

simulation of a list being refreshed on a phone — Refreshable list

.listStyle

One of the most sought-after features was customizing the separators. Thanks to this API, we can hide the separators and change their color.

phone screen showing List separator — List separator

AsyncImage

AsyncImage is a view that asynchronously loads and displays an image. You can also add a placeholder. It is a nice privilege to be able to do this without any packages. I think the ones who will be most affected by this are Kingfisher and SDWebImage.

Material Effects

Material Effects gives a blur effect, aka UIViewVisualEffect.

.overlay(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 12))

phone screen showing a blurred image — Visual blur effect

Badge

This generates a badge for the view from an integer value. But when we write a short if-else condition inside the badge, it does not work. I think there’s a bug.

.onSubmit

.onSubmit adds an action to perform when the user submits a value to this view. Different views may have different triggers for the provided action. A TextField or SecureField will trigger this action when the user hits the hardware or software return key. This modifier may also bind this action to a default action keyboard shortcut. You may set this action on an individual view or an entire view hierarchy.

.safeAreaInstest

.safeAreaInstest shows the specified content above or below the modified view, like a hover view.

blank phone screen with a red bar at the bottom

.interactiveDismissDisabled

This adds a condition that prevents interactive dismissal when the view is contained within a popover or a sheet.

.swipeActions

This adds custom swipe actions to a row in a list. And we can add a fully customizable button or any view.

phone screen with two items in a list and a red button with an X below them

.submitLabel

This sets the submit label for this view. Being able to change the submit button on the keyboard is a small but nice change.

TextField(“text” , text: .constant(“”))
    .submitLabel(.done)

@FocusState

When we look at @FocusState, it makes it easy for us to automatically guide the user on TextField.

Result

That’s all for today. If there is any interest, I will write the rest of this series as soon as possible.

Happy coding everyone!