@EnvironmentObject for shared state in iOS Swift - Mini App: Build & Ship

Build: Shared Counter Screen

This screen shows a counter shared between two views using @EnvironmentObject. Both views can increment the same counter and see updates instantly.

Target UI

-------------------------
| Shared Counter Screen  |
|-----------------------|
| Count: 0              |
| [Increment in View 1] |
|                       |
| Count: 0              |
| [Increment in View 2] |
-------------------------

Create a shared counter class using ObservableObject with a published integer property.

Use @EnvironmentObject to share the counter between two child views.

Each child view shows the current count and has a button to increment it.

The main screen shows both child views stacked vertically.

Incrementing in one view updates the count in both views immediately.

Starter Code

iOS Swift

import SwiftUI

class Counter: ObservableObject {
    @Published var count = 0
}

struct SharedCounterScreen: View {
    @StateObject private var counter = Counter()

    var body: some View {
        VStack {
            // TODO: Add first child view here
            // TODO: Add second child view here
        }
        .environmentObject(counter)
        .padding()
    }
}

struct SharedCounterScreen_Previews: PreviewProvider {
    static var previews: some View {
        SharedCounterScreen()
    }
}

// TODO: Define first child view here
// TODO: Define second child view here

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

class Counter: ObservableObject {
    @Published var count = 0
}

struct SharedCounterScreen: View {
    @StateObject private var counter = Counter()

    var body: some View {
        VStack(spacing: 40) {
            CounterView1()
            CounterView2()
        }
        .environmentObject(counter)
        .padding()
    }
}

struct CounterView1: View {
    @EnvironmentObject var counter: Counter

