SwiftUI Toolbar… bug?

Question

Created Nov ’20

Replies 7

Boosts 0

Views 6.4k

Participants 9

Hi everyone! I recently noticed a strange behaviour with the new SwiftUI Toolbar.

I have an app with only 2 views: a ContentView and a DetailView. My goal is to have a different toolbar in both.

ContentView:

Code Block struct ContentView: View {
    @State var isFavorite = false
    var body: some View {
        NavigationView {
            VStack {
                Image(systemName: isFavorite ? "star.fill" : "star")
                NavigationLink(destination: DetailView(isFavorite: $isFavorite)) {
                    Text("Go")
                }
            }
            .navigationTitle("ContentView")
            .toolbar() {
                ToolbarItem(placement: .bottomBar) {
                    Text("This is my ContentView")
                }
            }
        }
    }
}

DetailView:

Code Block struct DetailView: View {
    @Binding var isFavorite: Bool
    var body: some View {
        Button("Tap me!") {
            isFavorite.toggle()
        }
        .navigationTitle("DetailView")
        .toolbar() {
            ToolbarItem(placement: .bottomBar) {
                Text("This is my DetailView")
            }
            ToolbarItem(placement: .navigationBarTrailing) {
                Image(systemName: isFavorite ? "star.fill" : "star")
            }
        }
    }
}

When I toggle the @Binding property in the DetailView, the toolbar is replaced by another empty toolbar appearing from nowhere.

Am I doing something wrong?

Boost

Answer 1

lkubaski OP

Nov ’20

I'm also facing the same issue: no clue how to fix this...

0

Answer 2

Tylor OP

Nov ’20

I don't know if it's a bug or just undefined behavior. It looks like it always displays a blank toolbar when isFavorite gets updated. My guess is that SwiftUI don't know which one should be on top (or it renders the ContentView toolbar, but it doesn't show the text because it doesn't exist in DetailView?). If you comment out the Image(systemName: isFavorite ? "star.fill" : "star"), the ContentView doesn't get rendered again, so it doesn't change the toolbar, but it seems that when DetailView propagates an update to ContentView is clashes over what ToolbarItem(placement: .bottomBar) to use.

I tried a couple different solutions, conditional in the ToolbarItem, making an observable object, settings views with onAppear and onDisappear, but non of them resulted in a work around for this problem.

Either it it s bug, or this type of behavior isn't supposed to happen in SwiftUI. Do you have an example of an App that is dynamically changing the toolbar based on the view in SwiftUI?

0

Answer 3

ethanb OP

Dec ’20

Has anybody solved this yet? Any help would be appreciative.

0

Answer 4

dudzik OP

Apr ’21

I resolved this problem by explicitly setting the navigationViewStyle to StackNavigationViewStyle.

Code Block var body: some View {        
    NavigationView {
        /* ... */
    }
    .navigationViewStyle(StackNavigationViewStyle())
}

5

Answer 5

snowzurfer OP

May ’22

I'm still seeing the same issue on Xcode Version 13.3.1 (13E500a)... adding the StackNavigationStyle() modifier fixed it, but it's really a hack.

Any updates about this from the devs?

0

Answer 6

sroy OP

May ’23

Such a weird bug. Still happening two years later with iOS 16.4.

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink("Go to detail view") {
                    Text("Detail view")
                        .toolbar {
                            ToolbarItem(placement: .bottomBar) {
                                Button(action: { print("tap") }) {
                                    Image(systemName: "square.and.arrow.up")
                                }
                            }
                        }
                }
            }
        }
        &#x2F;&#x2F; Without this, toolbar is either empty or doesn&#039;t appear in detail view
        .navigationViewStyle(.stack)
    }
}

0

Answer 7

lerk OP

Aug ’23

After wasting hours with this weird behavior, I've accepted that this is a perfect speciment of the "you're holding it wrong"-situation.

Let me put it this way (thinking about this a few times solved my problem):

Whatever you want to render above/below the List (which is why you need the scrollview) can also be put into a separate Segment of the list. It won't look as bad as you might initially think!

0