3

I want to have a toolbar with placement .bottomBar in one of my views. When navigating away and coming back however, the toolbar doesn't transition smoothly with the rest of the view - it suddenly appears, shifting the whole contents of the view up, as shown below.

Top toolbar transitions correctly, but bottom toolbar does not.

This only seems to affect toolbars at the bottom of the screen - as you can see toolbars placed at the top of the screen seem to work okay.

How can I get the bottom toolbar to transition smoothly when navigating back to the first screen?

struct ContentView: View {
  var body: some View {
    NavigationView {
      NavigationLink(
        destination: Text("Destination"),
        label: {
          Text("Navigate")
        })
      .toolbar {
        ToolbarItem(placement: .bottomBar) {
          Text("Bottom")
        }
        ToolbarItem(placement: .principal) {
          Text("Top")
        }
      }
    }
  }
}
Daniel Elkington
  • 2,560
  • 6
  • 22
  • 35

1 Answers1

1

I've been having the same problem as you, where the top toolbar is fine but the bottom toolbar flickers.

The current workaround I'm using is to create the bottom toolbar by hand, for example:

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                NavigationLink(
                    destination: Text("Destination"),
                    label: {
                        Text("Navigate")
                    })
                Spacer()
                NavigationLink(
                    destination: Text("Destination"),
                    label: {
                        ZStack {
                            Rectangle()
                                .frame(height: 90.0)
                                .foregroundColor(.gray).opacity(0.08)
                                .border(Color.gray, width: 0.2)
                            
                            Text("Bottom")
                                .foregroundColor(.black)
                        }
                    })
            }
            .edgesIgnoringSafeArea(.all)

            .toolbar {
                ToolbarItem(placement: .principal) {
                    Text("Top")
                }
            }
        }
    }
}

Demo link (not allowed to post images yet)

It's not ideal - I'd much prefer to use the Toolbar API, but this way does stop the contents shifting up.

K.F.
  • 76
  • 4