SwiftUI Nested NavigationViews show multiple navigation bars

Question

My ContentView include a NavigationView and I drill down via NavigationLink to an OverviewView that displays a List and from there via NavigationLink to a DetailView. Now I want to tap text in my DetailView and bring up another view BUT when I now try to add a NavigationLink to that object I get an error that the NavigationLink requires to be embedded in a NavigationView, so I change my code to

    NavigationView{  
  ScrollView() {  
  VStack{  
  VStack(spacing: -25) {  
  HStack(spacing: -25) {  
  NavigationLink(destination: WarehouseOrderLinesView(warehouseOrderLines: warehouseOrderLineController.warehouseOrderLines)){  
  TaskSummaryView(title: "Total Lines", color: .blue, icon: "list.dash", value: warehouseOrderLineController.warehouseOrderLines.count)  
  }

but now since there is a NavigationView inside another NavigationView, I end up having 2 navigation bars on top.

Is there a way to use the NavigationLink without embedding it in another NaviagationView or to navigate to another view by NOT using the NavigationLink and something like .sheet (I don't want to display the new view as modal!).

Below the complete sample code for testing:


//  
//  ContentView.swift  
//  Two Navbars  
//  
//  Created by Max on 2020-02-05.  
//  Copyright © 2020 Max. All rights reserved.  
//  

import SwiftUI  

struct ContentView: View {  
  var body: some View {  
  NavigationView{  
  ScrollView{  
  VStack{  
  NavigationLink(destination: ListView1()){  
  Text("Tap me")  
  }  

  Text("Nothing here")  
  }  
  }  
  }  
  }  
}  

struct ListView1: View {  

  var body: some View {  
  List{  
  NavigationLink(destination: DetailView1()){  
  Text("Tap me one more time")  
  }  

  Text("Item 2")  
  Text("Item 3")  
  }  
  }  
}  

struct DetailView1: View {  

  var body: some View {  
  NavigationView{  
  ScrollView() {  
  VStack{  
  NavigationLink(destination: DetailView2()){  
  Text("Drill down more")  
  }  
  Text("Nothing here")  
  }  
  }  
  }  
  }  
}  

struct DetailView2: View {  

  var body: some View {  
  List {  
  Text("That's it")  
  Text("Nothing here")  
  }  
  }  
}  




struct ContentView_Previews: PreviewProvider {  
  static var previews: some View {  
  ContentView()  
  }  
}

Uttiṇṇa Chong Liang Ooi Uttiṇṇa Chong Liang Ooi · Accepted Answer · 2020-02-18T05:33:50

You only need 1 NavigationView at the root View. Remove the one in DetailView1.

struct DetailView1: View {  
    var body: some View {  
        ScrollView(){  
            VStack {  
                NavigationLink(destination: DetailView2()){  
                    Text("Drill down more")  
                }  
                Text("Nothing here")  
            }  
         }  
      }  
  }  
}

SwiftUI Nested NavigationViews show multiple navigation bars

1 Answers