CODEWITHSUNDEEP
iosswiftswiftui
Zack Shapiro
Zack Shapiro

Reputation: 6998

SwiftUI: Using @Binding to dismiss a modal view not working

I'm passing a @State var down a few views, using @Binding on the child views and when I ultimately set the variable to back to false, sometimes my view doesn't dismiss.

It seems like I can run articleDisplayed.toggle() but if I run an additional function above or below, it won't work.

Any idea what's going on here?

Here's my code:

struct HomeView: View {

    @EnvironmentObject var state: AppState

    @State var articleDisplayed = false

    // MARK: - Body

    var body: some View {
        NavigationView {
            ZStack {
                List {
                    ForEach(state.cards, id: \.id) { card in
                        Button(action: {
                            self.articleDisplayed = true // I set it to true here 
                            self.state.activeCard = card
                        }) {
                            HomeCell(
                                card: card,
                                publicationColor: self.state.publication.brandColor
                            )
                        }.sheet(isPresented: self.$articleDisplayed) {
                            SafariQuickTopicView(articleDisplayed: self.$articleDisplayed)
                                .environmentObject(self.state)
                                .environment(\.colorScheme, .light)
                        }
                    }
                }
            }
        }
    }
}

Then in my SafariQuickTopicView:

struct SafariQuickTopicView: View {

    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    @EnvironmentObject var state: AppState

    @Binding var articleDisplayed: Bool

    var body: some View {
        NavigationView {
            ZStack(alignment: .bottom) {
              // doesn't matter what's in here
            }
            .navigationBarItems(trailing: passButton)
        }
    }

    private var passButton: some View {
        Button(action: self.state.pass {
                DispatchQueue.main.async {
//                    self.state.removeActiveCardFromState()
                    self.articleDisplayed.toggle() // this will work but adding a second function in here prevents it from working, above or below the toggle.
                }
            }
        }) {
            Text("Pass")
        }
    }

Finally, in my AppState:

func pass(completion: () -> Void) { // need completion?
        guard let activeCard = activeCard else { return }
        if let index = cards.firstIndex(where: { $0.id == activeCard.id }) {
            activeCard.add(comment: "pass")

            rejectCurrentCard() // Does an async operation with an external API but we don't care about the result

            addRemovedActiveCardToUserDefaults()

            completion()
        }
    }

Upvotes: 1

Views: 956

Answers (1)

Asperi
Asperi

Reputation: 257523

Move .sheet out of List, it must be one per view hierarchy, so like

List {
    ForEach(state.cards, id: \.id) { card in
        Button(action: {
            self.articleDisplayed = true // I set it to true here 
            self.state.activeCard = card
        }) {
            HomeCell(
                card: card,
                publicationColor: self.state.publication.brandColor
            )
        }
    }
}
.sheet(isPresented: self.$articleDisplayed) {
            SafariQuickTopicView(articleDisplayed: self.$articleDisplayed)
                .environmentObject(self.state)
                .environment(\.colorScheme, .light)
        }

Upvotes: 4

Related Questions