How to refresh AsyncImage

Question

Created Jun ’21

Replies 2

Boosts 0

Views 4k

Participants 2

I'm really amazed of the new AsyncImage view that is now available in iOS 15. I'm currently exploring it and implemented a simple view that just loads a random image from API. But then I wanted to create that I can just refresh this AsyncImage view on the button tap or whatever, but I have no idea how to do it as in this case URL doesn't change I just need to refresh view itself. I saw that there is .refreshable modifier added in iOS 15 that marks View as refreshable. I don't know how to use it..

Any ideas how to reload this AsyncImage view?

 AsyncImage(url: url, scale: 1) { image in
    image
        .resizable()
        .aspectRatio(1, contentMode: .fit)
        .frame(width: 300, height: 400, alignment: .center)
} placeholder: {
    ProgressView()
        .progressViewStyle(CircularProgressViewStyle(tint: .orange))
        .scaleEffect(3)
}
.refreshable {
 
}

Boost

Answer 1

workingdogintokyo OP

Jun ’21

Yes this AsyncImage is nice. However if the url does not change, it is pointless to refresh the image/view. If you really need to do it, I sometimes use this trick/hack:

  
struct ContentView: View {
    @State var url = URL(string: "https://upload.wikimedia.org/wikipedia/commons/9/98/B165841.jpg")
    @State var refreshMe = false
    var body: some View {
        VStack {
            Button("click to refresh view") {
                refreshMe.toggle()
            }
            AsyncImage(url: url, scale: 1) { image in
                image
                    .resizable()
                    .aspectRatio(1, contentMode: .fit)
                    .frame(width: 300, height: 400, alignment: .center)
            } placeholder: {
                ProgressView()
                    .progressViewStyle(CircularProgressViewStyle(tint: .orange))
                    .scaleEffect(3)
            }//.border(refreshMe ? .red : .green) // <--- testing to show the refresh is happening
        }.accentColor(refreshMe ? .black : .black) // <--- to force a refresh
    }
}

0

Answer 2

workingdogintokyo OP

Jun ’21

yes it does refresh the view/image, it just that your question mentioned that you want the url to be the same, and so the image is the same. If you want a different url when you press a button, then just do this:

  
struct ContentView: View {
    @State var url = URL(string: "https://upload.wikimedia.org/wikipedia/commons/9/98/B165841.jpg")
 
    var body: some View {
        VStack {
            Button("click to refresh view") {
                url = URL(string: "https://upload.wikimedia.org/wikipedia/commons/8/81/PIA24681-1041-Ganymede-JupiterMoon-Juno-20210607.jpg")
            }
            AsyncImage(url: url, scale: 1) { image in
                image
                    .resizable()
                    .aspectRatio(1, contentMode: .fit)
                    .frame(width: 300, height: 400, alignment: .center)
            } placeholder: {
                ProgressView()
                    .progressViewStyle(CircularProgressViewStyle(tint: .orange))
                    .scaleEffect(3)
            }
        }
    }
}

0

	AsyncImage(url: url, scale: 1) { image in
	image
	.resizable()
	.aspectRatio(1, contentMode: .fit)
	.frame(width: 300, height: 400, alignment: .center)
	} placeholder: {
	ProgressView()
	.progressViewStyle(CircularProgressViewStyle(tint: .orange))
	.scaleEffect(3)
	}
	.refreshable {

	}


	struct ContentView: View {
	@State var url = URL(string: "https://upload.wikimedia.org/wikipedia/commons/9/98/B165841.jpg")
	@State var refreshMe = false
	var body: some View {
	VStack {
	Button("click to refresh view") {
	refreshMe.toggle()
	}
	AsyncImage(url: url, scale: 1) { image in
	image
	.resizable()
	.aspectRatio(1, contentMode: .fit)
	.frame(width: 300, height: 400, alignment: .center)
	} placeholder: {
	ProgressView()
	.progressViewStyle(CircularProgressViewStyle(tint: .orange))
	.scaleEffect(3)
	}//.border(refreshMe ? .red : .green) // <--- testing to show the refresh is happening
	}.accentColor(refreshMe ? .black : .black) // <--- to force a refresh
	}
	}