iOS 16: toolbar and navigationView

Question

NSVal OP

Created Aug ’22

Replies 6

Boosts 1

Views 3.4k

Participants 8

Hi everyone,

I am experiencing an issue with Toolbar and NavigationView on iOS 16. Here are two small views to explain my bug:

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: OtherView()) {
                    Text("Link to OtherView")
                }
            }
        }
    }
}

struct OtherView: View {
    var body: some View {
        ScrollView {
            Text("ScrollView")
        }
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Text("Great Toolbar")
            }
        }
    }
}

The toolbar of OtherView is displayed but is empty:

Capture d’écran 2022-08-18 à 11.47.13.png

If I replace NavigationView with NavigationStack, it works well:

Capture d’écran 2022-08-18 à 11.48.06.png

However, I should use a NavigationView because my app is available on iOS 15. Would you know how to solve this?

Thank you, regards

Boost

Answer 1

zblebt OP

Sep ’22

I can confirm this is also problem when having the toolbar item in .principal location when the view is first in hierarchy.

Subsequent views display the title properly.

        NavigationView {
            Text("Content")
            .toolbar {
                ToolbarItem(placement: .principal) {
                    Text("Title")
                }
            }
        }

NavigationStack works as expected. Adding .navigationViewStyle(.stack) does not.

0

Answer 2

AlexLuque OP

Sep ’22

I'm not sure if it's the exact same problem but after updating to iOS 16 my Text in .principal has also disappeared, but only after the first boot. Subsequent loads are working as expected. I solved the issue by wrapping the Text view within a disabled button.

Seems like a bug to me.

0

Answer 3

zblebt OP

Sep ’22

Thanks to the above comment I experimented a bit more and I was able to fix it without using disabled button (as the button changes the opacity of the view when disabled)

The problem seems to be with the width calculation of the text - in my case specifying .frame(width: 200) on the Text in ToolbarItem renders the width properly:

        NavigationView {
            Text("Content")
            .toolbar {
                ToolbarItem(placement: .principal) {
                    Text("Title").frame(width: 200)
                }
            }
        }

1

Answer 4

howardsu OP

Oct ’22

The issue is resolved after updating to iOS 16.1.

0

Answer 5

JoseDevelaw OP

Nov ’22

I have the same problem placing a toolbarItem in TextEditor. Also need it to work on iOS 15, so I cannot use NavigationStack. Any workaround?

TextEditor(text: $text)
                    .padding(.all)
                    .padding(.vertical, -8)
                    .padding(.horizontal, -5)
                    .focused($focusedField, equals: .textArea)
                    .toolbar {
                        ToolbarItem(placement: .keyboard) {
                            HStack{
                                Spacer()
                                Button("_done") {
                                    focusedField = nil
                                }
                            }                           
                        }
                    }
                    .disabled(disabled)

0

Answer 6

mesheilah OP

Nov ’23

same problem here, I can't use .toolbar with navigation stack on simulator, but on device it works well

0