Push many views into NavigationView

Question

Created Oct ’20

Replies 1

Boosts 0

Views 2.3k

Participants 1

Hi,

I want to present four view one after the other.
The user should be able to move between views by clicking on a NavigationLink inside the navigation bar.
Below you can find the sample code.
Unfortunately I struggle to get it to work properly.

When the user tap on "To second" the second view is correctly pushed into the navigation stack.
But when the user press on "To third" or "To fourth" something strange happens.
There is no transition animation and the back button is not updated.
If the user tries to return to the previous view by pressing the back button it will be sent to the first view.

There is something I'm doing wrong?

Here is the code:

Code Block struct FirstView: View {
    var body: some View {
        NavigationView {
            Text("First view\n\nIf you press on \"To second\" the second view is correctly presented.")
                .navigationBarTitle(Text("First view"), displayMode: .inline)
                .navigationBarItems(trailing:
                    NavigationLink("To second", destination: SecondView())
                )
        }
    }
}
struct SecondView: View {
    var body: some View {
        Text("Second view\n\nIf you press on \"To third\" the view is presented without animation.")
            .navigationBarTitle(Text("Second view"), displayMode: .inline)
            .navigationBarItems(trailing:
                NavigationLink("To third", destination: ThirdView())
            )
    }
}
struct ThirdView: View {
    var body: some View {
        Text("Third view\n\nIf you press on \"To fourth\" the view is presented without animation.\n\nThe back button is not updated and if you press on it you are not redirected to \"Second view\" but to \"First view\".")
            .navigationBarTitle(Text("Third view"), displayMode: .inline)
            .navigationBarItems(trailing:
                NavigationLink("To fourth", destination: FourthView())
            )
    }
}
struct FourthView: View {
    var body: some View {
        Text("Fourth view\n\nThe back button is not updated and if you press on it you are not redirected to \"Third view\" but to \"First view\".")
            .navigationBarTitle(Text("Fourth view"), displayMode: .inline)
    }
}

Answered by DaleOne in 642287022

Seems that this issue is only present when using a NavigationLink inside a navigation bar.
If we use a NavigationLink that's inside the body then everything work correctly.

In my case I need to have the button inside the navigation bar so I created an hidden NavigationLink in the body which will be activated by a button located in the navigation bar.

This works:

Code Block struct FirstView: View {
    var body: some View {
        NavigationView {
            Text("First view")
                .navigationBarTitle(Text("First view"), displayMode: .inline)
                .navigationBarItems(trailing:
                    NavigationLink("To second", destination: SecondView())
                )
        }
    }
}
struct SecondView: View {
    @State var isNavigationLinkActive = false
    var body: some View {
        VStack {
            Text("Second view")
            NavigationLink("To third", destination: ThirdView(), isActive: $isNavigationLinkActive)
                .hidden()
        }
        .navigationBarTitle(Text("Second view"), displayMode: .inline)
        .navigationBarItems(trailing:
            Button("To third", action: {
                isNavigationLinkActive = true
            })
        )
    }
}
struct ThirdView: View {
    @State var isNavigationLinkActive = false
    var body: some View {
        VStack {
            Text("Third view")
            NavigationLink("To fourth", destination: FourthView(), isActive: $isNavigationLinkActive)
                .hidden()
        }
        .navigationBarTitle(Text("Third view"), displayMode: .inline)
        .navigationBarItems(trailing:
            Button("To fourth", action: {
                isNavigationLinkActive = true
            })
        )
    }
}
struct FourthView: View {
    var body: some View {
        Text("Fourth view")
            .navigationBarTitle(Text("Fourth view"), displayMode: .inline)
    }
}

Boost

Answer 1

DaleOne OP

Oct ’20

Accepted Answer

Seems that this issue is only present when using a NavigationLink inside a navigation bar.
If we use a NavigationLink that's inside the body then everything work correctly.

In my case I need to have the button inside the navigation bar so I created an hidden NavigationLink in the body which will be activated by a button located in the navigation bar.

This works:

Code Block struct FirstView: View {
    var body: some View {
        NavigationView {
            Text("First view")
                .navigationBarTitle(Text("First view"), displayMode: .inline)
                .navigationBarItems(trailing:
                    NavigationLink("To second", destination: SecondView())
                )
        }
    }
}
struct SecondView: View {
    @State var isNavigationLinkActive = false
    var body: some View {
        VStack {
            Text("Second view")
            NavigationLink("To third", destination: ThirdView(), isActive: $isNavigationLinkActive)
                .hidden()
        }
        .navigationBarTitle(Text("Second view"), displayMode: .inline)
        .navigationBarItems(trailing:
            Button("To third", action: {
                isNavigationLinkActive = true
            })
        )
    }
}
struct ThirdView: View {
    @State var isNavigationLinkActive = false
    var body: some View {
        VStack {
            Text("Third view")
            NavigationLink("To fourth", destination: FourthView(), isActive: $isNavigationLinkActive)
                .hidden()
        }
        .navigationBarTitle(Text("Third view"), displayMode: .inline)
        .navigationBarItems(trailing:
            Button("To fourth", action: {
                isNavigationLinkActive = true
            })
        )
    }
}
struct FourthView: View {
    var body: some View {
        Text("Fourth view")
            .navigationBarTitle(Text("Fourth view"), displayMode: .inline)
    }
}

0