Hi, happy Monday!

I have a scrollview with a few subviews, and I wanted each of these subviews to have a certain frame 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.

Here's what I want to achieve

Without scrollview, this works nicely.

struct CurrentWeatherView: 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)
        }
    }
}

But the view breaks when I use ScrollView. I tried putting ScrollView inside Geometry Reader, and the other way around, but with the same results (geo.size.height becomes 0 it seems).

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

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!

Just guessing here. The ScrollView adapts automatically to the content it has and has no fixed height you can measure before there is content. Basically, it could scroll to infinity. The whole point of a ScrollView is that you can scroll down when you have more content than it can fit on the screen. And as your rectangles don't have content it shrinks them. What happens if you remove the height from your rectangles completely?

This taken from Paul's Pro SwiftUI book (Which is on offer until 4 Dec)

“At the core of SwiftUI is its three-step layout process:

1 .A parent view proposes a size for its child.

2. Based on that information, the child then chooses its own size and the parent view must respect that choice.
3. The parent view then positions the child in its coordinate space.”

So to try and explain a little about what happening in your code.

“Not all views have a meaningful ideal size, and in fact some views have very little sizing preference at all – they will happily adapt their own size based on the way we use them alongside other views. This is called being layout neutral, and a view can be layout neutral for any combination of its six dimensions. In its purest form, layout neutrality it looks like this:

struct ContentView: View {
    var body: some View {
        VStack {
                ForEach(0..<3, id: \.self) { _ in
                    Color.red
                }
            }
            .padding(.horizontal)
    }
}

That will fill the screen with three Color.red of equal size

But when you add a ScrollView

“Usually Color.red is happy to fill all the available space, but it wouldn’t make any sense here because it would lead to an infinitely sized scroll view. In this situation, the red color will get a nominal 10-point height – enough that we can see it’s being placed, but it won’t expand beyond that.”

var body: some View {
    ScrollView {
        VStack {
            ForEach(0..<3, id: \.self) { _ in
                Color.red
            }
        }
        .padding(.horizontal)
    }
}

So it the ScrollView that causing your issues and GeometryReader would lead to an infinite size.

PS UIScreen.main.bounds.size.height will give the total height of the screen including the safe areas which is different on different phones.