2

I've spent sometime going over questions on Stack Overflow and couldn't find an answer.

I'm trying to navigate from a List View (similar to a Sidebar) to a View that contains a TabView. However, when I move to the TabView the Navigation Title and Search bar disappears. I tried it with NavigationView rather than NavigationStack, a little better but ungainly white space. To replicate the issue here's the code:

struct TestTabView: View {
    
    @State var searchText: String = "Search"
    
    var body: some View {

        TabView{
            
            NavigationView{
                VStack {Text("Inbox") }
                .searchable(text: $searchText ,prompt: "Search")
            .navigationTitle("Inbox")
            } .tabItem {
                Image(systemName: "tray")
                Text("Inbox")
            }.tag(1)

            NavigationView{
                VStack {Text("Insights")}
                .searchable(text: $searchText ,prompt: "Search")
                .navigationTitle("Insights")
            }.tabItem {
                Image(systemName: "lightbulb")
                Text("Ideas")
            }.tag(2)

        }
    }
}
struct TestTabViewWithNavigationStack: View {
    
    @State var searchText: String = "Search"
    
    var body: some View {

        TabView{
            
            NavigationStack{
                VStack {Text("Inbox") }
                .searchable(text: $searchText ,prompt: "Search")
            .navigationTitle("Inbox")
            } .tabItem {
                Image(systemName: "tray")
                Text("Inbox")
            }.tag(1)

            NavigationStack{
                VStack {Text("Insights")}
                .searchable(text: $searchText ,prompt: "Search")
                .navigationTitle("Insights")
            }.tabItem {
                Image(systemName: "lightbulb")
                Text("Ideas")
            }.tag(2)

        }
    }
}
struct AView: View {
    var body: some View {
        
        NavigationStack{
            
            VStack (spacing: 20){
                NavigationLink(destination: TestTabView()) { Text("Using Navigation View") }
                    .navigationTitle("Hello World")
                
                NavigationLink(destination: TestTabViewWithNavigationStack()) { Text("Using Navigation Stack") }
                    .navigationTitle("Hello World")
            }
            
        }
    }
}
lorem ipsum
  • 21,175
  • 5
  • 24
  • 48
Pam
  • 121
  • 3
  • 1
    A TabView can’t be a subview of a NavigationStack, it must be at the top per the human interface guidelines. You can create a custom one if you really need this setup – lorem ipsum Apr 30 '23 at 09:08
  • Try to rethink what you want : even if it could work, how the user would know in which navigation stack he is currently ? One from top or one from tab view ? – Ptit Xav May 01 '23 at 09:46
  • Good points all. Will try to rethink k the navigation scheme – Pam May 01 '23 at 13:27

0 Answers0