@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.