Reading UI screen height inside scrollview using GeometryReader - swiftui

Question

I have a scrollview with a few subviews, and I wanted each of these subviews to have a specific height relative to UI screen height. I know you can do this with GeometryReader, but the moment I put GeometryReader inside ScrollView, it fails to read screen height.
What I want to achieve
Code and preview without ScrollView
struct CurrentView: View {
var body: some View {
NavigationView {
GeometryReader { geo in
VStack {
Rectangle()
.foregroundColor(Color.red.opacity(0.5))
.frame(maxWidth: geo.size.width, maxHeight: geo.size.height * 0.3)
Rectangle()
.foregroundColor(Color.red.opacity(0.5))
.frame(maxWidth: geo.size.width, maxHeight: geo.size.height * 0.3)
Rectangle()
.foregroundColor(Color.red.opacity(0.5))
.frame(maxWidth: geo.size.width, maxHeight: geo.size.height * 0.3)
}
}
.navigationTitle("Title")
.padding(.horizontal)
}
}
}
Code and Preview with scrollview
struct CurrentView: View {
var body: some View {
NavigationView {
GeometryReader { geo in
ScrollView {
VStack {
Rectangle()
.foregroundColor(Color.red.opacity(0.5))
.frame(maxWidth: geo.size.width, maxHeight: geo.size.height * 0.3)
Rectangle()
.foregroundColor(Color.red.opacity(0.5))
.frame(maxWidth: geo.size.width, maxHeight: geo.size.height * 0.3)
Rectangle()
.foregroundColor(Color.red.opacity(0.5))
.frame(maxWidth: geo.size.width, maxHeight: geo.size.height * 0.3)
}
}
}
.navigationTitle("Title")
.padding(.horizontal)
}
}
}
The view seems to break whenever I use ScrollView and GeometryReader's height together. I tried putting ScrollView inside GeometryReader, and the other way around as well, but with the same results (geo.size.height becomes 0 it seems).
So is there a way to set frame height relative to screen height for frames inside a scrollview? Or will I have to just resort to UIScreen.main.bounds.size.height Thank you!

Answer 1

This happens because you use maxHeight instead of height. The ScrollView will always try to "collapse" its content and since you are using the GeometryReader to dynamically calculate the height, you need to set it explicitly to tell the ScrollView that this is the size you always want. minHeight would also do the trick.
struct ContentView: View {
var body: some View {
GeometryReader { proxy in
ScrollView {
VStack {
Rectangle()
.foregroundColor(Color.red.opacity(0.5))
.frame(height: proxy.size.height * 0.3)
Rectangle()
.foregroundColor(Color.red.opacity(0.5))
.frame(height: proxy.size.height * 0.3)
Rectangle()
.foregroundColor(Color.red.opacity(0.5))
.frame(height: proxy.size.height * 0.3)
}
}
}
}
}