How to replace tabBar with bottomBar with smooth animation in SwiftUI?

Question

Created Jul ’24

Replies 6

Boosts 3

Participants 5

I am trying to replace the navigation tab bar with a custom bottom toolbar when a view enters edit mode. Currently, I am using the following code to achieve this:

content    
    .toolbar(isEditing ? .hidden : .visible, for: .tabBar)
.    toolbar(isEditing ? .visible : .hidden, for: .bottomBar)

However, this results in a janky animation. When the bottom bar appears, it animates in above (in contrast to in place of) the tab bar, then "jumps" back down to the correct offset without animation. I had to workaround this by delaying the appearance of bottom bar by 0.3s. I am already using withAnimation().

Is this a bug or am I using the APIs incorrectly? Is there a more seamless way to achieve this switching effect other than delaying the bottom bar? Thanks!

Answered by DTS Engineer in 794633022

@NSCruiser Here's an example of how to go about it:

struct ContentView: View {
    @State private var isEditing = false

    var body: some View {
        NavigationStack {
            TabView {
                Tab("Received", systemImage: "tray.and.arrow.down.fill") {
                    Button("toogle") {
                        isEditing.toggle()
                    }
                    .toolbar(isEditing ? .hidden : .visible, for: .tabBar)
                }
                .badge(2)
                
                Tab("Sent", systemImage: "tray.and.arrow.up.fill") {
                    Color.blue
                }
                
                Tab("Account", systemImage: "person.crop.circle.fill") {
                    Color.green
                }
                .badge("!")
            }
            .toolbar(isEditing ? .visible : .hidden, for: .bottomBar)
            .animation(.easeIn, value: isEditing)
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    Text("hello world")
                }
            }
        }
    }
}

Boost

Answer 1

DTS Engineer OP

Apple

Jul ’24

Recommended

@NSCruiser Here's an example of how to go about it:

struct ContentView: View {
    @State private var isEditing = false

    var body: some View {
        NavigationStack {
            TabView {
                Tab("Received", systemImage: "tray.and.arrow.down.fill") {
                    Button("toogle") {
                        isEditing.toggle()
                    }
                    .toolbar(isEditing ? .hidden : .visible, for: .tabBar)
                }
                .badge(2)
                
                Tab("Sent", systemImage: "tray.and.arrow.up.fill") {
                    Color.blue
                }
                
                Tab("Account", systemImage: "person.crop.circle.fill") {
                    Color.green
                }
                .badge("!")
            }
            .toolbar(isEditing ? .visible : .hidden, for: .bottomBar)
            .animation(.easeIn, value: isEditing)
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    Text("hello world")
                }
            }
        }
    }
}

0

Answer 2

NSCruiser OP

Jul ’24

@DTS Engineer Thank you for the example. In my app, TabView is the root view, and NavigationStack is nested within each Tab. I changed the provided example to match the structure of my app, and found that the animation issue was still present. Is this expected behavior?

struct ContentView: View {
    @State private var isEditing = false

    var body: some View {
        TabView {
            Tab("Received", systemImage: "tray.and.arrow.down.fill") {
                NavigationStack {
                    Button("toogle") {
                        isEditing.toggle()
                    }
                    .toolbar(isEditing ? .hidden : .visible, for: .tabBar)
                    .toolbar(isEditing ? .visible : .hidden, for: .bottomBar)
                    .animation(.easeIn, value: isEditing)
                    .toolbar {
                        ToolbarItem(placement: .bottomBar) {
                            Text("hello world")
                        }
                    }
                }
            }
            .badge(2)
            
            Tab("Sent", systemImage: "tray.and.arrow.up.fill") {
                Color.blue
            }
            
            Tab("Account", systemImage: "person.crop.circle.fill") {
                Color.green
            }
            .badge("!")
        }
    }
}

0

Answer 3

NSCruiser OP

Jul ’24

I have submitted FB14464408.

0

Answer 4

vg0x01 OP

Oct ’24

After going down a 5am rabbit hole it’s a shame this still isn’t working

0

Answer 5

felixaa OP

Apr ’25

Is there any updates on this? Did you guys find a solution? I'm also neck deep in a rabbit hole currently

0

Answer 6

felixaa OP

Apr ’25

It seems like it has something to do with safe area insets in the interim/temporary state in-between the tabbar being fully hidden - and the bottom bar being fully visible. In the interim state the safe area insets are gone, but back again as one of them have appeared fully.

0