HomeiOS Developmentswift - iOS 26 Liquid Glass ToolbarItem Animation Throughout Navigation

swift – iOS 26 Liquid Glass ToolbarItem Animation Throughout Navigation


Appears like this quirk animation is launched by the brand new GlassEffectTransition, at present there isn’t any approach to disable it.

In distinction, Apple’s Information App doesn’t exhibit this concern. The again button and proper toolbar merchandise don’t bear any animation.

Due to this fact, an answer is to set a relentless identifier to the toolbar merchandise to render it static.

   // Disable the quirk animation by assigning a const id to the ToolbarItem
   ToolbarItem(id: "Const ID") {
      Button(motion: { }) {
           Textual content("Carried out")
              .daring()
      }
   }

And that is the complete code:

import SwiftUI

import SwiftUI

struct ContentView: View
{
    @State personal var navigationPath: NavigationPath = NavigationPath()

    personal func onAction(
        _ textual content: String
    )
    {
        navigationPath.append(textual content)
    }

    var physique: some View
    {
        NavigationStack(path: $navigationPath)
        {
            SomeForm(
                textual content:       "Howdy World",
                onAction:   { onAction("Howdy World") }
            )
            .navigationDestination(for: String.self)
            {
                textual content in

                SomeForm(
                    textual content:       textual content,
                    onAction:   { onAction(textual content) }
                )
            }
        }
    }
}

struct SomeForm: View
{
    let textual content        : String
    let onAction    : () -> Void

    var physique: some View
    {
        Kind
        {
            Part
            {
                Button(motion: { onAction() })
                {
                    Textual content(textual content)
                }
            }
        }
        .navigationTitle("Title")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar
        {

//            ToolbarItem(placement: .topBarTrailing)
//            {
//                Button(motion: { })
//                {
//                    Textual content("Carried out")
//                        .daring()
//                }
//            }

            // Disable the quirk animation by assign a const id to the ToolbarItem
            ToolbarItem(id: "Const ID") {
                Button(motion: { })
                {
                    Textual content("Carried out")
                        .daring()
                }
            }
        }
    }
}

#Preview {
    ContentView()
}


And now we completely eliminated the quirk animation.

final working demo

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments