Skip to main content
GeometryReader(content: (geometry: GeometryProxy) => Component): Component;

​
Parameters

​
content
(geometry: GeometryProxy) => Component
Function that receives a GeometryProxy and returns a component. The proxy provides size and coordinate space information.

​
Support

​
Usage

​
Basic geometry reader

GeometryReader((geometry) => {
    return VStack([
        Text(`Width: ${geometry.size.width}`),
        Text(`Height: ${geometry.size.height}`)
    ])
})

​
Responsive layout

GeometryReader((geometry) => {
    const isWide = geometry.size.width > 600
    
    return isWide 
        ? HStack([
            Text("Left Content"),
            Text("Right Content")
          ])
        : VStack([
            Text("Top Content"),
            Text("Bottom Content")
          ])
})

​
Proportional sizing

GeometryReader((geometry) => {
    return HStack([
        Rectangle()
            .fill(Color("blue"))
            .frame({ width: geometry.size.width * 0.3 }),
            
        Rectangle()
            .fill(Color("red"))
            .frame({ width: geometry.size.width * 0.7 })
    ])
})

​
Centered content with padding

GeometryReader((geometry) => {
    return VStack([
        Text("Centered Content")
            .font("title")
            .padding()
            .background(Color("gray").opacity(0.2))
            .cornerRadius(8)
    ])
    .frame({
        width: geometry.size.width,
        height: geometry.size.height
    })
    .position({
        x: geometry.size.width / 2,
        y: geometry.size.height / 2
    })
})