SwiftUI GeometryReader does not layout custom subviews in center

I'm not sure why this is happening but you can use what others have suggested, or use the midX and midY from GeometryProxy's frame. Like the following:

var body: some View {
    GeometryReader { geometry in
        ImageContent()
        .position(x: geometry.frame(in: .local).midX, y: geometry.frame(in: .local).midY)
    }
}

I just ran into the same problem and I don't like the solution of setting the position manually because it complicates the process of automatically generating layout. For me the problem persists even after wrapping my content in a VStack. However, if you wrap the content in a VStack AND also manually set its frame - everything works as expected:

var body: some View {
    GeometryReader { geometry in
       VStack {
        ImageContent()
       }
       .frame(width: geometry.size.width, height: geometry.size.height)
    }
}

I think this issue pops up because GeometryReader's internal layout acts like a ZStack and it needs more information.


You can use the GeometryProxy value passed inside your GeometryReader body.

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ImageContent()
                .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
        }
    }
}

This will define the exact position based on value provided.


Update: retested with Xcode 13.3 / iOS 15.4

Try the following (built-in container by default expanded to size of GeometryReader and have explicit default alignment set to center by both dimensions). Tested with Xcode 11.2.

var body: some View {
    GeometryReader { geometry in
       VStack { // explicit container with center default alignment
        ImageContent()
       }
       .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}