GeometryReader for adaptive layouts in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the size of the red square inside GeometryReader?

Given this SwiftUI code, what size will the red square have when the parent view is 300x300 points?

iOS Swift

GeometryReader { geometry in
  Color.red
    .frame(width: geometry.size.width / 2, height: geometry.size.height / 2)
}

A 150x150 points

B 300x300 points

C 75x75 points

D 100x100 points

💡 Hint

Remember geometry.size gives the full size of the parent container.

The GeometryReader provides the full size (300x300). Dividing by 2 results in 150x150 for the red square.

🧠 Conceptual

intermediate

Why use GeometryReader in SwiftUI layouts?

What is the main purpose of using GeometryReader in SwiftUI?

A To handle user input events

B To create animations easily

C To load images asynchronously

D To get the size and position of the parent view for adaptive layouts

💡 Hint

Think about how you can make views adjust to different screen sizes.

GeometryReader lets you read the size and position of the container, so you can adapt your layout accordingly.

📝 Syntax

advanced

Identify the syntax error in this GeometryReader usage

Which option contains a syntax error in using GeometryReader?

iOS Swift

GeometryReader { geometry in
  Text("Width: \(geometry.size.width)")
}

A

GeometryReader { geometry in
  Text("Width: \(geometry.size.width)")
}

B GeometryReader { geometry in Text("Width: \(geometry.size.width)") }

C GeometryReader { geometry Text("Width: \(geometry.size.width)") }

D

}
)")htdiw.ezis.yrtemoeg(\ :htdiW"(txeT  
ni yrtemoeg { redaeRyrtemoeG

💡 Hint

Check if the closure syntax is correct with 'in' keyword.

Option C is missing the 'in' keyword after the closure parameter, causing a syntax error.

❓ lifecycle

advanced

When does GeometryReader update its size information?

At what point does GeometryReader provide updated size information to its content closure?

A Whenever the parent view’s size or position changes

B Only once when the view is created

C When the user taps the view

D Only when the app launches

💡 Hint

Think about adaptive layouts reacting to screen rotations or resizing.

GeometryReader updates its geometry values whenever the parent view changes size or position, enabling dynamic layouts.

🔧 Debug

expert

Why does this GeometryReader cause layout issues?

This code causes the view to expand infinitely and crash. Why? GeometryReader { geometry in VStack { Text("Hello") Color.blue.frame(width: geometry.size.width, height: geometry.size.height) } }

iOS Swift

GeometryReader { geometry in
  VStack {
    Text("Hello")
    Color.blue.frame(width: geometry.size.width, height: geometry.size.height)
  }
}

A Because Text("Hello") is missing a frame modifier

B Because Color.blue inside VStack tries to fill all space, causing infinite size conflict

C Because GeometryReader cannot be used inside VStack

D Because the frame width and height are set to zero

💡 Hint

Think about how flexible views inside stacks behave with GeometryReader sizes.

Color.blue tries to fill the entire GeometryReader size inside a VStack, which causes the VStack to expand infinitely because it has no fixed size constraints.