Why does the `Binding<Bool>` in XUIView does not see the updated value?

Why does the Binding<Bool> in XUIView does not see the updated value?

I have a SwiftUI XView which wraps an XUIView. In the XUIView I have a Binding<Bool>, which is initialised with the @Binding... of the XView. In the XUIView I have a UIButton with which I toggle the customFlag using the "Binding" property in XUIView. That propagates nicely into the SwiftUI View, as the Text updates properly. However, the UIButton's title is not updated properly. The XUIView._update method does not "see" the new value.

What am I missing here?

Do I have to assign the customFlag in the updateUIView method to make that work?

Sample code with some print calls to see what's going on:

import SwiftUI

struct UIKitBindingView: View {
    @State private var customFlag: Bool = false
    var body: some View {
        VStack {
            Text("customFlag: \(customFlag ? "ON" : "OFF")")
            XView(customFlag: $customFlag)
                .frame(width: 200, height: 100)
        }
    }
}

struct UIKitBindingView_Previews: PreviewProvider {
    static var previews: some View {
        UIKitBindingView()
    }
}

struct XView: UIViewRepresentable {
    typealias UIViewType = XUIView
    typealias Context = UIViewRepresentableContext<XView>
    @Binding var customFlag: Bool
    
    init(customFlag: Binding<Bool>) {
        self._customFlag = customFlag
    }

    func makeUIView(context: Context) -> XUIView {
        Swift.print("XView: \(#function)")
        let v = XUIView(frame: .zero, customFlag: $customFlag)
        return v
    }

    func updateUIView(_ uiView: XUIView, context: Context) {
        Swift.print("XView: \(#function)")
        // uiView.customFlag = $customFlag
        Swift.print("XView: \(#function): customFlag: \(customFlag) \n--\($customFlag)")
        uiView._update()
    }
}

class XUIView: UIView {
    weak var button: UIButton?
    var customFlag: Binding<Bool>
    
    init(frame: CGRect, customFlag: Binding<Bool>) {
        self.customFlag = customFlag
        super.init(frame: frame)
        Swift.print("XUIView: \(#function)")
        _configure()
    }
    
    required init?(coder: NSCoder) {
        self.customFlag = Binding(get: { true }, set: { v, t in })
        super.init(coder: coder)
        Swift.print("XUIView: \(#function)")
        _configure()
    }
    
    deinit {
        Swift.print("XUIView: \(#function)")
    }
    
    func _update() {
        Swift.print("XUIView: \(#function): \(customFlag.wrappedValue)\n--\(customFlag)")
        button?.setTitle("BUTTON:" + (customFlag.wrappedValue ? "ON" : "OFF"), for: .normal)
    }
    
    private func _configure() {
        backgroundColor = .yellow
        let b = UIButton()
        button = b
        self.addSubview(b)
        b.translatesAutoresizingMaskIntoConstraints = false
        let cons = [
            self.centerXAnchor.constraint(equalTo: b.centerXAnchor),
            self.centerYAnchor.constraint(equalTo: b.centerYAnchor),
        ]
        NSLayoutConstraint.activate(cons)
        b.setTitleColor(.systemBlue, for: .normal)
        b.addAction(UIAction(handler: { action in
            Swift.print("XUIView: \(#function): button action ***")
            self.customFlag.wrappedValue.toggle()
        }), for: .touchUpInside)
        _update()
    }
}

Console output after tapping the button:

XUIView: __preview___configure(): button action ***
XView: __preview__updateUIView(_:context:)
XView: __preview__updateUIView(_:context:): customFlag: true 
--Binding<Bool>(transaction: SwiftUI.Transaction(plist: []), location: SwiftUI.LocationBox<SwiftUI.Binding<Swift.Bool>.(unknown context at $10594f2e0).ScopedLocation>, _value: true)
XUIView: __preview___update(): false
--Binding<Bool>(transaction: SwiftUI.Transaction(plist: []), location: SwiftUI.LocationBox<SwiftUI.Binding<Swift.Bool>.(unknown context at $10594f2e0).ScopedLocation>, _value: false)

Binding<Bool> as a literal isn’t a documented used of Binding.

Binding should be used as an @Binding property wrapper.

https://developer.apple.com/documentation/swiftui/binding

It is also important to note that Binding conforms to DynamicProperty therefore it should only be used in a View or a struct that also conforms to DynamicProperty.

> The view gives values to these properties prior to recomputing the view’s body.

You can communicate from SwiftUI to UIKit using updateUIView and from UIKit to SwiftUI using completion handlers, a shared source of truth, a delegate, etc.

Instead of calling the _update() of the XUIView (remove that method), make the update directly in the updateUIView(_ uiView: XUIView, context: Context):

func updateUIView(_ uiView: XUIView, context: Context) {
        uiView.button?.setTitle("BUTTON:" + ($customFlag.wrappedValue ? "ON" : "OFF"), for: .normal)
}

You forgot to update the UIView with the new binding value, e.g.

func updateUIView(_ uiView: XUIView, context: Context) {
    ...
    uiView.customFlag = _customFlag
    ...
}

Note it is a little bit lazy to just pass the binding along. It would be better to set your own closure. Binding is basically a pair of get and set closures, but your coordinator is only interested in a set closure, so could just create a didChangeCustomFlag and pass a closure that sets the representable's binding. See Fruta's PaymentButton.swift for an example of this pattern.

I think the issue is the Binding type was used improperly, the BindingBool> in the XUIView was unable to see the changed value. You need to change the XUIView when initializing the custom flag you need to declare it as 'self.$_customFlag'.

func makeUIView(context: Context) -> XUIView {
        Swift.print("XView: \(#function)")
        let v = XUIView(frame: .zero, customFlag: self.$customFlag)
        return v
}

also in the updateUIView function, you can remove the comment line for updating the binding variable.

uiView.customFlag = $customFlag