SwiftUI’s @Environment is a powerful tool that allows you to share data (with an observable object) between multiple views. 

It is particularly useful when you have a complex view hierarchy and need to share the same observable object between views that are not directly connected.

Concepts

You could pass your observable object through view initializers, from parent to child to child to child, etc. This can be a lot of work.

Using environment objects allows you attach an object (instance of an observable object) to a parent view. 

Any descendants (child views, sub views) of that parent view now have access to that object.

(This is a page from the book “SwiftUI Essentials: Architecting Scalable & Maintainable Apps”)

1. Create Your Observable Object

To use Environment, you first need to create an Observable class that has the @Observable attribute. 

This class will hold the data that you want to share between your views.

@Observable
class DeveloperOO {
    var name: String = "Awesome developer"
}

2. Add Object to the Environment

Next, you need to create an instance of this class and pass it to your top-level view using the .environment(_:) modifier.

var body: some View {
    ContentView()
        .environment(DeveloperOO())
}

In this example, all subviews within ContentView can access the DeveloperOO observable object.

Container View Example

Another common example is to add an observable object to a container view, such as a NavigationStack or TabView so any descendant views can access it.

(This is a page from the book “SwiftUI Essentials: Architecting Scalable & Maintainable Apps”)

3. Access the Object in the Environment

Now, any view in your hierarchy can access this object by declaring an @Environment property.

struct DetailView: View {
    @Environment(DeveloperOO.self) var devInfo

    var body: some View {
        Text("Hello, \(nameInfo.name)!")
    }
}

That’s it!

Note: The type (DeveloperOO.self) is what makes this all work. 

As long as the type is the same, your view will find the matching object in the environment.

Child View Example

In a previous example, an observable object was added to the TabView’s environment.

This is how one of the tab views can access that observable object:

(This is a page from the book “SwiftUI Essentials: Architecting Scalable & Maintainable Apps”)

You can now access and modify the shared data from any view in your hierarchy. 

Warning: EnvironmentObject and NavigationStack

Imagine this view hierarchy:

1. View 1 has a NavigationStack with a NavigationLink to View 2

2. View 2 has a NavigationLink to View 3

3. View 3

View 1 and View 3 both use the same observable object.

Here is View 1:

struct View1: View {
    @State var oo = DeveloperOO()
    
    var body: some View {
        NavigationStack {
            NavigationLink("Navigate to View 2") {
                View2()
            }
            .navigationTitle("Parent View")
        }
    }
}

Question: Where do you set the .environment modifier?

You might think you add it to View2 so it can be passed on to View3:

NavigationLink("Navigate to View 2") {
    View2()
        .environment(oo)
}

❌ This is incorrect!

The observable object would just be in View2's environment which does not include View3. So View3 will not be able to access it.

Put Environment Object on the NavigationStack

✅ The correct solution would be to put the environment object on the navigation stack.

struct View1: View {
    @State var oo = DeveloperOO()
    
    var body: some View {
        NavigationStack {
            NavigationLink("Navigate to View 2") {
                View2()
                    .environment(oo) // ❌
            }
            .navigationTitle("Parent View")
        }
        .environment(oo) // ✅
        .font(.largeTitle)
    }
}

All views you navigate to within a navigation stack are considered within the navigation stack's view hierarchy.

Now, every view within the navigation stack can potentially access the observable object through the environment if needed.

Previews

To preview a view that uses the @Environment, you will have to add the .environment(_:) modifier to the previewed view like this:

#Preview("Child View") {
    TabViewOne()
        .environment(DeveloperInfo())
}

• Use the environment modifier to add the observable to the view or else you will get a preview error.

• The parent view doesn't need this because it is the view that sets the environment object.

Conclusion

The @Environment property wrapper is a powerful tool for sharing data between different views in your SwiftUI application. 

By passing an object down the view hierarchy using the environment(_:) modifier, you can access it from any view without having to pass it explicitly as a parameter.

You use @Environment when:

• You want to create a global place for views to access data

• You want to create two-way bindings between the data and the UI

• You want multiple views to simultaneously get updated when one observable object is updated

Learn More

You can also learn more from my book SwiftUI Essentials: Architecting Scalable & Maintainable Apps:

Learn architecture and data in SwiftUI with "SwiftUI Essentials”.

Your Learning Path Quick Links

1. Create UI with SwiftUI Views Mastery (beginner)

2. Architect your app using SwiftUI Essentials (beginner)

3. Improve your app's UX with SwiftUI Animations Mastery (junior)

4. Save & sync your app's data with Core Data Mastery -or- SwiftData Mastery (junior) 

5. React to and manipulate data using Combine Mastery in SwiftUI (advanced)