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.

Practice

1. What is the main purpose of using GeometryReader in SwiftUI layouts?

easy

A. To add animations to views

B. To create fixed-size views that never change

C. To handle user input events

D. To get the size and position of the container to create adaptive layouts

Solution

1. Step 1: Understand GeometryReader role

   GeometryReader provides the size and position of its container view.

2. Step 2: Use size for adaptive layouts

   This size info helps adjust child views to fit different screen sizes.

3. Final Answer:

   To get the size and position of the container to create adaptive layouts -> Option D

4. Quick Check:

   GeometryReader = adaptive layout helper [OK]

Hint: GeometryReader gives container size for flexible layouts [OK]

Common Mistakes:

• Thinking GeometryReader fixes view size
• Confusing GeometryReader with animation tools
• Using GeometryReader for user input handling

2. Which of the following is the correct syntax to access the width of the container inside a GeometryReader closure?

easy

A. geometry.frame.width

B. geometry.width

C. geometry.size.width

D. geometry.container.width

Solution

1. Step 1: Recall GeometryReader parameter

   The closure parameter is usually named geometry and has a size property.

2. Step 2: Access width correctly

   The width is accessed as geometry.size.width, not geometry.width or others.

3. Final Answer:

   geometry.size.width -> Option C

4. Quick Check:

   Width = geometry.size.width [OK]

Hint: Use geometry.size.width to get container width [OK]

Common Mistakes:

• Using geometry.width instead of geometry.size.width
• Trying geometry.frame.width which doesn't exist
• Using geometry.container.width which is invalid

3. Given this SwiftUI code snippet, what will be the width of the red rectangle when the screen width is 300 points?

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

medium

A. 300 points

B. 150 points

C. 100 points

D. 75 points

Solution

1. Step 1: Identify container width

   The screen width is given as 300 points, so geometry.size.width = 300.

2. Step 2: Calculate rectangle width

   The frame width is geometry.size.width / 2 = 300 / 2 = 150 points.

3. Final Answer:

   150 points -> Option B

4. Quick Check:

   300 / 2 = 150 [OK]

Hint: Divide geometry.size.width by 2 for half width [OK]

Common Mistakes:

• Using full width instead of half
• Confusing height with width
• Ignoring geometry.size and using fixed numbers

4. What is wrong with this SwiftUI code using GeometryReader?

GeometryReader { geometry in
  Text("Hello")
    .frame(width: geometry.width, height: 50)
}

medium

A. geometry.width is invalid; should use geometry.size.width

B. Text cannot be inside GeometryReader

C. frame height must be dynamic, not fixed

D. Missing .background modifier

Solution

1. Step 1: Check geometry property usage

   The code uses geometry.width, but GeometryProxy has no width property directly.

2. Step 2: Correct property to use

   The correct property is geometry.size.width to get container width.

3. Final Answer:

   geometry.width is invalid; should use geometry.size.width -> Option A

4. Quick Check:

   Use geometry.size.width, not geometry.width [OK]

Hint: Always use geometry.size.width, not geometry.width [OK]

Common Mistakes:

• Using geometry.width instead of geometry.size.width
• Thinking Text can't be inside GeometryReader
• Believing frame height must be dynamic

5. You want a square view that always fills half the screen width and keeps its height equal to its width using GeometryReader. Which code snippet correctly achieves this?

hard

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

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

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

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

Solution

1. Step 1: Determine width for half screen

   Use geometry.size.width / 2 for width to fill half the screen width.

2. Step 2: Set height equal to width

   Height must match width to keep the view square, so height = geometry.size.width / 2.

3. Final Answer:

   Rectangle with width and height both geometry.size.width / 2 -> Option A

4. Quick Check:

   Square size = half screen width [OK]

Hint: Set width and height equal using geometry.size.width / 2 [OK]

Common Mistakes:

• Mixing width and height from different geometry properties
• Using height from geometry.size.height which varies by device height
• Setting unequal width and height causing non-square shape