Navigation title flickers when tab is changed when used with a List / Form

Problem

  • When a List / Form is added inside a TabView and navigationTitle is set, then switching between tabs causes the navigation title to flicker.

Feedback:

  • FB21436493

Environment

  • Xcode: 26.2 (17C52)
  • iOS: 26.2 (23C55)
  • Reproducible on: Both simulator and device

Root cause

  • When List / Form is commented out, issue doesn't occur

Steps to Reproduce

  1. Run app on iOS
  2. Switch between tabs
  3. Notice that the navigation title flickers

Code

ContentView

import SwiftUI

struct ContentView: View {
    
    @State private var selectedTab = TabItem.red
    
    var body: some View {
        NavigationStack {
            TabView(selection: $selectedTab) {
                ForEach(TabItem.allCases, id: \.self) { tab in
                    Tab(tab.rawValue, systemImage: tab.systemImageName , value: tab) {
                        // Problem occurs with a List / Form
                        // Commenting out list works without flickering title
                        List {
                            Text(tab.rawValue)
                        }
                    }
                }
            }
            .navigationTitle(selectedTab.rawValue)
        }
    }
}

TabItem

enum TabItem: String, CaseIterable  {
    case red
    case green
    case blue
    
    var systemImageName: String {
        switch self {
        case .red:
            "car"
        case .green:
            "leaf"
        case .blue:
            "bus"
        }
    }
}

Screen recording:

Answered by newwbee in 870493022

Summary

  • This is not a bug
  • Closed Feedback

Concept

  • TabView needs to be the outermost container.
  • NavigationStack should be in the Tab contents.

Fixed Code

struct ContentView: View {

    @State private var selectedTab = TabItem.red

    var body: some View {
        TabView(selection: $selectedTab) {
            ForEach(TabItem.allCases, id: \.self) { tab in
                Tab(tab.rawValue, systemImage: tab.systemImageName, value: tab) {
                    NavigationStack {
                        List {
                            Text(tab.rawValue)
                        }
                        .navigationTitle(selectedTab.rawValue)
                    }
                }
            }
        }
    }
}
Accepted Answer

Summary

  • This is not a bug
  • Closed Feedback

Concept

  • TabView needs to be the outermost container.
  • NavigationStack should be in the Tab contents.

Fixed Code

struct ContentView: View {

    @State private var selectedTab = TabItem.red

    var body: some View {
        TabView(selection: $selectedTab) {
            ForEach(TabItem.allCases, id: \.self) { tab in
                Tab(tab.rawValue, systemImage: tab.systemImageName, value: tab) {
                    NavigationStack {
                        List {
                            Text(tab.rawValue)
                        }
                        .navigationTitle(selectedTab.rawValue)
                    }
                }
            }
        }
    }
}
Navigation title flickers when tab is changed when used with a List / Form
 
 
Q