NavigationStack with custom back button.

Using a NavigationStack and manipulating the NavigationPath “too fast” compared to the animation of the screen can leed visual artifacts and invalid state.

For example, let's create simple stack and create a custom back button.

struct StepView: View {
    let value: Int
    let action: () -> Void
    var body: some View {
        VStack {
            Text("\(value)")
            Button("Next", action: action)
        }
    }
}

struct ContentView: View {
    @State var navigationPath: [Int] = []
    var body: some View {
        VStack {
            if !self.navigationPath.isEmpty {
                Button("Back customg") {
                    self.navigationPath.removeLast()
                }
            }
            Divider()

            NavigationStack(path: self.$navigationPath) {
                Text("Root")
                Button("Next") {
                    self.navigationPath.append(1)
                }

                .navigationDestination(for: Int.self) { integer in
                    StepView(value: integer) {
                        self.navigationPath.append(integer + 1)
                    }.navigationBarBackButtonHidden()
                }
            }

        }
        .padding()
    }
}

Clicking fast on the custom back button will displays some blank screens and may leed to a crash.

Is something missing the API usage ? 🤔

NavigationStack with custom back button.
 
 
Q