GeometryReader behaves oddly with an extracted view

Question

In this example, the "hello" text is placed in the middle of the screen, as expected.

struct ContentView: View {
    var body: some View {
        GeometryReader { geo in
            Text("hello")
                .background(Color.green)
        }
        .background(Color.blue)
    }
}

But when I move Text to an extracted view, the "hello" text moves to the top left corner of the screen.

struct ContentView: View {
    var body: some View {
        GeometryReader { geo in
            ExtractedView()
        }
        .background(Color.blue)
    }
}

struct ExtractedView: View {
    var body: some View {
        Text("hello")
            .background(Color.green)
    }
}

Is this a bug, or an expected behavior I don't understand?

@pawello2222 I'm on Xcode 11.6. What do you see with Xcode 11.5? — thedp, Jul 28 '20 at 22:52
In both cases the same: the text "hello" with a green background and a blue background for the rest of the view. — pawello2222, Jul 28 '20 at 22:54

score 2 · Accepted Answer · answered Jul 29 '20 at 04:02

Confirm top-left location on Xcode 12 / iOS 14. I don't think it is a bug. Actually, GeometryReader is not a container and does not (should not) have own default alignment, its purpose custom alignment, so here we are.

Possible solutions (tested with Xcode 12b3 / iOS 14):

place by position

GeometryReader { geo in
    ExtractedView()
        .position(x: geo.size.width / 2, y: geo.size.height / 2)
}

wrap into full-size stack container (that has default alignment)

GeometryReader { geo in
    VStack {
        ExtractedView()
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}

Thank you for the confirmation. But if it's not a container, why does it behave like one in my first example? What's the difference between using something directly vs in an extracted view? — thedp, Jul 29 '20 at 07:16

GeometryReader behaves oddly with an extracted view

1 Answers1