Use SwiftUI in UIKit Cells with UIHostingConfiguration

Most iOS projects I’ve worked on since SwiftUI was released contain a mix of UIKit and SwiftUI. Any ways to make these frameworks interoperate easier is a win. UIHostingConfiguration is one of these very useful tools.

Since iOS 14, UITableViewCell and UICollectionViewCell have had a contentConfiguration property of protocol type UIContentConfiguration. This property allows developers to inject the view they want to use through the protocol’s makeContentView() function.

In iOS 16, the UIHostingConfiguration struct (which conforms to UIContentConfiguration) was introduced. This struct takes in a SwiftUI view so that it can be injected into the UITableViewCell or UICollectionViewCell using the contentConfiguration property.

Example:

struct Fruit {
    let name: String
    let count: Int
}

struct CountRowView: View {
    let title: String
    let count: Int

    var body: some View {
        HStack {
            Text(title)
            Spacer()
            Text("\(count)").foregroundStyle(.secondary)
        }
        .padding(.vertical, 8)
    }
}

class FruitsViewController: UITableViewController {
    let cellId = "fruitCell"
    
    let data = [Fruit(name: "Apples", count: 3),
                Fruit(name: "Bannanas", count: 6),
                Fruit(name: "Oranges", count: 8)]

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        data.count
    }
    
    override func tableView(_ tableView: UITableView,
                            cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: cellId)
            ?? UITableViewCell(style: .default, reuseIdentifier: cellId)

        let item = data[indexPath.row]
        cell.contentConfiguration = UIHostingConfiguration {
            CountRowView(title: item.name, count: item.count)
        }

        return cell
    }
}

What’s great is we now have a re-usable SwiftUI row that we can apply anywhere in our app, whether the list/collection is in UIKit or SwiftUI.