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)

                }

            }

        }

    }

}

Seems to be an issue with swiftUI. I have the same problem. If I use Image(systemImage: xyz) it works fine, if I try and use Image(uiImage: xyz) I get the same black outline of the image. — Anthony
– Anthony, Commented Apr 28, 2020 at 22:44

user3441734 · Accepted Answer · 2020-03-21 22:35:47Z

11

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

edited Mar 21, 2020 at 22:35

answered Mar 21, 2020 at 17:14

user3441734

17.7k3 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Learn2Code Over a year ago

i added my code , i see your code but as you can see mine is not working ?!

user3441734 Over a year ago

updated, it should work as expected. check it (copy - paste - run). it seems you have trouble with your images, or you missed .tag (which you can see in my code) and see that I didn't use any List ...

user3441734 Over a year ago

and if you like to use search, as dynamic data use filtered indices and related idx as .tag ! :-)

Anthony Over a year ago

@user3441734 the OP is trying to use uiImage, not systemImage. The issue is present with uiImage.

Anthony · Accepted Answer · 2020-05-01 05:01:00Z

1

From left to right:

Image(uiImage: ) displayed in a form section in a HStack
Image in a Picker with Image(uiImage: )
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)

edited May 1, 2020 at 5:01

answered Apr 28, 2020 at 23:30

Anthony

976 bronze badges

Comments

artem · Accepted Answer · 2023-04-14 21:21:54Z

-1

Try using AsyncImage(url:fileURL) instead of Image

answered Apr 14, 2023 at 21:21

artem

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

SwiftUI Display Image in a Picker object

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related