SVG Image asset not rending correctly inside Picker - swift

Question

I am running into an issue with SVG icons not resizing when used inside of a Picker.
By way of example, here is an example of using the SVG image assets in a basic list with the
Picker commented out ...
struct DebugView: View {
#State var selectedType: DrugOrMedicineType = .tablet
var body: some View {
VStack {
List {
// Picker("Type", selection: $selectedType) {
ForEach(DrugOrMedicineType.allCases, id: \.self) { t in
HStack {
Image(t.icon)
.resizable()
.scaledToFit()
.frame(width: 20, height: 20)
Text(t.title)
}.tag(t)
}
// }
}
}
}
}
.. and this is what I see rendered ...
However, if I uncomment the Picker like this ...
struct DebugView: View {
#State var selectedType: DrugOrMedicineType = .tablet
var body: some View {
VStack {
List {
Picker("Type", selection: $selectedType) {
ForEach(DrugOrMedicineType.allCases, id: \.self) { t in
HStack {
Image(t.icon)
.resizable()
.scaledToFit()
.frame(width: 20, height: 20)
Text(t.title)
}.tag(t)
}
}
}
}
}
}
I get this rendered ...
and this is what it looks like when I try to select from the list of options ...
Can someone explain why the image doesn't follow the HStack layout and respect the frame(...) modifier when it appears in the Picker?
NOTE I am using XCode 14.0.1 and running on iOS 16.

Answer 1

Seems like they change the way that the label is handled in the picker compared to iOS 15, that's why you are having troubles with the label, this is a working example, using the label modifier you can handle the label the way you want:
import SwiftUI
enum PickerItems: String {
case item1
case item2
}
struct pickerView: View {
#State var selected: PickerItems = .item1
var body: some View {
Menu {
Picker(selection: $selected,
label: EmptyView(),
content: {
HStack {
Text("OPTION 1")
Image(systemName: "pencil")
.resizable()
.scaledToFit()
.frame(width: 20, height: 20)
} .tag(PickerItems.item1)
HStack {
Text("OPTION 2")
Image(systemName: "square.and.arrow.up.circle.fill")
.resizable()
.scaledToFit()
.frame(width: 20, height: 20)
}
.tag(PickerItems.item2)
}).pickerStyle(.automatic)
.accentColor(.white)
} label: {
Text("Selected Item: \(selected.rawValue)")
.font(.title3)
}
}
}

Answer 2

It seems as though the Picker is broken in iOS 16. The best equivalent I could find was to use the Menu as was suggested by #guillermo-jiménez but leave out the Picker entirely.
Here is the result:
struct DebugView: View {
#State var selectedType: DrugOrMedicineType = .tablet
var body: some View {
VStack {
List {
HStack {
Text("Type")
Spacer()
Menu {
ForEach(DrugOrMedicineType.allCases, id: \.self) { t in
Button {
selectedType = t
} label: {
Label(t.title, image: t.icon)
}
}
} label: {
HStack {
Image(selectedType.icon)
.resizable()
.scaledToFit()
.frame(width: 20, height: 20)
Text(selectedType.title)
}
}
}
}
}
}
}
This is how it looks as and item in the list ...
... and this is how it looks when you make a selection: