Weird UI bug when using TabView & NavigationStacks & Toolbars in TCA

[filiplazov]

Hello

I did not report this as an issue since I am still new to TCA, and I was hoping that there is some thing I am not doing correctly. So I wanted to share the issue I have and if there are no ways to solve it with the existing tools I will create a new issue / bug appropriately.
I am using both Xcode 14.3.1 (iOS16) and Xcode 15 RC (iOS17) to reproduce the issue and TCA version 1.2.0.

What I want to achieve is to have a Root view that switches on a given state (enum), and it either shows a login screen or a dashboard screen (logged in). The dashboard screen has 3 tabs (first, second, third) and each of them contains a NavigationStack and a navigation title along with a single toolbar item. I have created this in pure SwiftUI, with extremely simple code to convey what I Intend to do.

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
          RootView()
        }
    }
}

struct RootView: View {

  enum AppState {
    case logIn
    case dashboard(String)
  }

  @State var userName = ""
  @State var password = ""
  @State var appState: AppState = .logIn

  var body: some View {
    switch appState {
    case .logIn:
      VStack {
        TextField("username", text: $userName)
        TextField("password", text: $password)
        Button(action: {
          withAnimation {
            appState = .dashboard(userName)
            userName = ""
            password = ""
          }
        }, label: {
          Text("Log in")
        })
      }
      .padding(.horizontal)
      .transition(.slide)
    case let .dashboard(loggedInUser):
      TabView {
        NavigationStack {
          VStack {
            Text("Hello \(loggedInUser)")
            Button(action: {
              appState = .logIn
            }, label: {
              Text("Log out")
            })
          }
            .navigationTitle("First")
            .toolbar {
              ToolbarItem {
                Button("First") {}
              }
            }
        }
        .tabItem { Label("first", systemImage: "1.circle") }

        NavigationStack {
          Text("Second")
            .navigationTitle("Second")
            .toolbar {
              ToolbarItem {
                Button("Second") {}
              }
            }
        }
        .tabItem { Label("second", systemImage: "2.circle") }

        NavigationStack {
          Text("Third")
            .navigationTitle("Third")
            .toolbar {
              ToolbarItem {
                Button("Third") {}
              }
            }
        }
        .tabItem { Label("third", systemImage: "3.circle") }
      }
      .transition(.opacity)
    }
  }
}

I wanted to recreate the same but with TCA and I was inspired by the TicTacToe example app that comes with TCA, where the game screen is where I replaced it with the dashboard and the tabview UI. However I have noticed that the UI acts strange, as in there are no navigation titles displayed, and whenever I open a new tab a new toolbar item is added to a single navigation bar instead of each tab having its own navigation bar with a single toolbar item. Here is a gif of how it works.

And here is the code using TCA:

@main
struct TCATabBarApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView(store: Store(initialState: .logIn(Login.State()), reducer: {
        Root()
      }))
    }
  }
}

struct ContentView: View {
  let store: StoreOf<Root>

  var body: some View {
    SwitchStore(store) { state in
      switch state {
      case .logIn:
        CaseLet(/Root.State.logIn, action: Root.Action.logIn) { store in
          NavigationStack {
            LoginView(store: store)
          }
        }
        .transition(.slide)
      case .dashboard:
        CaseLet(/Root.State.dashboard, action: Root.Action.dashboard) { store in
          NavigationStack {
            DashboardView(store: store)
          }
        }
        .transition(.opacity)
      }
    }
  }
}

struct Root: Reducer {

  enum State: Equatable {
    case logIn(Login.State)
    case dashboard(Dashboard.State)
  }

  enum Action: Equatable {
    case logIn(Login.Action)
    case dashboard(Dashboard.Action)
  }

  var body: some ReducerOf<Self> {
    Reduce { state, action in
      switch action {
      case let .logIn(logInAction):
        if logInAction == .logIn {
          if case let .logIn(logInState) = state {
            state = .dashboard(Dashboard.State(username: logInState.username))
          }
        }
        return .none
      case let .dashboard(dashboardAction):
        if dashboardAction == .logOut {
          state = .logIn(Login.State())
        }
        return .none
      }
    }
    .ifCaseLet(/State.logIn, action: /Action.logIn) {
      Login()
    }
    .ifCaseLet(/State.dashboard, action: /Action.dashboard) {
      Dashboard()
    }
  }
}

struct Login: Reducer {
  struct State: Equatable {
    @BindingState var username = ""
    @BindingState var password = ""
  }

  enum Action: BindableAction, Equatable, Sendable {
    case binding(BindingAction<State>)
    case logIn
  }

  var body: some ReducerOf<Self> {
    BindingReducer()
    Reduce { state, action in
      switch action {
      case .binding:
        return .none
      case .logIn:
        return .none
      }
    }
  }
}

struct LoginView: View {
  let store: StoreOf<Login>

  var body: some View {
    WithViewStore(store, observe: { $0 }) { viewStore in
      VStack {
        TextField("username", text: viewStore.$username)
        TextField("password", text: viewStore.$password)
        Button(action: {
          viewStore.send(.logIn, animation: .linear)
        }, label: {
          Text("Log in")
        })
      }
      .padding(.horizontal)

    }
  }
}

struct Dashboard: Reducer {
  struct State: Equatable {
    var username: String
  }

  enum Action: Equatable {
    case logOut
  }

  var body: some ReducerOf<Self> {
    Reduce { state, action in
      switch action {
      case .logOut:
        return .none
      }
    }
  }
}

struct DashboardView: View {
  let store: StoreOf<Dashboard>

  var body: some View {
    WithViewStore(store, observe: { $0 }) { viewStore in
      TabView {
        NavigationStack {
          VStack {
            Text("Hello \(viewStore.username)")
            Button(action: {
              viewStore.send(.logOut, animation: .linear)
            }, label: {
              Text("Log out")
            })
          }
          .navigationTitle("First")
          .toolbar {
            ToolbarItem {
              Button("First") {}
            }
          }
        }
        .tabItem { Label("first", systemImage: "1.circle") }

        NavigationStack {
          Text("Second")
            .navigationTitle("Second")
            .toolbar {
              ToolbarItem {
                Button("Second") {}
              }
            }
        }
        .tabItem { Label("second", systemImage: "2.circle") }

        NavigationStack {
          Text("Third")
            .navigationTitle("Third")
            .toolbar {
              ToolbarItem {
                Button("Third") {}
              }
            }
        }
        .tabItem { Label("third", systemImage: "3.circle") }
      }
    }
  }
}

Am I doing something wrong? Am I not holding it right 😂 ? Or is this a legit bug?

Thank you!

[mbrandonw]

Hi @filiplazov, I don't have time to look into this deeply now, but the first thing that stands out is that in the TCA version you have the DashboardView wrapped in a navigation stack. That means you roughly have:

NavigationStack {  // ContentView
  TabView {  // DashboardView
    NavigationStack {
      …
    }
  }
}

Pretty sure that is causing at least some of the problems. Seems like you want to drop the NavigationStacks in the ContentView.

[filiplazov]

I am obviously blind (even after looking at the code many times), thank you!