SwiftUI not updating view based on loader - swiftui

Question

My view is like this
var body: some View {
ScrollView(.vertical) {
VStack(spacing: 10) {
ForEach(0 ..< loader.numberOfRows, id: \.self) { index in
Image("")
.frame(width: 100, height: 100)
.background(Color.random)
.clipped()
}
}
}
}
My loader is like this
final class GiphyLoader {
#Published var data: [GifData] = []
#Published var numberOfRows = 0
init() {
loadImages()
}
func loadImages() {
ImageService.getImages { [weak self] response in
self?.data = response?.data ?? []
guard let count = response?.data.count else {
return
}
self?.numberOfRows = count
print(self?.numberOfRows)
}
}
}
The print gives a count of 25 and nothing is displayed on the screen.
But when I change func loadImages to hard code 25 images then it displays 25 like this
func loadImages() {
numberOfRows = 25
}
How can I dynamically show my views based on what I get from the server?

Answer 1

Try the following:
struct ContentView: View {
#StateObject var loader = GiphyLoader()
var body: some View {
ScrollView(.vertical) {
VStack(spacing: 10) {
ForEach(0 ..< loader.numberOfRows, id: \.self) { index in
Image("")
.frame(width: 100, height: 100)
.background(Color.random)
.clipped()
}
}
}
}
}
If you haven't done so already, be sure to add an extension for Color to get a random color. Something like this will do:
extension Color {
static var random: Color {
return Color(
red: .random(in: 0...1),
green: .random(in: 0...1),
blue: .random(in: 0...1)
)
}
}
And make your loader conform to ObservableObject like below.
final class GiphyLoader: ObservableObject {
#Published var data: [GifData] = []
#Published var numberOfRows = 0
init() {
loadImages()
}
func loadImages() {
ImageService.getImages { [weak self] response in
self?.data = response?.data ?? []
guard let count = response?.data.count else {
return
}
self?.numberOfRows = count
print(self?.numberOfRows)
}
}
}
Then make sure that any subsequent views use the #ObservedObject property wrapper instead of #StateObject, for example: #ObservedObject var viewModel: GiphyLoader.
I can't run it on my end to make sure it works, because I don't have the ImageService function or the GifData array, but this should solve your problems or at least get you going.
Be sure to understand the different property wrappers and their functions.
This Hacking with Swift page should lead you further down the rabbit hole