Crash when conditionally rendering .tabViewBottomAccessory with TabView(selection:) in SwiftUI on iOS 26

Question

sinanjasar OP

Created 4d

Replies 3

Boosts 0

Participants 2

Summary

When using .tabViewBottomAccessory in SwiftUI and conditionally rendering it based on the selected tab, the app crashes with a NSInternalInconsistencyException related to _bottomAccessory.displayStyle.

Steps to Reproduce

Create a SwiftUI TabView using a @SceneStorage selectedTab binding.
Render a .tabViewBottomAccessory with conditional visibility tied to selectedTab == .storage.
Switch between tabs.
Return to the tab that conditionally shows the accessory (e.g., “Storage”).

Expected Behavior

SwiftUI should correctly add, remove, or show/hide the bottom accessory view without crashing.

Actual Behavior

The app crashes with the following error:

Environment

iOS version: iOS 26 seed 2 (23A5276f)
Xcode: 26
Swift: 6.2
Device: iPhone 12 Pro

I have opened a bug report with the FB number: FB18479195

Code Sample

import SwiftUI

struct ContentView: View {
    
    enum TabContent: String {
        case storage
        case recipe
        case profile
        case addItem
    }
    
    @SceneStorage("selectedTab") private var selectedTab: TabContent = .storage
    
    var body: some View {
        TabView(selection: $selectedTab) {
            Tab(
                "Storage", systemImage: "refrigerator", value: TabContent.storage
            ) {
                StorageView()
            }
            Tab(
                "Cook", systemImage: "frying.pan", value: TabContent.recipe
            ) {
                RecipeView()
            }
            Tab(
                "Profile", systemImage: "person", value: TabContent.profile
            ) {
                ProfileView()
            }
        }
        .tabBarMinimizeBehavior(.onScrollDown)
        .tabViewBottomAccessory {
            if selectedTab == .storage {
                Button(action: {
                }) {
                    Label("Add Item", systemImage: "plus")
                }
            }
        }
    }
}

Boost

Answer 1

khimeister OP

4d

I ran into the same issue and found two solutions:

Use a switch statement to exhaust the conditions for TabContent. This unfortunately results in the tabViewBottomAccessory always showing in every tab though, and as an empty accessory, which is not ideal.
Create an extension to View that you can use to modify the conditions of that view:

extension View {
    @ViewBuilder
    func `if`<Content: View>(_ condition: Bool, transform: (Self) -> Content) -> some View {
        if condition {
            transform(self)
        } else {
            self
        }
    }
}

Then you can use it as follows:

TabView(selection: $selectedTab) {
    ...
}
.if(selectedTab == .storage) { this in
    this.tabViewBottomAccessory {
        Button {
            // Action
        } label: {
            Label("Add Item", systemImage: "plus")
        }
    }
}

1

Answer 2

sinanjasar OP

3d

Thanks, your solution worked :-)

It might not be the intended use of .tabViewBottomAccessory, but it looks and feels great in this context

0

Answer 3

sinanjasar OP

3d

Do you know if there's a way to adjust the width of the button when it's in the expanded state (or just style it in general)? I can't seem to make it work.

0