matchedGeometryEffect in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when matchedGeometryEffect IDs don't match?

Consider two views using matchedGeometryEffect with different IDs. What is the visible effect during animation?

iOS Swift

struct ContentView: View {
  @State private var toggle = false
  @Namespace private var ns
  var body: some View {
    VStack {
      if toggle {
        Circle().matchedGeometryEffect(id: "circle1", in: ns)
          .frame(width: 100, height: 100)
      } else {
        Circle().matchedGeometryEffect(id: "circle2", in: ns)
          .frame(width: 50, height: 50)
      }
    }.onTapGesture { toggle.toggle() }
  }
}

A The circle fades out and a new circle fades in.

B The circle smoothly animates between sizes and positions.

C The app crashes due to mismatched IDs.

D No animation occurs; the circle abruptly changes size and position.

💡 Hint

Think about how matchedGeometryEffect links views by their IDs.

matchedGeometryEffect requires the same ID and namespace to animate smoothly between views. Different IDs mean no link, so no animation happens.

❓ lifecycle

intermediate

When is the matchedGeometryEffect animation triggered?

In SwiftUI, matchedGeometryEffect animates changes between views. Which user action triggers this animation in the example below?

iOS Swift

struct ContentView: View {
  @Namespace private var ns
  @State private var show = false
  var body: some View {
    VStack {
      if show {
        RoundedRectangle(cornerRadius: 25).matchedGeometryEffect(id: "box", in: ns)
          .frame(width: 200, height: 200)
      } else {
        RoundedRectangle(cornerRadius: 25).matchedGeometryEffect(id: "box", in: ns)
          .frame(width: 100, height: 100)
      }
      Button("Toggle") { show.toggle() }
    }
  }
}

A When the "Toggle" button is pressed and the state changes.

B When the view appears for the first time.

C When the app launches.

D When the user taps the RoundedRectangle.

💡 Hint

Look at what changes the @State variable controlling the views.

The animation happens when the "show" state toggles, causing the view to switch between two sizes linked by matchedGeometryEffect.

📝 Syntax

advanced

Identify the syntax error in matchedGeometryEffect usage

Which option contains a syntax error in using matchedGeometryEffect in SwiftUI?

A Image(systemName: "star").matchedGeometryEffect(id: "star", in: ns, properties: .frame)

B Rectangle().matchedGeometryEffect(id: "rect", in: ns, anchor: .center)

C Circle().matchedGeometryEffect(id: "circle", in: ns, isSource: true)

D Text("Hello").matchedGeometryEffect(id: "text", in: ns)

💡 Hint

Check the parameters matchedGeometryEffect accepts.

The 'properties' parameter does not exist in matchedGeometryEffect, causing a syntax error.

❓ navigation

advanced

How does matchedGeometryEffect behave across navigation links?

Given two views connected by a NavigationLink, both using matchedGeometryEffect with the same ID and namespace, what is the animation behavior when navigating?

iOS Swift

struct ListView: View {
  @Namespace var ns
  var body: some View {
    NavigationView {
      NavigationLink(destination: DetailView(ns: ns)) {
        RoundedRectangle(cornerRadius: 10).matchedGeometryEffect(id: "shape", in: ns)
          .frame(width: 50, height: 50)
      }
    }
  }
}

struct DetailView: View {
  var ns: Namespace.ID
  var body: some View {
    RoundedRectangle(cornerRadius: 10).matchedGeometryEffect(id: "shape", in: ns)
      .frame(width: 200, height: 200)
  }
}

A No animation occurs because matchedGeometryEffect does not work across NavigationLinks.

B The shape smoothly animates from small to large during navigation.

C The app crashes due to namespace sharing.

D The shape instantly changes size without animation.

💡 Hint

Think about how matchedGeometryEffect links views even across navigation.

matchedGeometryEffect can animate views between different screens if they share the same ID and namespace, enabling smooth transitions.

🔧 Debug

expert

Why does matchedGeometryEffect animation flicker unexpectedly?

A developer uses matchedGeometryEffect to animate a view between two states. Sometimes the animation flickers or jumps instead of smooth transition. What is the most likely cause?

iOS Swift

struct ContentView: View {
  @Namespace var ns
  @State var show = false
  var body: some View {
    VStack {
      if show {
        RoundedRectangle(cornerRadius: 20).matchedGeometryEffect(id: "box", in: ns)
          .frame(width: 150, height: 150)
          .transition(.opacity)
      } else {
        RoundedRectangle(cornerRadius: 20).matchedGeometryEffect(id: "box", in: ns)
          .frame(width: 100, height: 100)
          .transition(.opacity)
      }
      Button("Toggle") { show.toggle() }
    }
  }
}

A The matchedGeometryEffect IDs are different between views.

B The namespace variable is not marked @Namespace, causing animation failure.

C Using .transition(.opacity) causes the view to fade out and in, breaking the geometry animation.

D The RoundedRectangle shapes have different cornerRadius values.

💡 Hint

Consider how transitions interact with matchedGeometryEffect animations.

Applying .transition(.opacity) causes the view to fade out and fade in separately, interrupting the smooth geometry animation and causing flicker.