    var body: some View {
        VStack {
            Text("Count: \(counter.count)")
                .font(.title)
            Button("Increment in View 1") {
                counter.count += 1
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

struct CounterView2: View {
    @EnvironmentObject var counter: Counter

    var body: some View {
        VStack {
            Text("Count: \(counter.count)")
                .font(.title)
            Button("Increment in View 2") {
                counter.count += 1
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

struct SharedCounterScreen_Previews: PreviewProvider {
    static var previews: some View {
        SharedCounterScreen()
    }
}

We created a Counter class that holds the shared count and marks it with @Published so views update automatically.

The main screen SharedCounterScreen creates a single Counter instance with @StateObject and passes it down using .environmentObject(counter).

Two child views CounterView1 and CounterView2 use @EnvironmentObject to access the shared counter. Each shows the current count and a button to increment it.

When either button is tapped, the shared count increases, and both views update instantly because they observe the same shared state.

Final Result

Completed Screen

-------------------------
| Shared Counter Screen  |
|-----------------------|
| Count: 0              |
| [Increment in View 1] |
|                       |
| Count: 0              |
| [Increment in View 2] |
-------------------------

Tapping 'Increment in View 1' increases the count by 1 in both views.

Tapping 'Increment in View 2' increases the count by 1 in both views.

The count number updates immediately in both views after tapping either button.

Stretch Goal

Add a reset button at the bottom that sets the count back to zero for both views.

💡 Hint

Add a button in SharedCounterScreen below the two child views that sets counter.count = 0.

Practice

1. What is the main purpose of using @EnvironmentObject in SwiftUI?

easy

A. To define the layout of a view using stacks.

B. To create a new view from scratch.

C. To handle user gestures like taps and swipes.

D. To share data easily across many views without passing it manually.

Solution

1. Step 1: Understand the role of @EnvironmentObject

   @EnvironmentObject allows views to access shared data without passing it explicitly through every view initializer.

2. Step 2: Compare with other options

   Options B, C, and D describe unrelated tasks like creating views, handling gestures, or layout, which are not the purpose of @EnvironmentObject.

3. Final Answer:

   To share data easily across many views without passing it manually. -> Option D

4. Quick Check:

   @EnvironmentObject shares data = A [OK]

Hint: Remember: @EnvironmentObject shares data across views [OK]

Common Mistakes:

• Thinking @EnvironmentObject creates views
• Confusing it with gesture handling
• Assuming it controls layout

2. Which of the following is the correct way to declare an environment object in a SwiftUI view?

easy

A. @ObservedObject var model = MyModel()

B. @StateObject var model = MyModel()

C. @EnvironmentObject var model: MyModel

D. @Published var model: MyModel

Solution

1. Step 1: Identify the correct property wrapper for environment objects

   @EnvironmentObject is used to declare a shared object injected from the environment, so the syntax is @EnvironmentObject var model: MyModel.

2. Step 2: Understand other options

   @StateObject and @ObservedObject are for local ownership, and @Published is for properties inside ObservableObject classes, not for view declarations.

3. Final Answer:

   @EnvironmentObject var model: MyModel -> Option C

4. Quick Check:

   Declare environment object with @EnvironmentObject = A [OK]

Hint: Use @EnvironmentObject var name: Type to declare shared data [OK]

Common Mistakes:

• Using @StateObject or @ObservedObject instead of @EnvironmentObject
• Trying to use @Published in views
• Forgetting the type annotation

3. Given the code below, what will be displayed when ContentView is shown?

class Counter: ObservableObject {
  @Published var count = 0
}

struct ContentView: View {
  @EnvironmentObject var counter: Counter
  var body: some View {
    Text("Count: \(counter.count)")
  }
}

// In the app entry point:
// ContentView().environmentObject(Counter())

medium

A. Runtime error due to missing environment object

B. Count: 0

C. Count: nil

D. Count: 1

Solution

1. Step 1: Understand initial state of Counter

   The Counter class starts with count = 0, and this is published to views.

2. Step 2: Check environment object injection

   The app injects Counter() into ContentView with .environmentObject(Counter()), so the view can access count.

3. Final Answer:

   Count: 0 -> Option B

4. Quick Check:

   Initial count is 0 and environment object is provided = D [OK]

Hint: Initial @Published values show as is when environment object is injected [OK]

Common Mistakes:

• Assuming count starts at 1
• Thinking environment object is missing
• Confusing with optional values

4. What is the error in the following SwiftUI code using @EnvironmentObject?

class Settings: ObservableObject {
  @Published var isDarkMode = false
}

struct SettingsView: View {
  @EnvironmentObject var settings: Settings
  var body: some View {
    Toggle("Dark Mode", isOn: $settings.isDarkMode)
  }
}

// Usage:
// SettingsView()

medium

A. Missing .environmentObject(Settings()) when creating SettingsView

B. Toggle cannot bind to @Published properties

C. Settings class must be a struct, not a class

D. Toggle label must be a Text view, not a string

Solution

1. Step 1: Identify environment object injection

   The code creates SettingsView() without injecting the Settings object using .environmentObject(Settings()). This causes a runtime crash.

2. Step 2: Verify other parts

   Toggle can bind to @Published properties via $settings.isDarkMode, Settings can be a class, and Toggle accepts string labels.

3. Final Answer:

   Missing .environmentObject(Settings()) when creating SettingsView -> Option A

4. Quick Check:

   Always inject environment objects with .environmentObject() = B [OK]

Hint: Always add .environmentObject() when using @EnvironmentObject [OK]

Common Mistakes:

• Forgetting to inject environment object
• Thinking @Published can't bind to Toggle
• Believing environment object must be a struct

5. You want to share a user profile object across multiple views using @EnvironmentObject. Which steps must you follow to correctly implement this shared state? A) Declare the profile class as ObservableObject with @Published properties. B) Create an instance of the profile and inject it using .environmentObject() at the app root. C) Use @EnvironmentObject in all views that need access to the profile. D) Pass the profile instance manually to each view initializer instead of using @EnvironmentObject.

hard

A. Only A, B, and C are needed.

B. Only B, C, and D are needed.

C. Only A and B are needed.

D. All A, B, C, and D are needed.

Solution

1. Step 1: Identify correct steps for shared state

   The profile class must conform to ObservableObject with @Published properties (A). Then create and inject it at the app root with .environmentObject() (B). Views needing access use @EnvironmentObject (C).

2. Step 2: Understand why D is incorrect

   Passing the profile manually (D) defeats the purpose of @EnvironmentObject, which avoids manual passing.

3. Final Answer:

   Only A, B, and C are needed. -> Option A

4. Quick Check:

   ObservableObject + inject + @EnvironmentObject = C [OK]

Hint: Inject once, declare ObservableObject, use @EnvironmentObject in views [OK]

Common Mistakes:

• Passing environment object manually defeats its purpose
• Forgetting to mark class ObservableObject
• Not injecting at app root