Spatial SwiftUI: realityViewSizingBehavior

A modifier that controls frame and alignment for RealityView.

Overview

When working with RealityKit, we use RealityView to show 3D content. RealityView is just that–a view. We can add modifiers to it just like any other view. realityViewLayoutBehavior is a new modifier in visionOS 26 that lets SwiftUI size the frame and align content inside the RealityView. There are three options.

• .flexible: This is the default behavior when we don’t use this modifier. The Reality View will take up all available space and will not try to align content inside it.
• .centered: This option will still have a flexible frame that will fill the available space. The visual content inside the RealityView will be centered.
• .fixedSize: This option will size the frame to fit the content of the Reality View.

In the images below, the Volume has a white line. The RealityView has a green line to indicate the frame.

There are some consideration to keep in mind when using realityViewLayoutBehavior.

• This will be applied after the RealityView make closure and will not update when we add additional content to the scene. It is best to think of this as a one-time feature that we can use when we load a scene.
• This will not resize the RealityView content. If we have a Reality Composer Pro scene that exceeds the bounds of a host window or volume, that content will be clipped.

This modifier maybe particularly useful when working with some of the other Spatial Layout features in SwiftUI. It can also be helpful to simplify common layouts. For example, Project Graveyard is a bottom-aligned volume. I’ve had to do my own hacks to place the 3D content at the bottom of the available space. With this new modifier, all I need to do is use the .fixedSize option and push the view down with a spacer.

VStack {
    Spacer()
    RealityView { content in
      ...
    }
    .realityViewLayoutBehavior(.fixedSize)
}

VStack {
    Spacer()
    RealityView { content in
      ...
    }
    .realityViewLayoutBehavior(.fixedSize)
}

Video Demo

Example Code

Note: this modifier does not update when we change the option at runtime. It only works based on the result of the initial size calculated during the RealityView make closure. The example below uses a view id to force new versions of RealityView to be created when we change the value. This was done for demonstration purposes only.

struct Example095: View {
    @State private var showDebugLines = true
    @State private var option: RealityViewLayoutOption = .flexible
    @State private var viewId = 0 // Counter to force view recreation

    var body: some View {
        VStack {
            Spacer()
            RealityView { content in
                guard let scene = try? await Entity(named: "SwiftUIScienceLab", in: realityKitContentBundle) else { return }
                content.add(scene)
            }
            .realityViewLayoutBehavior(option)
            .debugBorder3D(showDebugLines ? .green : .clear)
            .id(viewId) // Force recreation when viewId changes
        }
        .padding()
        .debugBorder3D(showDebugLines ? .white : .clear)

        // Controls to modify the example
        .ornament(attachmentAnchor: .scene(.trailingFront), contentAlignment: .leading, ornament: {
            VStack(alignment: .center, spacing: 8) {
                Button(action: {
                    withAnimation {
                        option = .flexible
                        viewId += 1
                    }
                }, label: {
                    Text("Flexible")
                })
                Button(action: {
                    withAnimation {
                        option = .centered
                        viewId += 1
                    }
                }, label: {
                    Text("Centered")
                })
                Button(action: {
                    withAnimation {
                        option = .fixedSize
                        viewId += 1
                    }
                }, label: {
                    Text("Fixed Size")
                })

                Button(action: {
                    showDebugLines.toggle()
                }, label: {
                    Text("Debug")
                })
            }
            .padding()
            .controlSize(.small)
            .glassBackgroundEffect()

        })

    }
}

struct Example095: View {
    @State private var showDebugLines = true
    @State private var option: RealityViewLayoutOption = .flexible
    @State private var viewId = 0 // Counter to force view recreation

    var body: some View {
        VStack {
            Spacer()
            RealityView { content in
                guard let scene = try? await Entity(named: "SwiftUIScienceLab", in: realityKitContentBundle) else { return }
                content.add(scene)
            }
            .realityViewLayoutBehavior(option)
            .debugBorder3D(showDebugLines ? .green : .clear)
            .id(viewId) // Force recreation when viewId changes
        }
        .padding()
        .debugBorder3D(showDebugLines ? .white : .clear)

        // Controls to modify the example
        .ornament(attachmentAnchor: .scene(.trailingFront), contentAlignment: .leading, ornament: {
            VStack(alignment: .center, spacing: 8) {
                Button(action: {
                    withAnimation {
                        option = .flexible
                        viewId += 1
                    }
                }, label: {
                    Text("Flexible")
                })
                Button(action: {
                    withAnimation {
                        option = .centered
                        viewId += 1
                    }
                }, label: {
                    Text("Centered")
                })
                Button(action: {
                    withAnimation {
                        option = .fixedSize
                        viewId += 1
                    }
                }, label: {
                    Text("Fixed Size")
                })

                Button(action: {
                    showDebugLines.toggle()
                }, label: {
                    Text("Debug")
                })
            }
            .padding()
            .controlSize(.small)
            .glassBackgroundEffect()

        })

    }
}

Download the Xcode project with this and many more examples from Step Into Vision.
Some examples are provided as standalone Xcode projects. You can find those here.