How to navigate back programatically using nested navigationDestination in SwiftUI

Question

I'm trying to implement programatic nested navigation using NavigationStack and navigationDestination(isPresented:). But I can't figure out why I can't navigate back to A (button Go back to A is not working - nothing happens when I press it). Does anyone know what am I doing wrong?

struct Example: View {
    @State var aPresented: Bool = false
    @State var bPresented: Bool = false
    
    var body: some View {
        NavigationStack {
            Button("Go to A") {
                aPresented = true
            }
            .navigationDestination(isPresented: $aPresented, destination: { a })
        }
    }
    
    var a: some View {
        VStack {
            Text("A")
            Button("Go to B") {
                bPresented = true
            }
        }
        .navigationDestination(isPresented: $bPresented, destination: { b })
    }
    
    var b: some View {
        VStack {
            Text("B")
            Button("Go back to A") {
                bPresented = false
            }
        }
    }
}

You Can Do It Duffy Moon · Accepted Answer · 2024-01-15 18:31:35Z

It seems that maybe you modified the original question as it works fine for me. Although, I restructured this a bit making it easier to read.

import SwiftUI

struct Playground: View {
    @State var aPresented: Bool = false
    @State var bPresented: Bool = false
    
    var body: some View {
        NavigationStack {
            Text("I am (g)root!")
            Button("Go to A") {
                aPresented = true
            }
            .navigationDestination(isPresented: $aPresented, destination: { a })
        }
    }
    
    var a: some View {
        VStack {
            Text("I am A!")
            Button("Go to B") {
                bPresented = true
            }
            Button("Go to Root") {
                aPresented = false
            }
        }
        .navigationDestination(isPresented: $bPresented, destination: { b })
    }
    
    var b: some View {
        VStack {
            Text("I am B!")
            Button("Go back to A") {
                bPresented = false
            }
        }
    }
}

struct Playground_Previews: PreviewProvider {
    static var previews: some View {
        Playground()
    }
}

Now in the next example, I incorporated the use of NavigationLink. I find this a cleaner, better way to work the NavigationStack. You don't have to worry about setting the isPresented variables to false. It's also easy to add in a Navigation Title to the page.

import SwiftUI

struct Playground: View {
    var body: some View {
        NavigationStack {
            Text("I am (g)root!")
            NavigationLink(destination: aView) {
                Label("Goto A", systemImage: "map.fill")
            }
            .navigationTitle("Root View") //You Can Hide this if you don't want a title
        }
    }
    
    var aView: some View {
        NavigationStack {
            Text("I am A!")
            NavigationLink(destination: bView) {
                Label("Goto B", systemImage: "map.pin")
            }
            .navigationTitle("A View") //You Can Hide this if you don't want a title
        }
    }
    
    var bView: some View {
        NavigationStack {
            Text("I am B!")
        }
    }
}

struct Playground_Previews: PreviewProvider {
    static var previews: some View {
        Playground()
    }
}

For anyone having trouble understanding the NavigationStack in SwiftUI, I highly recommend reading the following: https://medium.com/@mdyamin/navigationstack-revolution-of-nested-navigation-with-swiftui-7a00782b974b

Collectives™ on Stack Overflow

How to navigate back programatically using nested navigationDestination in SwiftUI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related