Swift UI with Nested Navigation Views - swift

Question

I am new to SwiftUI and Stack Overflow as well, so any help here is appreciated. I am currently making an app that has nested Navigation Views. However, one issue I am having is that when I am using these nested Views, the Navigation Titles (ex. the back button) are lining below each other, forming a Navigation Bar that is quite tall. I looked at this link and it used a List, but I do not want my app to be in this format. I would like to use text elements that are formatted in different colors and font sizes (please see the attached screenshot), however, this thread only has this list function, not in the format I would like it. Please help me figure out how to get rid of these extra navigation bars!
Text Elements:
Nested Navigation Bar:
Here is my code:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
ZStack {
Image("img6").resizable().aspectRatio(contentMode: .fill).ignoresSafeArea()
VStack {
Text("SLED").font(.largeTitle).fontWeight(.heavy).padding().background(Color.blue).cornerRadius(10.0)
Spacer()
Text("Shelf Life Expiry Date Tracker").font(.title).fontWeight(.bold)
Spacer()
ZStack {
Image(systemName: "cloud")
.padding()
.font(.system(size: 90))
//try to fix this
//Image("logo1")
Image(systemName: "clock.fill")
.padding()
.font(.system(size: 40))
}
NavigationLink(destination: SeeTestKit()) {
Text("See Test Kit")
}.foregroundColor(Color(red: 0.0, green: 0.0, blue: 0.0))
.padding(20)
.background(Color.pink)
.cornerRadius(10.0)
//Spacer()
HStack {
Spacer()
Image(systemName: "bag")
.padding()
.font(.system(size: 40))
Spacer()
Image(systemName: "alarm.fill")
.padding()
.font(.system(size: 40))
Spacer()
Image(systemName: "calendar")
.padding()
.font(.system(size: 40))
Spacer()
}
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}```
```import SwiftUI
struct SeeTestKit: View {
var body: some View {
NavigationView {
ZStack {
Image("background2")
.resizable()
.aspectRatio(contentMode: .fill)
.ignoresSafeArea()
VStack {
Spacer()
Image("testkit")
.resizable()
.aspectRatio(contentMode: .fit)
Spacer()
Text("The test kit serves as a supplement to the SLED Tracking System.")
.font(.title)
.multilineTextAlignment(.center)
Spacer()
Text("The test kit make the observation process more efficient by not requiring you to find your own materials.")
.font(.title2)
.multilineTextAlignment(.center)
Spacer()
Text("It also serves as an alternative to \npeople who may not have access \nto the technology required for the app.").font(.title2).multilineTextAlignment(.center)
Spacer()
Group {
NavigationLink(destination: TestKitMaterials()) {
Text("Materials")
}.foregroundColor(Color(red: 0.0, green: 0.0, blue: 0.0))
.padding(20)
.background(Color.blue)
.cornerRadius(10.0)
.navigationBarTitle("Test Kit", displayMode: .inline).padding()
Spacer()
}
}
}
}
}
}
struct SeeTestKit_Previews: PreviewProvider {
static var previews: some View {
SeeTestKit()
}
}```
```import SwiftUI
struct TestKitMaterials: View {
var body: some View {
ZStack {
Image("bckgrd")
.resizable()
.aspectRatio(contentMode: .fill)
.ignoresSafeArea()
VStack {
Text("Test Kit Materials")
.font(.title)
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding(.all, 9.0)
.background(Color(red: 0.5, green: 0.6, blue: 0.9, opacity: 1.0)) .cornerRadius(10.0)
//FIX this
//Text("Safety Glasses").bold()
Spacer()
Group {
Spacer()
Text("Safety glasses were included to prevent \ncontamination or illness from \npotentially spoiled foods.")
.multilineTextAlignment(.center)
.padding(.all, 3.0)
Text("A thermometer was included to test \ntemperature of foods to test for spoilage \nat a certain temperature.")
.multilineTextAlignment(.center)
.padding()
}
Group {
Text("pH strips were used to test the pH of \nthe milk and eggs.")
.multilineTextAlignment(.center)
.padding()
Text("The flashlight and ruler are included for \nthe user to measure the width of the air\n sac of the egg in a dark room.")
.multilineTextAlignment(.center)
.padding()
}
Group {
Text("A pipette is needed to extract samples \nof the food to test certain characteristics.")
.multilineTextAlignment(.center)
.padding()
Text("The test tube provides a separate vessel \nto hold the milk to make observations.")
.multilineTextAlignment(.center)
.padding()
Text("A checklist is included as a guideline for the \nuser to measure characteristics and to\n measure spoilage in the absence of the app.")
.multilineTextAlignment(.center)
.padding()
}
Spacer()
Image(systemName: "img")
.resizable()
.aspectRatio(contentMode: .fit)
}
}
}
}
struct TestKitMaterials_Previews: PreviewProvider {
static var previews: some View {
TestKitMaterials()
}
}```
Thank you!

Answer 1

As stated earlier in the comments you need to remove a NavigationView. And almost always you'll want to remove any NavigationView on the children views.
Essentially what's happening is you are double stacking your NavViews and can cause some really funky behavior.
Read more on NavigationView