How has GeometryReader's behavior changed between iOS 13 and iOS 14?

Question

Created Jul ’20

Replies 5

Boosts 0

Views 3.7k

Participants 6

Hi there,

We have a spot in our app where we use a GeometryReader to create a circle as a background view on a Text view. It seems as though GeometryReader's behavior has changed between iOS 13 and iOS 14. On iOS 13, the background circle is centered by default; on iOS 14 it is not.

My question is: how exactly has GeometryReader's behavior changed between iOS 13 and iOS 14, and can the docs be updated to reflect these changes?

Here's the sample code to reproduce:

Code Block Swiftstruct ContentView: View {
  var body: some View {
    Text("Test")
      .foregroundColor(Color.white)
      .background(
        GeometryReader { geometry in
          Circle()
            .frame(width: max(geometry.size.width, geometry.size.height) + 10, height: max(geometry.size.width, geometry.size.height) + 10)
            .foregroundColor(.red)
        }
      )
  }
}

On iOS 14, adding the following viewmodifer to the Circle adjusts the behavior to be the same as iOS 13

Code Block Swift .position(x: geometry.size.width / 2, y: geometry.size.height / 2)

Boost

Answer 1

ole OP

Jul ’20

Is your issue the same as the one that's called out in the Xcode 12 release notes?

Rebuilding against the iOS 14, macOS 11, watchOS 7, and tvOS 14 SDKs changes uses of GeometryReader to reliably top-leading align the views inside the GeometryReader. This was the previous behavior, except when it wasn’t possible to detect a single static view inside the GeometryReader. (59722992) (FB7597816)

1

Answer 2

reed.1325 OP

Jul ’20

I thought it might be, but wasn't sure. The issue appears to be that the GeometryReader's view itself is not centered within the frame of the background when it is instantiated, rather than it being top aligned. Perhaps this is a consequence of the changes highlighted in the release notes. I'll have to put if statements around those views to fix it for the time being and handle multiple versions.

0

Answer 3

dg100 OP

Jul ’20

I think I am seeing the same thing. I have created an example project with nothing changed from the template except the body of ContentView is:

Code Block GeometryReader { geometry in
	RoundedRectangle(cornerRadius: 25.0)
		.foregroundColor(.blue)
		.frame(width: 100, height: 100)
}
.background(Color.green)

I am using a phone running iOS 14 beta 2.

If I build and run from Xcode 11.5 I get a blue rounded rect in the centre of a green background. If I build and run from Xcode 12 beta I get a blue rounded rect in the top left corner of a green background.

As this is labelled as a 'Resolved Issue' in the release notes linked above, does that mean Apple thinks it is working as expected and will not change?

1

Answer 4

lp1756 OP

Sep ’20

I did not test with the betas and now that iOS 14 has been released I am seeing a similar problem. It appears that the geometry value of GeometryReader is not being populated -- geometry.size.width, etc. are all set to 0. I use geometry extensively for layout. Ouch. Is there a way to force GeometryReader to get the correct geo parameters?

0

Answer 5

Darko Damjanovic OP

Oct ’21

Use this GeometryReaderCentered if you want the old behavior back:

struct GeometryReaderCentered<Content: View>: View {
    var content: (GeometryProxy) -> Content

    var body: some View {
        GeometryReader { geometry in
            Group {
                content(geometry)
            }
            .frame(
                width: geometry.size.width,
                height: geometry.size.height,
                alignment: .center
            )
        }
    }
}

1