Summary
As presented in the SwiftUI WWDC video, the new tabViewBottomAccessory should allow for unique contents for .inline. This is what was presented as being used for the Apple Music miniplayer. However, the functionality seems to be either missing or unintuitive. As seen in the photos attached, not only does .inline functionality not seem to do anything, but the inline accessory also has misaligned elements that cannot be fixed by conditionally modifying the contents.
Build Target
iOS 26.0
Details
This problem recurs on physical devices, simulators, and Xcode previews.
Here is a view I've constructed for use as a tabViewBottomAccessory:
struct FitnessToolbarAccessory: View {
@Environment(\.tabViewBottomAccessoryPlacement) var placement
var body: some View {
if (placement == .inline) {
Text("hello")
} else {
HStack {
HStack {
Image(systemName: "dumbbell.fill")
VStack(alignment: .leading) {
Text("Active Workout")
Text("Push Day - Chest")
.font(.system(size: 13))
}
Spacer()
Image(systemName: "pause.fill")
}
.padding()
}
}
}
}
Here is the result, working as expected in expanded mode:
And here is the result in inline mode after minimizing the tabViewBottomAccessory:
The content of this inline accessory is clearly incorrect, as it was specified to contain a Text view containing "hello". Additionally, the contents seem to have some incorrect alignment. This occurs regardless of the contents of the accessory, even plain text.
On iOS, the bottom accessory is placed above the tab bar. If the tab bar is collapsed, the bottom accessory is displayed inline.
Give this a try
struct ContentView: View {
var body: some View {
TabView {
Tab("Home", systemImage: "house") {
DemoView(prefix: "Home")
}
Tab("Alerts", systemImage: "bell") {
DemoView(prefix: "Alerts")
}
TabSection("Categories") {
Tab("Climate", systemImage: "fan") {
DemoView(prefix: "Climate")
}
Tab("Lights", systemImage: "lightbulb") {
DemoView(prefix: "Lights")
}
}
}
.tabViewBottomAccessory { MusicPlaybackView() }
.tabBarMinimizeBehavior(.onScrollDown)
}
}
struct MusicPlaybackView: View {
@Environment(\.tabViewBottomAccessoryPlacement) var placement
var body: some View {
if placement == .inline { ControlsPlaybackView() }
else { SliderPlaybackView() }
}
}
struct ControlsPlaybackView: View {
var body: some View {
Text("Controls")
}
}
struct SliderPlaybackView: View {
@State private var progress: Double = 0.3
var body: some View {
Text("Slider")
}
}
struct DemoView: View {
let prefix: String
var body: some View {
List(0..<50, id: \.self) { i in
Text("\(prefix) Item #\(i+1)")
}
}
}