Toolbar jumping in place when view appears

Question

I have a view with a toolbar at the bottom that I am navigating to using a NavigationLink. But when the view appears, the toolbar is shown a little too low. After half a second or so it then suddenly jumps into place. It only happens the first time after the app is started. If I go back to the first view and start the navigation again it is shown in the correct place immediately.

Here are the files to reproduce it:

ContentView:

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink {
                ToolbarView()
            } label: {
                Text("Hello, world!")
            }
        }
    }
}

ToolbarView:

struct ToolbarView: View {
    var body: some View {
        ScrollView {
            VStack {
                Text("Text1")
                Text("Text2")
            }
        }
        .toolbar {
            ToolbarItemGroup(placement: .bottomBar) {
                
                Spacer()
                
                Button {
                } label: {
                    Image(systemName: "trash")                        
                }
            }
        }
    }
}

Is this a SwiftUI bug?

Here are pictures before and after the jump. Check the trash at the bottom. If the toolbar has a color it is of course even more obvious.

It is better to see once than to hear hundred... anyway you really don't need spacebar there (at least w/o container). — Asperi, Jan 09 '22 at 20:52
@Asperi I have added pictures. You are right I don't need the space. That was because I copied the sample project from a bigger app that I am working on — Robin Bork, Jan 09 '22 at 21:34
I've seen (a variant of) this issue as well. The jumpiness was quite obvious in my case when toggling a `Toggle` in the child view: The toggle and its label text would jump up. If the bottom toolbar in the parent view was removed, the jump didn't occur in the child view. Additional note: The issue seems to occur only with the bottom toolbar placement, and none of the other placements I've tried. — nishanthshanmugham, May 27 '22 at 21:49
I know that that this is a little hacky, but if you embed your `ScrollView` into a `NavigationView`, the weird animation stops — Boga, Aug 27 '22 at 00:35

Mojtaba Hosseini · Answer 1 · 2022-08-29T08:01:27.167

You will get the worst effect on iOS 16 with your code which is not showing the toolbar at all! So first, add specify the style of the navigation using the following modifier on the navigationView:

.navigationViewStyle(.stack)

If both the first and second view does not have the same containers, you will see unexpected movements, so you can add an empty toolbar for holding the place to the navigationLink:

ToolbarItemGroup(placement: .bottomBar) { Spacer() }

The completed code would be:

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink {
                ToolbarView()
            } label: {
                Text("Hello, world!")
            }
            .toolbar {
                ToolbarItemGroup(placement: .bottomBar) { Spacer() }  // <- prevents main page jumpings
            }
        }
        .navigationViewStyle(.stack) // <- prevents detail page jumping
    }
}

Demo

Demo _{Don't worry about the RTL layout}

Toolbar jumping in place when view appears

1 Answers1

Demo