Custom TabBars fate

What is the best practice to migrate from custom TabBar (with action button in the middle , in example)? This decision were driven by Design team and had a lot of controversy. But yet it's implemented.

Answered by JKStudios in 906430022

Hi, @lanserxt!

As a fellow developer, I can understand the stress that this change may cause, but to be honest I'm sure it will in the end help us achieve a better result as the OS continues to evolve to help our apps better evolve with it.

Addressing the question of having the action button in the middle, consider in your TabView using the following:

Tab("Name", systemImage: "symbol", role: .prominent) {
    // Content
}

Or, if you use a custom label:

Tab("Name", image: "image", role: .prominent) {
    // Content
}

The result will look something like this:

The button on the right instead of the center may be a little change for your users to get used to, but I would say it is the best option.

I hope this helps!

Accepted Answer

Hi, @lanserxt!

As a fellow developer, I can understand the stress that this change may cause, but to be honest I'm sure it will in the end help us achieve a better result as the OS continues to evolve to help our apps better evolve with it.

Addressing the question of having the action button in the middle, consider in your TabView using the following:

Tab("Name", systemImage: "symbol", role: .prominent) {
    // Content
}

Or, if you use a custom label:

Tab("Name", image: "image", role: .prominent) {
    // Content
}

The result will look something like this:

The button on the right instead of the center may be a little change for your users to get used to, but I would say it is the best option.

I hope this helps!

Thank you! I'm pushing to make such change. And we have no control over tint/background of .prominent TabBarItem?

Unfortunately, after trying several methods, I don't think that the behavior is supported. That would be nice though, but at the moment I don't think it's possible.

The only workaround I see is by wrapping each of your Tab's content in a ZStack that ignores safe areas and then putting a colored circle behind the tab like so:

First, create a TabTint view:

struct TabTint: View {
    var body: some View {
        VStack {
            Spacer()
            HStack {
                Spacer()
                Circle()
                    .frame(width: 60)
                    .aspectRatio(CGSize(width: 1, height: 1), contentMode: .fill)
                    .foregroundStyle(.blue)
            }
        }
        .padding(.bottom, -60)
        .padding(.trailing, 22)
    }
}

Then, in each of your tabs:

Tab("Tab", systemImage: "symbol") {
    ZStack {
        TabContent() // Or whatever function you use for the tab
        TabTint()
    }
}

One important thing, though: the padding and size of the TabTint will need to be different on iPhone Duo.

This might look somewhat odd, but right now it seems to be the only option. I suggest you use either the Apple Feedback website or app to submit a this as a feature request.

Again, I hope this helps!

Custom TabBars fate
 
 
Q