SwiftUI Display Image in a Picker object

Question

I am trying to implement the SwiftUI version of the UIKit Country Picker.

User enter a form where there is a Picker object which should creates the Picker with all the countries along with the country flag image.

See the screen shots below:

First screen is the form when you first attempt to add a Review

User clicks the Country of Origin picker object and it navigates to the Countries view. ** This is where the issue is, images wont render!? **

The user selects a country and it closes the picker view to return back to the form view and it displays the selection, which works perfectly, displays both the image and the name of the country selected.

Has anyone been able to figure out if a solution to this, or is this a bug with iOS 13!?

The code is as follows:

Form {

    TextField("Name", text: $name)
    TextField("Description", text: $desc)

    Picker(selection: $countryOrigin, label: Text("Country of Origin")) {

        Section(header: SearchBar(text: $fetcher.searchQuery)) {

            List(fetcher.country) { country in

                HStack() {

                    Image(uiImage: UIImage(contentsOfFile: Bundle.main.path(forResource: "CountryPicker", ofType: "bundle")! + "/Images/\(country.id).png")!)
                        .clipShape(Circle())

                    Text(country.name)

                }

            }

        }

    }

}

Answer 1

simply use Picker

import SwiftUI

struct ContentView: View {
    @State var sel  = -1
    let trashes = ["trash", "trash.fill", "trash.slash", "trash.slash.fill"]

    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $sel, label: Text("Trash type")) {
                    ForEach(0 ..< trashes.count) { (i) in
                        HStack {
                            Image(systemName: self.trashes[i])
                            Text(self.trashes[i])
                        }.tag(i)
                    }
                }
            }.navigationBarTitle("Select trash")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

UPDATE instead of SearchBar I used Text for simplicity

import SwiftUI

struct ContentView: View {
    @State var sel  = -1
    let trashes = ["trash", "trash.fill", "trash.slash", "trash.slash.fill"]

    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $sel, label: Text("Trash type")) {
                    Section(header: Text("Header")) {
                    ForEach(0 ..< trashes.count) { (i) in
                        HStack {
                            Image(systemName: self.trashes[i])
                            Text(self.trashes[i])
                        }.tag(i)
                    }
                }
                }
            }.navigationBarTitle("Select trash")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 2

From left to right:

1. Image(uiImage: ) displayed in a form section in a HStack
2. Image in a Picker with Image(uiImage: )
3. Image in a Picker with Image(systemImage: )

You can see that in 2 & 3 it automatically applies a tint/mask (maskColor) of black (when using non dark mode and tint/mask of white when in dark mode).

To stop this behaviour you need to add this modifier to the image but before the resizeable()

.renderingMode(Image.TemplateRenderingMode.original)