L04.28-ReRecord-2.md

Lesson 4.28 - Re-record 2 (06:08 - 08:24)

Video to re-record: Lesson 4.28

--- [START RE-RECORD 06:08 - 08:24] ---

06:08 (Voiceover addressing the preview errors and explaining the @Previewable fix) "Franklin here. Immediately, you're going to get some errors inside your previews. This happens because, by adding these properties to PointsView, you now need to pass in those values when creating an instance of it inside the preview macro. Because PointsView requires bindings to state variables to function correctly, you can fix these errors by using the new @Previewable macro right before your @State properties. This allows your state variables to function perfectly inside the preview block."

(Voiceover continues alongside on-screen code progression)

From:

#Preview {
  PointsView()
}

#Preview("Dark Mode", traits: .landscapeRight) {
  PointsView()
    .preferredColorScheme(.dark)
}

To:

#Preview {
  @Previewable @State var alertIsVisible = true
  @Previewable @State var game = Game()
  PointsView(alertIsVisible: $alertIsVisible, sliderValue: .constant(50.0), game: $game)
}

#Preview("Dark Mode", traits: .landscapeRight) {
  @Previewable @State var alertIsVisible = true
  @Previewable @State var game = Game()
  PointsView(alertIsVisible: $alertIsVisible, sliderValue: .constant(50.0), game: $game)
    .preferredColorScheme(.dark)
}

07:15 (Voiceover) "By passing in the matching bindings for each parameter, the errors in PointsView disappear. However, notice that the preview isn't going to build just yet because there's another place causing an error—and that's in ContentView. Hop over to ContentView and let the Fix-It add those parameter slots in for you. Pass in the matching binding for each one: alertIsVisible, sliderValue, and game."

07:58 (Voiceover) "And that's working! Go back to your PointsView and restart the previews with Option-Command-P. Your PointsView is back to working perfectly, now successfully taking in those additional values."

--- [END RE-RECORD] ---