How to transition from one immersive space to another – Part One

Building on what we have learned about scene phase, we can transition from one space to another.

The problem: in visionOS at least one app scene (WindowGroup or ImmersiveSpace) must be open. However, when an ImmersiveSpace is open, we can’t open another one. If you try to do this, you will run into the Purple Line of Oops.

Unable to present another Immersive Space when one is already requested or connected

We can work around this by using our main window as a scene launcher, along with the scene phase state that we captured in the app model.

Add Model: The immersiveSpaceActive computed property will return true if any of our spaces are open. Remember, each space will toggle its own related value from the view code.

class AppModel {
    var mainWindowOpen: Bool = false
    var gardenMixedOpen: Bool = false
    var gardenProgressiveOpen: Bool = false
    var gardenFullOpen: Bool = false

    var progressiveGarden: ImmersionStyle = .progressive(
        0.2...0.8,
        initialAmount: 0.4
    )

    /// This willl return true if any one of our immersice spaces are open
    var immersiveSpaceActive: Bool {
        return gardenMixedOpen || gardenProgressiveOpen || gardenFullOpen
    }
}

class AppModel {
    var mainWindowOpen: Bool = false
    var gardenMixedOpen: Bool = false
    var gardenProgressiveOpen: Bool = false
    var gardenFullOpen: Bool = false

    var progressiveGarden: ImmersionStyle = .progressive(
        0.2...0.8,
        initialAmount: 0.4
    )

    /// This willl return true if any one of our immersice spaces are open
    var immersiveSpaceActive: Bool {
        return gardenMixedOpen || gardenProgressiveOpen || gardenFullOpen
    }
}

Then we can update the button that toggles these spaces. If any space is open, we dismiss it before attempting to open the next one.

struct ImmersiveSpaceButton: View {
    let isOpen: Bool
    let spaceID: String
    let label: String

    @Environment(AppModel.self) private var appModel
    @Environment(\.dismissImmersiveSpace) private var dismissImmersiveSpace
    @Environment(\.openImmersiveSpace) private var openImmersiveSpace

    var body: some View {
        Button(action: {
            Task {
                if appModel.immersiveSpaceActive {
                    await dismissImmersiveSpace()
                }
                if !isOpen {
                    await openImmersiveSpace(id: spaceID)
                }
            }
        }, label: {
            Text(isOpen ? "Close \(label) Space" : "Open \(label) Space")
        })
    }
}

struct ImmersiveSpaceButton: View {
    let isOpen: Bool
    let spaceID: String
    let label: String

    @Environment(AppModel.self) private var appModel
    @Environment(\.dismissImmersiveSpace) private var dismissImmersiveSpace
    @Environment(\.openImmersiveSpace) private var openImmersiveSpace

    var body: some View {
        Button(action: {
            Task {
                if appModel.immersiveSpaceActive {
                    await dismissImmersiveSpace()
                }
                if !isOpen {
                    await openImmersiveSpace(id: spaceID)
                }
            }
        }, label: {
            Text(isOpen ? "Close \(label) Space" : "Open \(label) Space")
        })
    }
}

Video demo

This works because our buttons are in the main window. If they were clicked, the main window must still be open. What if we don’t have a window open through? We’ll explore that in another post.

Sample code is available in Garden14 in the Step Into Example Projects repo.

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.