What’s New in SwiftUI 3.0

Most iOS developers have been tuning in to WWDC last week for the latest updates and features that Apple offers. Today we’re going to take a look at some of the amazing new features coming to SwiftUI 3.0 and what they do.

Refreshing

SwiftUI 3.0 offers 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 an update.

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
         }
      }
   }
}

Swipe Action

The swipe action is another new modifier for Lists within SwiftUI. What this modifier does is that it allows you to create a new action for cells within a List. This is a great new feature that will help us create even more functionality for 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")
            }
         }
      }
   }
}

Searchable

This next modifier that we are going to talk about today is something that I’m very excited to have included in SwiftUI. With SwiftUI 3.0 we finally have the search modifier that allows you to add a search field to lists. This also comes bundled with a search field suggestion modifier.

You can see the implementation of the search 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())}
      }
   }
}

To actually search the results, we create a variable from the array of cars we created and look for the element that matches the text in the searchText field.

The search function is a fantastic addition to SwiftUI that will make our lives as developers a lot easier when we try to create intuitive and usable interfaces for our applications.

Conclusion

There are many more features that have been introduced for SwiftUI 3.0 that I will cover in another post, including AsyncImage, the Focus API, materials, and many more.

WWDC 2021 has brought us many exciting new features and I am excited to cover them all with you in future.