SwiftUI BottomBar Toolbar on parent view breaks leading navigation swipe on iOS 17.0

Question

After Updating my app to iOS 17.0 I noticed some odd behavior when swiping a detail view away with a parent view that has a toolbar with a ToolbarItem(placement: .bottomBar).

As the user starts a leading swipe gesture to navigate back to the previous view the parent navigation title strangely animates to the center and the leading nav bar button disappears. If the user stops this gesture at any point before completing the swipe they will be stuck in the detail view as the leading nav button has disappeared. This only seems to be an issue if one attempts to swipe back to the parent view and not when the leading nav button is tapped.

The following is the minimum code to reproduce this issue for me. I am testing on a physical device on iOS 17.0 with Xcode Version 15.0 (15A240d).

struct ToolbarIssueView: View {

    var body: some View {
        NavigationStack {
            NavigationLink {
                Text("Detail View")
                    .navigationTitle("Detail")
            } label: {
                Text("To Detail View")
            }
            .toolbar {
                // This seems to cause strange behavior 
                ToolbarItem(placement: .bottomBar) {
                    Text("Bottom Bar Content")
                }
            }
            .navigationTitle("Main")
        }
    }
}

I understand that this bottom bar could easily be replaced with a .safeAreaInset(edges: .bottom) but I would prefer to use the more standard ToolbarItem(placement: .bottomBar).

If anyone has any fixes for this issue or know what I am missing I would love to hear it!

2.2k

Posted by

DSadler

Reply

+1. The issue applies to (placement: .status), too. The issue is present in iOS 17, but not iOS 16. In simulators in Xcode 15.0.1 (15A507), the issue is present on iPhone 14 Plus iOS 17.0.1, but not on iPhone 14 Plus iOS 16.0. The issue is also present in iOS 17 on physical devices.

—
swampert
It seems to be a clear bug. Has anyone already submitted a bug report?

—
shu_k
Reported. (FB11357055)

—
shu_k

Answer 1

Have you found a solution to the problem? I had the same problem... .

Posted by

liyu69

Still having this issue as of 11/27/2023. Has anybody found a solution to this?

—
igaboo

Add a Comment

Answer 2

Hello! Issue seems to still be relevant, and I found a quick workaround for this bug, have not yet seen any downsides. Since bug is not present while bottom toolbar is empty, you can make it seem empty while View is not presented using .onAppear and .onDisappear modifiers:

struct ToolbarIssueView: View {
    @State private var showBottomBar: Bool = false      //add state

    var body: some View {
        NavigationStack {
            NavigationLink {
                Text("Detail View")
                    .navigationTitle("Detail")
            } label: {
                Text("To Detail View")
            }
            .onAppear { showBottomBar = true }           //add onAppear
            .onDisappear { showBottomBar = false }     //add onDisappear
            .toolbar {
                // This seems to cause strange behavior 
                ToolbarItem(placement: .bottomBar) {
                    if showBottomBar {                                //wrap .bottomBar content with this "if"
                         Text("Bottom Bar Content")
                    }
                }
            }
            .navigationTitle("Main")
        }
    }
}

Posted by

domagojbu

Add a Comment

Answer 3

This is amazing!!! I ran into this issue yesterday and I've spent some hours today to isolate this weird NavigationSplitView behaviour to the presence of a ToolbarItem in the bottom bar. And now seeing your workaround being posted 4 hours earlier is mind blowing! Thanks @domagojbu, you've saved my design!

Posted by

Janne

Add a Comment

Answer 4

The issue is observed also with top toolbar. If you try to swipe upward, but you change your mind and stay at the Detail view then the top toolbar disappears, the back button also disappears and you are stuck. Thanks @domagojbu the workaround works in that case too.

struct ToolbarIssueView: View {
    var body: some View {
        NavigationStack {
            NavigationLink {
                Text("Detail View")
                    .navigationTitle("Detail")
                    .toolbar {
                        ToolbarItemGroup(placement: .navigationBarTrailing) {
                            Text("Problematic view!!!")
                        }
                    }
            } label: {
                Text("To Detail View")
            }
            .toolbar {
                // This seems to cause strange behavior
                ToolbarItem(placement: .bottomBar) {
                    if showBottomBar {
                        Text("Bottom Bar Content")
                    }
                }
            }
            .navigationTitle("Main")
        }
    }
}

Posted by

vundev

Add a Comment

Answer 5

On iOS 17.4 placing the .toolbar(.visible, for: .bottomBar) on the view which has the toolbar with the toolbar items placed as .bottomBar solved this issue where back swipe brakes navigation and also the issue with toolbar dissapearing after swipe back.

Here is pseudocode of my views with which I had both the broken navigation and dissapearing bottom toolbar issues:

NavigationSplitView {
  SidebarView
     .toolbar(.visible, for: .bottomBar) // <- solves all issues
     .toolbar { // with this toolbar I had broken navigation as described in the original question
        ToolbarItem(placement: .bottomBar) { ... }
      }
} detail: {
  DetailView
       .toolbar { // with this one I had an issue with this toolbar as so as the sidebar's toolbar dissapearing after trying to swipe left
        ToolbarItem(placement: .bottomBar) { ... }
      }
}

Posted by

yukas

Add a Comment

SwiftUI BottomBar Toolbar on parent view breaks leading navigation swipe on iOS 17.0

Replies