ZStack alignment not centered when in GeometryReader?

Question

I have the following view:

struct TestView: View {
    
    var body: some View {
        GeometryReader { geo in
            ZStack(alignment: Alignment(horizontal: .center, vertical: .center)) {
                                
                    Text("TEST TEXT")
                
            }.background(Color.red)
        }
    }
    
}

Renders this:

I want views in the ZStack to be centered, and that only works if I remove the GeometryReader, like so:

struct TestView: View {
    
    var body: some View {
        ZStack(alignment: Alignment(horizontal: .center, vertical: .center)) {
            
            Text("TEST TEXT")
            
        }.background(Color.red)
    }
    
}

Renders this:

How can I use the GeometryReader and still have content in the ZStack be centered like shown in the last render picture above? Why is GeometryReader messing with the ZStack content alignment?

score 10 · Accepted Answer · answered Jul 06 '21 at 18:49

10

GeometryReader's alignment keeps changing - see GeometryReader Discrepancies with Previous OS Versions. To get the normal behavior, I usually just add .frame(maxWidth: .infinity, maxHeight: .infinity).

struct TestView: View {
    var body: some View {
        GeometryReader { geo in
            ZStack { /// no need for the custom Alignment
                Text("TEST TEXT")
            }
            .background(Color.red)
            .frame(maxWidth: .infinity, maxHeight: .infinity) /// here!
        }
    }
}

Result:

answered Jul 06 '21 at 18:49

aheze

24,434
8
68
125

1

that works. thank you. I'll mark it as the answer once it allows me. – zumzum Jul 06 '21 at 18:55
1

This didn't work for me. iOs 15.5 and xCode 13.4 – Aaban Tariq Murtaza Jul 25 '22 at 08:34

score 0 · Answer 2 · answered Jul 25 '22 at 09:47

For now(Xcode 13.4, iOS 15.5), use 'position' modifier.

struct TestingGeometryReader: View {
var body: some View {
    GeometryReader { geo in
        Text("TEST TEXT")
            .position(x: geo.frame(in: .local).midX, y: geo.frame(in: .local).midY)
    }                
}

}

ylqylq001 · Answer 3 · 2023-03-26T06:50:45.613

I have a better solution than high vote answer, you only need set padding with ZStack

struct TestView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Text("TEST TEXT")
            }
            .background(Color.red)
            // Set padding here
            .padding(.vertical, geometry.size.height / 2)
            .padding(.horizontal, geometry.size.width / 2)
        }
    }
}

ZStack alignment not centered when in GeometryReader?

3 Answers3