GeometryReader#

GeometryReader in Scripting is the equivalent of SwiftUI’s GeometryReader. It provides layout information about the container in which its content is placed, including size, safe-area insets, and (on supported systems) container corner insets.

This component is essential for building responsive layouts that depend on the parent container’s geometry.

GeometryProxy#

When GeometryReader constructs its child content, it injects a GeometryProxy instance into the children callback. This proxy exposes real-time layout information about the container.

1interface GeometryProxy {
2  readonly size: Size;
3  readonly safeAreaInsets: {
4    leading: number;
5    top: number;
6    trailing: number;
7    bottom: number;
8  };
9  /**
10   * Requires iOS 26.0+.
11   */
12  readonly containerCornerInsets: {
13    bottomLeading: Size;
14    bottomTrailing: Size;
15    topLeading: Size;
16    topTrailing: Size;
17  } | null;
18}

GeometryProxy Properties#

1. size#

1readonly size: Size

The actual size of the container during layout.

Size structure#

1type Size = {
2  width: number
3  height: number
4}

Use this property when calculating adaptive layout behavior, such as scaling, alignment, or proportional spacing.

2. safeAreaInsets#

1readonly safeAreaInsets: {
2  leading: number
3  top: number
4  trailing: number
5  bottom: number
6}

Represents the safe-area insets of the current container. This ensures content does not overlap with the device notch, home indicator, or other system UI elements.

Common use cases#

• Adjusting content away from the screen edges
• Implementing custom navigation bars or toolbars
• Ensuring layout compatibility across devices

3. containerCornerInsets (iOS 26.0+)#

1readonly containerCornerInsets: {
2  bottomLeading: Size
3  bottomTrailing: Size
4  topLeading: Size
5  topTrailing: Size
6} | null

Available only on iOS 26+. Provides layout insets corresponding to the physical or visual rounded corners of the container.

Use cases#

• Adapting UI for windowed environments
• Handling rounded container corners (Stage Manager, split view, floating scenes)
• Performing precision layout aligned to dynamic corner geometry

If the platform does not support it, the value will be null.

GeometryReader Component#

1type GeometryReaderProps = {
2  children: (proxy: GeometryProxy) => VirtualNode;
3};
4declare const GeometryReader: FunctionComponent<GeometryReaderProps>;

Props#

Behavior#

1. GeometryReader occupies the available space in its parent.
2. During layout, it computes size, safe-area insets, and corner insets.
3. It passes these values to the children(proxy) callback.
4. The returned VirtualNode content is laid out using these values.

This behavior matches SwiftUI’s GeometryReader model.

Example: Centered Content#

1import { GeometryReader, Text, VStack } from "scripting"
2
3function View() {
4  return <GeometryReader>
5    {(proxy) => {
6      return <VStack
7        frame={{
8          width: proxy.size.width,
9          height: proxy.size.height,
10          alignment: "center"
11        }}
12      >
13        <Text>Hello Geometry</Text>
14        <Text>
15          width: {proxy.size.width}
16        </Text>
17        <Text>
18          height: {proxy.size.height}
19        </Text>
20      </VStack>
21    }}
22  </GeometryReader>
23}

Example: Adjusting Layout by Safe Area#

1<GeometryReader>
2  {(proxy) => {
3    return <VStack
4      padding={{
5        top: proxy.safeAreaInsets.top,
6        bottom: proxy.safeAreaInsets.bottom
7      }}
8    >
9      <Text>Content inside safe area.</Text>
10    </VStack>
11  }}
12</GeometryReader>

Example (iOS 26+): Using containerCornerInsets#

1<GeometryReader>
2  {(proxy) => {
3    const corners = proxy.containerCornerInsets
4    return <Text>
5      {corners == null
6        ? "Corner insets not available"
7        : `Top Leading Corner: ${corners.topLeading.width}, ${corners.topLeading.height}`
8      }
9    </Text>
10  }}
11</GeometryReader>

Best Practices#

• Use GeometryReader only when needed, as it creates a flexible layout container.
• Prefer using it for adaptive, responsive layouts where container size matters.
• Avoid placing complex or deeply nested views inside GeometryReader unless required.