Passing views, or higher-order components, in SwiftUI - ios

Question

As someone who knows React, coming to SwiftUI I'm having challenges to find the right abstractions. Here's an example, but my question is more general. It's related to passing views or, what the React community calls, higher-order components. My example is below. TLDR: how do I abstract and remove duplication in the list views below?
Some models (these will differ in the end):
struct Apple: Comparable, Identifiable {
let id: UUID = UUID()
let label: String
static func < (lhs: Apple, rhs: Apple) -> Bool {
lhs.label < rhs.label
}
}
struct Banana: Comparable, Identifiable {
let id: UUID = UUID()
let label: String
static func < (lhs: Banana, rhs: Banana) -> Bool {
lhs.label < rhs.label
}
}
Some basic detail views (these will differ in the end):
struct AppleView: View {
let apple: Apple
var body: some View {
Text(apple.label)
}
}
struct BananaView: View {
let banana: Banana
var body: some View {
Text(banana.label)
}
}
And two list views with a lot of duplication:
struct AppleListView: View {
let title: String
let apples: [Apple]
var body: some View {
List(apples.sorted()) { apple in
NavigationLink(destination: AppleView(apple: apple)) {
Text(apple.label)
.padding(.all)
}
}
.navigationBarTitle(Text(title), displayMode: .inline)
}
}
struct BananaListView: View {
let title: String
let bananas: [Banana]
var body: some View {
List(bananas.sorted()) { banana in
NavigationLink(destination: BananaView(banana: banana))
Text(banana.label)
.padding(.all)
}
}
.navigationBarTitle(Text(title), displayMode: .inline)
}
}
As you can see, it differs only in small parts. The type of the collection differs and the destination view. I want to remain flexible when it comes to this destination view as Apple and Banana, and their detail views above, will differ in the end. Furthermore it's likely that I want to add Cherry later on, so there's value in abstracting this list view.
So, my question is: how can I best abstract the list views above and remove the duplication in there? What would you suggest? My attempts are below, but it leaves me with type errors. It touches on the higher-order component idea, mentioned earlier.
My attempt with type errors:
struct AppleListView: View {
let title: String
let apples: [Apple]
var body: some View {
ListView(
title: title,
rows: apples, // it complains about types here -> `Cannot convert value of type '[Apple]' to expected argument type 'Array<_>'`
rowView: { apple in Text(apple.label) },
destinationView: { apple in AppleView(apple: apple) }
)
}
}
struct BananaListView: View {
let title: String
let bananas: [Banana]
var body: some View {
ListView(
title: title,
rows: bananas, // it complains about types here -> `Cannot convert value of type '[Banana]' to expected argument type 'Array<_>'`
rowView: { banana in Text(banana.label) },
destinationView: { banana in BananaView(banana: banana) }
)
}
}
struct ListView<Content: View, Row: Comparable & Identifiable>: View {
let title: String
let rows: [Row]
let rowView: (Row) -> Content
let destinationView: (Row) -> Content
var body: some View {
List(rows.sorted()) { row in
NavigationLink(destination: self.destinationView(row)) {
self.rowView(row)
.padding(.all)
}
}
.navigationBarTitle(Text(title), displayMode: .inline)
}
}

Answer 1

It is because you made same type for Label and Destination, here is fixed variant
struct ListView<Target: View, Label: View, Row: Comparable & Identifiable>: View {
let title: String
let rows: [Row]
let rowView: (Row) -> Label
let destinationView: (Row) -> Target
var body: some View {
List(rows.sorted()) { row in
NavigationLink(destination: self.destinationView(row)) {
self.rowView(row)
.padding(.all)
}
}
.navigationBarTitle(Text(title), displayMode: .inline)
}
}