@Binding for child communication in iOS Swift - Mini App: Build & Ship

Build: Toggle Switch Screen

A screen with a toggle switch controlled by a child view using @Binding to communicate changes back to the parent.

Target UI

---------------------
| Toggle Switch App |
|-------------------|
| Parent View       |
|  Switch is OFF    |
|                   |
| [ToggleSwitchView]|
|                   |
---------------------

Create a parent view with a text label showing ON or OFF based on a Boolean state.

Create a child view with a Toggle switch that uses @Binding to update the parent's state.

When the toggle is switched, the parent's label updates immediately.

Use SwiftUI and @Binding property wrapper for communication.

Starter Code

iOS Swift

import SwiftUI

struct ParentView: View {
    @State private var isOn = false

    var body: some View {
        VStack(spacing: 20) {
            Text(isOn ? "Switch is ON" : "Switch is OFF")
                .font(.title)

            // TODO: Add child ToggleSwitchView here
        }
        .padding()
    }
}

struct ToggleSwitchView: View {
    // TODO: Add @Binding property here

    var body: some View {
        // TODO: Add Toggle switch here
        Text("Toggle goes here")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ParentView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct ParentView: View {
    @State private var isOn = false

    var body: some View {
        VStack(spacing: 20) {
            Text(isOn ? "Switch is ON" : "Switch is OFF")
                .font(.title)

            ToggleSwitchView(isOn: $isOn)
        }
        .padding()
    }
}

struct ToggleSwitchView: View {
    @Binding var isOn: Bool

    var body: some View {
        Toggle("Toggle Switch", isOn: $isOn)
            .toggleStyle(SwitchToggleStyle(tint: .blue))
            .accessibilityLabel("Toggle switch")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ParentView()
    }
}

We use @State in the parent to hold the Boolean value isOn. The child view ToggleSwitchView declares a @Binding variable to receive a reference to this state. This allows the child to update the parent's state directly.

In the parent, we pass $isOn (the binding) to the child. The child uses this binding in the Toggle control, so when the user flips the switch, the parent's isOn updates immediately. The parent's text label reflects this change in real time.

This pattern is common in SwiftUI to let child views communicate changes back to their parents simply and reactively.

Final Result

Completed Screen

---------------------
| Toggle Switch App |
|-------------------|
| Parent View       |
|  Switch is ON     |
|                   |
| [ToggleSwitchView]|
|   [ ON / OFF ]    |
---------------------

User taps the toggle switch in the child view.

The switch changes state from OFF to ON or ON to OFF.

The parent's text label updates immediately to show the current state.

Stretch Goal

Add a text label in the child view that shows "Switch is ON" or "Switch is OFF" synchronized with the toggle.

💡 Hint

Use the same @Binding variable in the child to conditionally show the text next to the toggle.

Practice

1. What is the main purpose of using @Binding in SwiftUI child views?

easy

A. To prevent child views from accessing any parent data

B. To allow child views to read and modify a parent's state directly

C. To pass data only from child to parent without updates

D. To create a new independent state inside the child view

Solution

1. Step 1: Understand @Binding role

   @Binding creates a two-way connection allowing child views to read and write to a parent's state.

2. Step 2: Compare with other options

   Other options describe independent state or one-way data flow, which @Binding does not do.

3. Final Answer:

   To allow child views to read and modify a parent's state directly -> Option B

4. Quick Check:

   @Binding = two-way parent-child state link [OK]

Hint: Remember @Binding syncs child state with parent state [OK]

Common Mistakes:

• Confusing @Binding with @State creating independent state
• Thinking @Binding only passes data one-way
• Assuming @Binding prevents child from modifying data

2. Which of the following is the correct way to pass a binding from a parent to a child view in SwiftUI?

easy

A. ChildView($binding: $parentState)

B. ChildView(binding: parentState)

C. ChildView($binding: parentState)

D. ChildView(binding: $parentState)

Solution

1. Step 1: Identify correct binding syntax

   In SwiftUI, to pass a binding, use the $ prefix on the parent's @State variable.

2. Step 2: Validate options

   ChildView(binding: $parentState) correctly uses $parentState to pass a binding; others misuse $ or omit it.

3. Final Answer:

   ChildView(binding: $parentState) -> Option D

4. Quick Check:

   Use $ to pass binding from parent [OK]

Hint: Pass bindings with $ prefix before parent state [OK]

Common Mistakes:

• Forgetting the $ prefix when passing binding
• Using $ incorrectly in parameter name
• Passing state value instead of binding

3. Given this code snippet, what will be the output when the button is tapped?

struct ParentView: View {
  @State private var count = 0
  var body: some View {
    VStack {
      Text("Count: \(count)")
      ChildView(count: $count)
    }
  }
}

struct ChildView: View {
  @Binding var count: Int
  var body: some View {
    Button("Increment") {
      count += 1
    }
  }
}

medium

A. The app crashes due to missing @State in ChildView

B. The count text never changes after tapping the button

C. The count text updates and shows incremented value each tap

D. The button does not respond to taps

Solution

1. Step 1: Understand @Binding effect

   The ChildView uses @Binding to modify the parent's count state directly.

2. Step 2: Predict UI update

   When the button increments count, the parent's Text updates to show the new value.

3. Final Answer:

   The count text updates and shows incremented value each tap -> Option C

4. Quick Check:

   @Binding syncs changes to parent state [OK]

Hint: Child @Binding changes update parent UI automatically [OK]

Common Mistakes:

• Thinking @Binding requires @State in child too
• Assuming UI won't update without explicit refresh
• Confusing @Binding with simple value passing

4. Identify the error in this SwiftUI code using @Binding:

struct ParentView: View {
  @State private var text = "Hello"
  var body: some View {
    ChildView(text: text)
  }
}

struct ChildView: View {
  @Binding var text: String
  var body: some View {
    TextField("Enter", text: $text)
  }
}

medium

A. Parent passes text without $ prefix, so binding is missing

B. ChildView should use @State instead of @Binding

C. TextField cannot bind to @Binding variables

D. No error, code works correctly

Solution

1. Step 1: Check how binding is passed

   Parent passes text instead of $text, so ChildView receives a value, not a binding.

2. Step 2: Understand @Binding requirement

   ChildView expects a binding, so missing $ causes a type mismatch error.

3. Final Answer:

   Parent passes text without $ prefix, so binding is missing -> Option A

4. Quick Check:

   Pass binding with $ to match @Binding [OK]

Hint: Always use $ when passing @State to @Binding parameter [OK]

Common Mistakes:

• Omitting $ when passing binding
• Confusing @State and @Binding roles
• Assuming TextField works without binding

5. You want a child view to toggle a Boolean value in the parent and also perform a side effect when toggled. Which approach correctly uses @Binding and triggers the side effect in the parent?

struct ParentView: View {
  @State private var isOn = false

  var body: some View {
    ChildView(isOn: $isOn)
      .onChange(of: isOn) { newValue in
        print("Toggled to \(newValue)")
      }
  }
}

struct ChildView: View {
  @Binding var isOn: Bool

  var body: some View {
    Toggle("Switch", isOn: $isOn)
  }
}

hard

A. This code correctly uses @Binding and triggers side effect on toggle

B. Side effect won't trigger because onChange must be inside ChildView

C. Toggle should not use $isOn, just isOn without $

D. Parent must pass isOn without $ to ChildView

Solution

1. Step 1: Verify @Binding usage

   Parent passes binding with $isOn, ChildView uses @Binding and Toggle binds to $isOn correctly.

2. Step 2: Check side effect trigger

   Parent uses .onChange(of: isOn) to run code when isOn changes, which works as expected.

3. Final Answer:

   This code correctly uses @Binding and triggers side effect on toggle -> Option A

4. Quick Check:

   @Binding + onChange in parent = correct pattern [OK]

Hint: Use onChange in parent to react to @Binding changes [OK]

Common Mistakes:

• Placing onChange inside child instead of parent
• Passing state without $ causing binding errors
• Using Toggle without binding variable