Skip to main content
GeometryReader(content: (geometry: GeometryProxy) => Component): Component;
​
content
(geometry: GeometryProxy) => Component
required
A function that receives a GeometryProxy and returns a component. The proxy provides the container’s size, safe area insets, and frame information.

​
GeometryProxy

The geometry parameter passed to the content function has the following properties:
​
size
{ width: number; height: number }
The container’s size in points.
​
safeAreaInsets
{ top: number; leading: number; bottom: number; trailing: number }
The safe area insets of the container.
​
containerCornerInsets
object
Corner insets for rounded container shapes (e.g. device corners).

​
Methods

​
frame
(coordinateSpace: CoordinateSpace) => GeometryRect
Returns the frame rectangle in the given coordinate space. CoordinateSpace is one of "global" (relative to the screen), "local" (relative to the component itself), "scrollView" (relative to the nearest scroll view), or any custom string registered via .coordinateSpace().
​
bounds
(coordinateSpace: CoordinateSpace) => GeometryRect | {}
Returns the bounds of a named coordinate space, or an empty object if unavailable.

​
Support

​
Usage

​
Proportional sizing

Size a child relative to the available space: 
GeometryReader((geometry) =>
    Circle()
        .fill(Color("blue"))
        .frame({
            width: geometry.size.width * 0.5,
            height: geometry.size.width * 0.5
        })
)

​
Responsive layout

Choose a layout based on the available width: 
GeometryReader((geometry) =>
    geometry.size.width > 400
        ? HStack({ spacing: 16 }, [sidebar, content])
        : VStack({ spacing: 8 }, [sidebar, content])
)

​
Using frame coordinates

Access the component’s position in global coordinates: 
GeometryReader((geometry) => {
    const frame = geometry.frame("global")
    return Text(`Y position: ${frame.minY}`)
})

​
Notes

  • GeometryReader expands to fill all available space in its parent container. This can affect layout if not accounted for.
  • Use GeometryReader sparingly. For adaptive layouts, consider ViewThatFits as a simpler alternative that does not expand to fill space.
  • The frame() method returns a GeometryRect with minX, minY, maxX, maxY, width, height, midX, and midY properties.

​
See Also