- Jul 26, 2025
Enhancing Tab Bars in iOS 26 with SwiftUI's tabViewBottomAccessory
- DevTechie Inc
With the release of iOS 26, the SwiftUI team has introduced several enhancements to TabView. One standout addition is the tabViewBottomAccessory modifier, which allows you to place a custom view just above the tab bar on iPhones.
This modifier shines when paired with the TabView’s automatic minimization behavior. As the tab bar slides down, the accessory view gracefully fills the space, creating a seamless visual transition.
Let’s explore this feature with a code example.
In our example, we’ll create a TabView containing two tabs: Home and Search.
The Home view will simply display a list of integers.
struct HomeView: View {
var body: some View {
NavigationStack {
VStack {
List(0...50, id: \.self) { idx in
Text("Item \(idx)")
}
.listStyle(.plain)
}
.navigationTitle("Home")
}
}
}SearchView is a simple VStack with Image and Text
struct SearchView: View {
var body: some View {
NavigationStack {
VStack {
Image(systemName: "magnifyingglass")
.font(.largeTitle)
.foregroundColor(.accentColor)
Text("Search DevTechie courses")
.font(.title)
}
.navigationTitle("DevTechie Search")
}
}
}For the accessory view, we’ll design a simple UI that mimics a mini audio player. This compact player will sit just above the tab bar, demonstrating how the tabViewBottomAccessory modifier can enhance the app’s interface.
struct MiniPlayerView: View {
var body: some View {
HStack(spacing: 15) {
Image(systemName: "music.note.list")
.font(.title2)
.foregroundStyle(.secondary)
.frame(width: 48, height: 48)
.background(Color(.systemGray5))
.clipShape(RoundedRectangle(cornerRadius: 8))
VStack(alignment: .leading) {
Text("Song Title")
.font(.headline)
.fontWeight(.semibold)
Text("Artist Name")
.font(.subheadline)
.foregroundStyle(.secondary)
}
Spacer()
HStack(spacing: 20) {
Button(action: { }) {
Image(systemName: "play.fill")
.font(.title2)
.foregroundStyle(.primary)
}
Button(action: { }) {
Image(systemName: "forward.fill")
.font(.title2)
.foregroundStyle(.primary)
}
}
}
}
}We’ll bring everything together inside the ContentView. We integrate the tabViewBottomAccessory modifier with tabBarMinimizeBehavior to transition the mini audio player. For a deeper dive into how tabBarMinimizeBehaviormodifier works check out our detailed guide here: Exploring SwiftUI’s New Tab Bar Minimization in iOS 26.
struct ContentView: View {
@State private var selectedTab = 0
var body: some View {
TabView(selection: $selectedTab) {
Tab("Home", systemImage: "house", value: selectedTab) {
HomeView()
.tag(0)
}
Tab("Search", systemImage: "magnifyingglass", value: selectedTab) {
SearchView()
.tag(1)
}
}
.tabBarMinimizeBehavior(.onScrollDown)
.tabViewBottomAccessory {
MiniPlayerView()
.padding()
}
}
}