BUG: Broken NavigationStack when .bottomBar and back-half-swipe

Question

Created Oct ’23

Replies 1

Boosts 5

Participants 1

With NavigationStack, attaching a ToolbarItem(placement: .bottomBar) and doing a back-half-swipe gesture causes a navigation title bug.

Gif

Reproduce Code

import SwiftUI

enum NavigationDestination: Hashable {
    case secondView
}

struct ContentView: View {
    
    var body: some View {
        NavigationStack {
            FirstView()
                .navigationDestination(for: NavigationDestination.self) { value in
                    switch value {
                    case .secondView:
                        SecondView()
                    }
                }
            
        }
    }
    
}

struct FirstView: View {
    
    var body: some View {
        NavigationLink(value: NavigationDestination.secondView) {
            Text("Go Next")
        }
        .navigationTitle("First View")
        .toolbar {
            
            /*
             Navigation bar will be broken by .bottom bar when back-half-swipe.
             */
            
            // Bug reproduce .bottomBar toolbar items
            //
            ToolbarItemGroup(placement: .bottomBar) {
                Text("Done")
            }
            
            // No ploblem when .topBarTrailing
            //            ToolbarItemGroup(placement: .topBarTrailing) {
            //                Text("Done")
            //            }
        }
    }
    
}

struct SecondView: View {
    
    var body: some View {
        ZStack {
            Color.blue.frame(maxWidth: .greatestFiniteMagnitude, maxHeight: .greatestFiniteMagnitude)
            Text("This is second view.")
                .navigationTitle("Second View")
                .navigationBarTitleDisplayMode(.inline)
        }
        
    }
    
}

Feedback Report Number

FB13284524

Boost

Answer 1

syatyo OP

Oct ’23

My Workaround

func bottomBarAlternative<V>(@ViewBuilder _ content:  () -> V) -> some View where V : View {
    
    self.safeAreaInset(edge: .bottom) {
        HStack {
            content()
        }
        .labelStyle(.iconOnly)
        .imageScale(.large)
        .padding()
        .frame(maxHeight: 50)
        .background(Material.ultraThinMaterial)
        .overlay {
            VStack(spacing: 0) {
                Divider()
                Spacer()
            }
        }
        .accessibilityElement(children: .contain)
        .accessibilityLabel("Toolbar")
    }
    
}

0