tabViewBottomAccessory inline functionality missing?

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.

Answered by DTS Engineer in 846810022

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)")
        }
    }
}

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)")
        }
    }
}

tabViewBottomAccessory inline functionality missing?
 
 
Q