NavigationItem in nested NavigationStack is below NavigationBar - ios

Question

I'm making an app where you create acronyms and their meaning with SwiftUI
The flow of the app consists of having a List of Acronym, when tapping on any element it takes you to the detailView for that particular acronym, and there you can tap on an edit button which should take you to the next screen to edit the available fields
However when creating the detailView, and adding my edit button as a NavigationItem it is being placed below the NavigationBar
AcronymsView
import SwiftUI
struct AcronymsView: View {
#State var isShowingDetailView = false
let acronyms = [
Acronym(short: "OMG", long: "Oh My God", userID: UUID()),
Acronym(short: "OMG 2", long: "Oh My God 2", userID: UUID()),
Acronym(short: "OMG 3", long: "Oh My God 3", userID: UUID())
]
let user = User(name: "User", username: "Username")
var body: some View {
NavigationStack {
List(acronyms) { acronym in
NavigationLink(value: acronym) {
AcronymsListCell(acronym: acronym)
}
}
.navigationDestination(for: Acronym.self) { acronym in
AcronymDetailView(acronym: acronym, user: user, categories: [])
}
.listStyle(.plain)
.toolbar {
Label("", systemImage: "plus")
}
.toolbarBackground(.visible, for: .navigationBar)
.navigationTitle("Acronyms")
.navigationBarTitleDisplayMode(.inline)
}
}
}
AcronymDetailView
import SwiftUI
struct AcronymDetailView: View {
#State var isEditing = false
#State var acronym: Acronym
#State var user: User
#State var categories: [Category]
var body: some View {
NavigationView {
Form {
Section("Acronym") {
TextField("Acronym", text: $acronym.short)
}
Section("Meaning") {
TextField("Meaning", text: $acronym.long)
}
Section("User") {
TextField("User", text: $user.name)
}
Section("Categories") {
VStack {
ForEach(categories, id: \.id) {
Text($0.name)
}
}
}
Section {
Button("Add to category") {
print("Wololo")
}
.buttonStyle(.plain)
}
}
.navigationTitle(acronym.short)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Text("Edit")
}
}
}
}
}
Acronym
import Foundation
final class Acronym: Codable, Identifiable {
var id: UUID?
var short: String
var long: String
var user: AcronymUser
init(short: String, long: String, userID: UUID) {
self.id = UUID()
self.short = short
self.long = long
let user = AcronymUser(id: userID)
self.user = user
}
}
extension Acronym: Hashable {
public func hash(into hasher: inout Hasher) {
return hasher.combine(id)
}
static func == (lhs: Acronym, rhs: Acronym) -> Bool {
lhs.id == rhs.id && lhs.short == rhs.short && lhs.long == rhs.long && lhs.user == rhs.user
}
}
final class AcronymUser: Codable, Identifiable {
var id: UUID
init(id: UUID) {
self.id = id
}
}
extension AcronymUser: Hashable {
public func hash(into hasher: inout Hasher) {
return hasher.combine(id)
}
static func == (lhs: AcronymUser, rhs: AcronymUser) -> Bool {
lhs.id == rhs.id
}
}
User
import Foundation
final class User: Codable {
var id: UUID?
var name: String
var username: String
init(name: String, username: String) {
self.name = name
self.username = username
}
}
Something funny (odd) that happens when I modify NavigationView to NavigationStack in AcronymDetailView is that it moves to the detailView when I tap on a List element, but then it goes back immediately and then I can see this error in the console:
A NavigationLink is presenting a value of type “Acronym” but there is no matching navigationDestination declaration visible from the location of the link. The link cannot be activated.
I'm not sure if it's related, but I thought it was worth mentioning it here just in case, and if you look closely to the gif, it looks like the button is in the right place

Answer 1

After a bit of trial and error and thinking of this logically, I don't really need another NavigationStack inside my AcronymDetailView
Also I replaced:
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Text("Edit")
}
}
For
.toolbar {
NavigationLink {
AcronymEditView()
} label: {
Text("Edit")
}
}
This way the code looks like this now:
import SwiftUI
struct AcronymDetailView: View {
#State var isEditing = false
#State var acronym: Acronym
#State var user: User
#State var categories: [Category]
var body: some View {
Form {
Section("Acronym") {
TextField("Acronym", text: $acronym.short)
}
Section("Meaning") {
TextField("Meaning", text: $acronym.long)
}
Section("User") {
TextField("User", text: $user.name)
}
Section("Categories") {
VStack {
ForEach(categories, id: \.id) {
Text($0.name)
}
}
}
Section {
Button("Add to category") {
print("Wololo")
}
.buttonStyle(.plain)
}
}
.navigationTitle(acronym.short)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
NavigationLink {
AcronymEditView()
} label: {
Text("Edit")
}
}
}
}
And now, everything works as it should