In iOS 26, the ToolbarItem
animates during navigation which creates a disorienting effect. Is it possible to disable this without using system-wide settings like Reduced Motion?
You can run the code below to reproduce the behavior. The Done
button is the item in question.
import SwiftUI
@main
struct NavBarTestApp: App
{
var body: some Scene
{
WindowGroup
{
ContentView()
}
}
}
struct ContentView: View
{
@State private var navigationPath: NavigationPath = NavigationPath()
private func onAction(
_ text: String
)
{
navigationPath.append(text)
}
var body: some View
{
NavigationStack(path: $navigationPath)
{
SomeForm(
text: "Hello World",
onAction: { onAction("Hello World") }
)
.navigationDestination(for: String.self)
{
text in
SomeForm(
text: text,
onAction: { onAction(text) }
)
}
}
}
}
struct SomeForm: View
{
let text : String
let onAction : () -> Void
var body: some View
{
Form
{
Section
{
Button(action: { onAction() })
{
Text(text)
}
}
}
.navigationTitle("Title")
.navigationBarTitleDisplayMode(.inline)
.toolbar
{
ToolbarItem(placement: .topBarTrailing)
{
Button(action: { })
{
Text("Done")
.bold()
}
}
}
}
}
Looks like this quirk animation is introduced by the new GlassEffectTransition, currently there is no way to disable it.
In contrast, Apple's Files App does not exhibit this issue. The back button and right toolbar item do not undergo any animation.
Therefore, a solution is to set a constant identifier to the toolbar item to render it static
.
// Disable the quirk animation by assigning a const id to the ToolbarItem
ToolbarItem(id: "Const ID") {
Button(action: { }) {
Text("Done")
.bold()
}
}
And this is the full code:
import SwiftUI
import SwiftUI
struct ContentView: View
{
@State private var navigationPath: NavigationPath = NavigationPath()
private func onAction(
_ text: String
)
{
navigationPath.append(text)
}
var body: some View
{
NavigationStack(path: $navigationPath)
{
SomeForm(
text: "Hello World",
onAction: { onAction("Hello World") }
)
.navigationDestination(for: String.self)
{
text in
SomeForm(
text: text,
onAction: { onAction(text) }
)
}
}
}
}
struct SomeForm: View
{
let text : String
let onAction : () -> Void
var body: some View
{
Form
{
Section
{
Button(action: { onAction() })
{
Text(text)
}
}
}
.navigationTitle("Title")
.navigationBarTitleDisplayMode(.inline)
.toolbar
{
// ToolbarItem(placement: .topBarTrailing)
// {
// Button(action: { })
// {
// Text("Done")
// .bold()
// }
// }
// Disable the quirk animation by assign a const id to the ToolbarItem
ToolbarItem(id: "Const ID") {
Button(action: { })
{
Text("Done")
.bold()
}
}
}
}
}
#Preview {
ContentView()
}
And now we totally removed the quirk animation.