Whats new in SwiftUI 3.0

Photo by Adi Goldstein on Unsplash

Most iOS developers have been tuning in to WWDC this week to catch all the latest updates and features being made available from Apple. Today we are going to do a run down on some of the awesome new features that are coming to SwiftUI 3.0 and what they do.

Refreshable

SwiftUI 3.0 brings the refreshable() modifier to developers. This modifier allows you to attach functionality to a List object in SwiftUI that occurs when the user drags the screen down far enough to trigger a refresh. We can take an example of the implementation of this modifier below:

struct SomeView: View {
var body: some View {
VStack {
List(1...10) { item in
Text("Item number \(item)")
}
.refreshable {
//enter code to execute during refresh here
}
}
}
}

As you can see, we simply add the modifier at the end of a List and can then easily add code implementation that will execute when the user triggers the refresh. Awesome right?

Swipe Action

Swipe action is another new modifier for Lists within SwiftUI. What this modifier does is allows you to create a new action for cells within a List. This is a great new feature that will help us create even further functionality to our user interfaces within SwiftUI. You can see an example of this implementation below:

struct SomeView: View {
var body: some View {
List {
ForEach(1...10, id: \.self) { item in
Text("Item Number \(item)")
.swipeActions(edge: .leading) {
Button {
//enter button actions here
} label: {
Text("Action Here")
}
}
}
}
}

What this code does, is for each cell that is displayed in our list, we are creating a swipeAction that allows the user to swipe from left to right on the cell to display the button we created. You can add more than one swipeAction to your cells and can also change the swipe from left to right or right to left by simply changing the edge from .leading to .trailing.

Searchable

This next modifier we are going to talk about today is something I am very excited to have included in SwiftUI. With SwiftUI 3.0 we finally have the searchable modifier that allows you to add a search field to lists. This also comes included with a search field suggestion modifier. You can see the implementation for the searchable modifier below:

struct Cars: Identifiable {
var id = UUID()
var name: String
}
struct SomeView: View {
@State var searchText: String = ""
@State var cars: [Cars] = [Cars(name: "Nissan"), Cars(name: "Mercedes"), Cars(name: "BMW")]
var body: some View {
NavigationView {
List($cars) { $car in
Text(car.name)
}
.searchable("Search cars", text: $searchText, placement: .automatic) {
Text("mer".searchCompletion("Mercedes")
}
}
}

var searchResults: [Cars] {
is searchText.isEmpty {
return cars
} else {
return cars.filter{$0.name.lowercase().contains(searchText.lowercased())}
}
}
}

In this example, we have created a struct for our Cars object that contains an ID and the car name. We then create an array of Cars in our view and populate it with three different cars. After we have created our list to display our cars, you can see that we have placed the searchable modifier to the list. The first text within the closure is the placeholder text to be displayed within the search bar. We then assign the text value being entered in the search bar to our searchText variable. Finally we have then can enter in search suggestions for our search bar.

To actually search the results, we then create a variable of the cars array we created and search for the item that matches with the text in the searchText field.

The searchable feature is a fantastic addition to SwiftUI that will make our lives as developers much easier when trying to create intuitive and usable interfaces for our applications.

Conclusion

There are many more features that have been introduced for SwiftUI 3.0 that we will be covering in later articles, including AsyncImage, the Focus API, materials, and many more. WWDC 2021 has provided us with a lot of new exciting features and I’m excited to cover all of them with you!

var title = “iOS Engineer @ Lunchbox”

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to make an AppStore Card animation in SwiftUI (XCode 12.0.1)

The End of Cross-Platform as We Know It

Modularize an iOS App With SPM

iPhone with colorful screen sitting in front of a keyboard

How to Make a Dynamic SwiftUI TabView With Badges

How To Customise the Behaviour of UINavigationController in iOS

Lighthouse

Resolve reusable Cell problem

Day 2 Learning Swift

Build a Basic Server Side Swift Application With Vapor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Austin Beck

Austin Beck

var title = “iOS Engineer @ Lunchbox”

More from Medium

SwiftUI: Different Ways To Present Modal Views

What’s new in SwiftUI for iOS 15?

SwiftUI Environment Property Wrapper

Choosing The Appropriate Interface Builder: UIKit vs SwiftUI