# Geometry Reader in SwiftUI

Hi all, in SwiftUI, the `GeometryReader` is a powerful view that allows you to read the size and position of its parent view. This can be extremely useful when you need to position child views relative to their parent, or when you need to size a view based on the size of its parent. In this blog post, we'll explore the `GeometryReader` and how you can use it in your SwiftUI apps.

The code of this demonstration is available [here](https://github.com/xavier7t/iOSDevX/tree/main/iOSDevX/202303-Mar%202023/Geometry%20Reader%20in%20SwiftUI).

# What is Geometry Reader?

The `GeometryReader` is a SwiftUI view that provides a geometry proxy to its child views. This proxy contains information about the size and position of the parent view, as well as the size and position of the child views. The geometry proxy is passed as a parameter to a closure that you provide, allowing you to read and use this information in your SwiftUI code.

# Basic Usage

To use GeometryReader, you simply need to embed it in a view hierarchy and provide a closure that takes a GeometryProxy parameter. For example, consider the following code:

```swift
GeometryReader { proxy in
    Text("Width: \(proxy.size.width), Height: \(proxy.size.height)")
}
```

In this example, we're using `GeometryReader` to read the size of its parent view and display the width and height using a `Text` view. When you run this code, you'll see the width and height of the parent view displayed on the screen.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679107381377/2d6c7331-566c-489a-99b5-fab57b457648.png align="center")

# Positioning Child Views

One of the most common use cases for `GeometryReader` is to position child views relative to their parent view. For example, consider the following code:

```swift
VStack {
    GeometryReader { proxy in
        VStack {
            Text("Parent Width: \(proxy.size.width)")
            HStack(spacing: 0) {
                Text("Left")
                Spacer()
                Text("Right")
            }
        }
    }
}
.padding(.horizontal, 20)
```

In this example, we're using `GeometryReader` to position two `Text` views horizontally centered within its parent view. By using a `Spacer` view, we're able to position the two `Text` views at the left and right edges of the parent view, respectively. When you run this code, you'll see the two `Text` views are positioned correctly within the parent view. And there’s a `padding` view modifier providing a horizontal padding of 20 points for the parent VStack, resulting in a width of 353 points. ( `= 393 - 2 * 20` )

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679107543743/3b0c831c-cef9-4fa3-b201-bda0b5cb6e7c.png align="center")

# Sizing Child Views Based on Parent Size

Another common use case for `GeometryReader` is to size a view based on the size of its parent. For example, consider the following code:

```swift
HStack {
    GeometryReader { proxy in
        Circle()
            .stroke(lineWidth: 2)
            .foregroundColor(.cyan)
            .frame(width: proxy.size.width / 2, height: proxy.size.width / 2)
    }
}
.frame(width: 100)
```

In this example, we're using `GeometryReader` to size a `Circle` view based on the size of its parent view - an HStack with a width of 100 points. By dividing the parent view's width by two, we're able to make the `Circle` view half the size of its parent view. When you run this code, you'll see a `Circle` view that is sized based on the size of its parent view.

The screenshot below shows an HStack with a width of 100 and a stroked circle with a diameter of 50 (as defined in the `frame` view modifier).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679107870860/5702bc99-24cf-47f2-8fee-00ceff91cc20.png align="center")

# **Conclusion**

In conclusion, the `GeometryReader` is a powerful view that allows you to read the size and position of its parent view, as well as the size and position of child views. This can be extremely useful when you need to position child views relative to their parent or when you need to size a view based on the size of its parent. By using `GeometryReader` in your SwiftUI code, you can easily control the size or location of a child view, dynamically based on its parent view.

That’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!