SwiftUI running on Simulator/Preview: Toggle not working, console logs: "invalid mode 'kCFRunLoopCommonModes'"

Question

Update: This was a red herring

So my original question asked how to make a navigation link disabled and only enabled if two Toggle affecting two @State var isXYZToggleOn Bool properties are both true. This has always been working, my first attempt using .disabled(!(hasAgreedToTermsAndConditions && hasAgreedToPrivacyPolicy)) was the correct one (also suggested by @superpuccio, but using two negatations and one boolean or (||)).

Turns I did not get my NavigationLink to be enabled because the toggling did not work, not because of incorrect usage of the booleans and disabled view modifier.

Running on device, instead of simulator made everything work! But I still see the warning message as soon as I press any Toggle (but only once):

invalid mode 'kCFRunLoopCommonModes' provided to CFRunLoopRunSpecific - break on _CFRunLoopError_RunCalledWithInvalidMode to debug. This message will only appear once per execution.

I get this error message running on simulator too, but then the NavigationLink does not get enabled ever.

I'm running Xcode 5 beta on Catalina 5 beta on a 2016 Macbook Pro. Deleting derived data, restarting Xcode, restarting my computer, resetting the simulator, changing simulator, nothing helps. I still see invalid mode 'kCFRunLoopCommonModes' when I press the first Toggle, and the NavigationLink never gets enabled.

So the new question is:

Running on simulator: how to solve invalid mode 'kCFRunLoopCommonModes' problem causing my @State bound to Toggle to never become true??

Original question

Using XCode 11 beta 5 and SwiftUI. In a WelcomeScene I have two Toggle views, one toggle for accepting Terms & Conditions and one toggle for Privacy Policy. These toggles updates two separate @State properties respectively.

In the bottom of the scene I have a NagivationLink (button) which will take to the next scene, which I would like to be disabled by default and only be enabled when both hasAgreedToTermsAndConditions and hasAgreedToPrivacyPolicy states are true.

When initiating a NavigationLink there is a isActive argument, which takes a Binding<Bool>, which sounds like the correct thing. However, @Binding properties cannot be marked lazy, thus I cannot make it a computed property being dependent on hasAgreedToTermsAndConditions and hasAgreedToPrivacyPolicy.

There is also a disabled view modifier which takes a Bool, which is also incorrect since it does not get updated...

struct WelcomeScene: View {

    @State var hasAgreedToTermsAndConditions: Bool = false
    @State var hasAgreedToPrivacyPolicy: Bool = false

    var body: some View {
        VStack {
            Image(named: "MyImage")

            Spacer()

            Text("Welcome friend!".uppercased())
                .font(.system(size: 55))

            Toggle(isOn: $hasAgreedToTermsAndConditions) {
                Text("I agree to the Terms and Conditions")
            }.toggleStyle(DefaultToggleStyle())

            Toggle(isOn: $hasAgreedToPrivacyPolicy) {
                Text("I agree to the Privacy Policy")
            }.toggleStyle(DefaultToggleStyle())

            // This does not compile 'Binding<Bool> is not convertible to Bool', but I cannot figure out how to create a compupted property binding using those 2 states...
            NavigationLink("Proceed", destination: SignInScene(), isActive: ($hasAgreedToTermsAndConditions && $hasAgreedToPrivacyPolicy))
        }.padding(30)
    }
}

How can I make a NavigationLink disabled by default and only enabled when both toggles are on?

Answer 1

I did not find any way to get a publisher from a state so it was necessary to move things into an ObservableObject. From @Published items one can access it's publisher via $hasAgreedToPrivacyPolicy, which one can use in things like Publishers.CombineLatest to combine two publisher values and based on that set other variables.

Two Navigation links are necessary because once one was active, making it inactive does not hide what is displayed in the details view. The second is basically there to show content while the terms are not accepted yet.

Note: What you show here is a split view (using NavigationLink embedded in NavigationView). You can also use .sheet (which gets controlled by isActive) or a conditional to switch between the views.

import SwiftUI
import Combine

class Settings: ObservableObject {
    @Published var hasAgreedToTermsAndConditions: Bool = false
    @Published var hasAgreedToPrivacyPolicy: Bool = false

    @Published var isActive = false
    @Published var isNotActive = true

    private var cancellable: AnyCancellable? = nil

    init() {
        self.cancellable = Publishers.CombineLatest($hasAgreedToPrivacyPolicy, $hasAgreedToTermsAndConditions).map{
            return $0.0 && $0.1
        }.sink{
            self.isActive = $0
            self.isNotActive = !$0
        }
    }
}

struct WelcomeSceneView: View {
    @ObservedObject var settings = Settings()

    var body: some View {
        NavigationView {
            VStack {
                Image(uiImage: welcomeLogo)

                Spacer()

                Text("Welcome friend!".uppercased())
                //.font(.system(size: 55))

                Toggle(isOn: $settings.hasAgreedToTermsAndConditions) {
                    Text("I agree to the Terms and Conditions")
                }.toggleStyle(DefaultToggleStyle())

                Toggle(isOn: $settings.hasAgreedToPrivacyPolicy) {
                    Text("I agree to the Privacy Policy")
                }.toggleStyle(DefaultToggleStyle())


                // This does not compile 'Binding<Bool> is not convertible to Bool', but I cannot figure out how to create a compupted property binding using those 2 states...
                Text("is active: \(settings.isActive.description)")
                NavigationLink("Can proceed", destination: SignInScene(), isActive: $settings.isActive)
                .hidden()
                NavigationLink("Can not proceed", destination: PleaseConfirmView(), isActive: $settings.isNotActive)
                .hidden()
            }.padding(30)
        }
    }

    let welcomeLogo = UIImage(systemName: "headphones")!
}

struct SignInScene: View {
    var body: some View {
        Text("Some sign in scene")
    }
}

struct PleaseConfirmView: View {
    var body: some View {
        Text("Please confirm")
    }
}

Answer 2

The main issue here is that you are misunderstanding the meaning of the NavigationLink init you are using.

/// Creates an instance that presents `destination` when active, with a
/// `Text` label generated from a title string.
public init(_ titleKey: LocalizedStringKey, destination: Destination, isActive: Binding<Bool>)

That isActive doesn't mean that the link is clickable only when that bool is true. That means that you are creating a NavigationLink that triggers the navigation both on click and when the isActive binding becomes true.

You can achieve what you want with the disabled modifier this way:

struct WelcomeScene: View {
    @State var hasAgreedToTermsAndConditions: Bool = false
    @State var hasAgreedToPrivacyPolicy: Bool = false

    var body: some View {
        NavigationView {
            VStack {

                Spacer()

                Toggle(isOn: $hasAgreedToTermsAndConditions) {
                    Text("I agree to the Terms and Conditions")
                }.toggleStyle(DefaultToggleStyle())

                Toggle(isOn: $hasAgreedToPrivacyPolicy) {
                    Text("I agree to the Privacy Policy")
                }.toggleStyle(DefaultToggleStyle())

                NavigationLink("Proceed", destination: SignInScene())
                    .disabled(!hasAgreedToTermsAndConditions || !hasAgreedToPrivacyPolicy)
            }.padding(30)
        }
    }
}