CODEWITHSUNDEEP
iosswiftswiftuiswiftui-toolbar
Robin Bork
Robin Bork

Reputation: 327

Toolbar jumping in place when view appears

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.

Before the jump

After the jump

Upvotes: 5

Views: 1314

Answers (1)

Mojtaba Hosseini
Mojtaba Hosseini

Reputation: 120002

  1. 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)
  1. 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

Upvotes: 3

Related Questions