Challenge - 5 Problems
Empty State Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ ui_behavior
intermediate2:00remaining
What will the UI show when the data array is empty?
Consider this SwiftUI view that shows a list or an empty state message. What will the user see if the data array is empty?
iOS Swift
struct ContentView: View {
let data: [String]
var body: some View {
if data.isEmpty {
Text("No items found.")
.foregroundColor(.gray)
.italic()
} else {
List(data, id: \.self) { item in
Text(item)
}
}
}
}Attempts:
2 left
💡 Hint
Look at the condition that checks if data.isEmpty and what it shows.
✗ Incorrect
The code checks if the data array is empty. If it is, it shows a gray italic text "No items found." Otherwise, it shows the list of items.
❓ lifecycle
intermediate2:00remaining
When should you update the empty state UI in a SwiftUI view?
You have a SwiftUI view showing a list or an empty state message. When is the best time to update the UI to reflect changes in the data source?
Attempts:
2 left
💡 Hint
Think about how SwiftUI reacts to changes in @State or @ObservedObject properties.
✗ Incorrect
SwiftUI automatically updates the UI when properties marked with @State or @ObservedObject change. This keeps the UI in sync with the data source.
🔧 Debug
advanced2:00remaining
Why does the empty state text not appear in this UIKit code?
This UIKit code tries to show a label when the data array is empty, but the label never appears. What is the cause?
iOS Swift
class ViewController: UIViewController { let data: [String] = [] let emptyLabel = UILabel() override func viewDidLoad() { super.viewDidLoad() emptyLabel.text = "No data available" emptyLabel.textColor = .gray emptyLabel.textAlignment = .center if data.isEmpty { view.addSubview(emptyLabel) } } override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() emptyLabel.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: 50) emptyLabel.center = view.center } }
Attempts:
2 left
💡 Hint
Think about view layering and if other views cover the label.
✗ Incorrect
The label is added and sized correctly, but other subviews added earlier may cover it. Without bringing the label to front or adjusting layering, it stays hidden behind other views.
advanced
2:00remaining
How to navigate from an empty state view to a data entry screen in SwiftUI?
You want to show a button on the empty state screen that navigates to a data entry view. Which code snippet correctly implements this navigation?
Attempts:
2 left
💡 Hint
NavigationLink is the standard way to navigate in SwiftUI inside a NavigationView.
✗ Incorrect
NavigationLink creates a tappable element that navigates to the destination view when tapped. It must be inside a NavigationView to work properly.
🧠 Conceptual
expert2:00remaining
Why is handling empty states important in mobile app UX?
Choose the best explanation for why empty state handling improves user experience in mobile apps.
Attempts:
2 left
💡 Hint
Think about how users feel when they see an empty screen with no explanation.
✗ Incorrect
Empty states provide helpful messages or actions that guide users, making the app feel friendly and easy to use even when no data is present.