How to modify UIView properties for SwiftUI preview?

Question

I have a UIView with 2 labels and one variable for binding like this:

var count: String? {
    get { viewCountLabel.text }
    set {
        viewCountLabel.text = newValue
        viewsTitleLabel.text = newValue == "1" ? "View" : "Views"
    }
}

and a convenience init like:

convenience init(count: String) {
    self.init()
    self.count = count
}

This view conforms to UIViewRepresentable as the following:

extension ViewCountView: UIViewRepresentable {
    typealias UIViewType = ViewCountView

    func makeUIView(context: Context) -> UIViewType {
        UIViewType(frame: .zero)
    }

    func updateUIView(_ uiView: UIViewType, context: UIViewRepresentableContext<UIViewType>) {}
}

This works on the target as expected.

- Question: How should I pass the count to the preview in live view?

I tried to pass the count on the initializer of the preview like the following but it doesn't work. I think I should pass the count in the form of Context somehow.

struct ViewCountView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ViewCountView(count: "0")
            ViewCountView(count: "12m")
            ViewCountView(count: "41234")
    }
}

Please Note That since I need more than 1 preview, I can't write values statically inside makeUIView or updateUIView .

Answer 1

Add a binding var to your UIViewRepresentable :

@Binding var count: String

Then change updateUIView :

func updateUIView(_ uiView: UIViewType, context: UIViewRepresentableContext<UIViewType>) {
    uiView.count = count
}

Answer 2

Simple wrapper struct - Works like a native:

struct <#NameOfTheWrapperView#>: UIViewRepresentable {

    typealias TheUIView = <#AnyUIView#>
    var configuration = { (view: TheUIView) in }

    func makeUIView(context: UIViewRepresentableContext<Self>) -> TheUIView { TheUIView() }
    func updateUIView(_ uiView: TheUIView, context: UIViewRepresentableContext<Self>) {
        configuration(uiView)
    }
}

🎁 Completely customizable

ResponderTextField() {
    $0.backgroundColor = .red
    $0.tintColor = .blue
}

So $0 points to the exact type and can be edited in anyway that you could in UIKit originally.

---

Note That I made it like a gist , so you can easily copy and paste it in your code and just need to name it and define the original UIView type you need to use.