Navigation with pop and push animations

[alinless]

Hi,
I want to implement a simple navigation feature in my app. Specifically, I want to pop the second view and push the third view when the user taps a button on the second view.
Is it possible to achieve this using tree-based navigation? Or is it only possible with a stack-based approach?

FirstFeature action

         case .destination(.presented(.second(.delegate(.thirdRequested)))):
            state.destination = .third(.init())
            return .none

FirstView

      NavigationStack {
         ZStack {
            Color.green

            WithViewStore(self.store, observe: { $0 }) { viewStore in
               VStack {
                  Text("FirstView")
                  
                  Button.init {
                     viewStore.send(.showSecond)
                  } label: {
                     Text("To second view")
                  }
                  
               }
            }
         }
         .navigationDestination(
            store: self.store.scope(state: \.$destination, action: { .destination($0) }),
            state: /FirstFeature.Destination.State.second,
            action: FirstFeature.Destination.Action.second,
            destination: SecondView.init(store:)
         )
         .navigationDestination(
            store: self.store.scope(state: \.$destination, action: { .destination($0) }),
            state: /FirstFeature.Destination.State.third,
            action: FirstFeature.Destination.Action.third,
            destination: ThirdView.init(store:)
         )
      }

video.mp4

[mbrandonw]

Hi @alinless, based on your little code snippet I think the app is actually behaving correctly. The problem is that when you mutate the destination to point from second to third, you are technically popping the second view off the navigation since that state is being cleared out. In order to preserve the second screen while also pushing the third screen, you would need to move the third screen navigation to the second screen's domain.

Or, if you really do want to coalesce all destinations at the root of the navigation view, then unfortunately you do need to use NavigationStack.

[mbrandonw]

Oh I'm sorry, I didn't read carefully enough. I now see that you specifically want to pop the second and push the third.

Yes, unfortunately navigationDestination(isPresented:) in vanilla SwiftUI cannot do that properly, and that's the API we use under the hood of navigationDestination(store:). Really it's a bug in SwiftUI and should be reported.

If you want animation for a simultaneous push+pop I think you will have to use a navigation stack.

[alinless]

I have tried this method, but the result was still the same. There was no animation. How can I make it work?

         case .showSecond:
            state.path.append(.second())
            return .none

         case let .path(.element(id: _, action: .second(.delegate(action)))):
            switch action {
            case .thirdRequested:
               state.path.popLast()
               state.path.append(.third())
            }
            return .none

      NavigationStackStore(
         self.store.scope(state: \.path, action: { .path($0) })
      ) {
            ZStack {
               Color.green
               WithViewStore(self.store, observe: { $0 }) { viewStore in
                  VStack {
                     Text("FirstView")
                     
                     Button.init {
                        viewStore.send(.showSecond)
                     } label: {
                        Text("To second view")
                     }
                     
                  }
               }
            }
         } destination: { state in
            switch state {
            case .second:
               CaseLet(
                  state: /FirstFeature.Path.State.second,
                  action: FirstFeature.Path.Action.second,
                  then: SecondView.init(store:)
               )
            case .third:
               CaseLet(
                  state: /FirstFeature.Path.State.third,
                  action: FirstFeature.Path.Action.third,
                  then: ThirdView.init(store:)
               )
            }
         }

[mbrandonw]

Can you share your project?

[mbrandonw]

Hi @alinless, I just checked in vanilla SwiftUI and apparently that is the behavior there too. I thought for some reason it would animate but that is not the case.

Here's a sample for you to test:

import SwiftUI

class Model: ObservableObject {
  @Published var numbers: [Int] = []

  func push() {
    self.numbers.append(.random(in: 1...100))
  }
  func popPush() {
    self.numbers.removeLast()
    self.numbers.append(.random(in: 1...100))
  }
}

struct ContentView: View {
  @ObservedObject var model = Model()
  var body: some View {
    NavigationStack(path: self.$model.numbers) {
      Button("Push") {
        self.model.push()
      }
      .navigationDestination(for: Int.self) { int in
        NumberView(number: int, model: self.model)
      }
    }
  }
}

struct NumberView: View {
  let number: Int
  let model: Model
  var body: some View {
    VStack {
      Text("\(self.number)")
      Button("Pop/push") {
        self.model.popPush()
      }
    }
  }
}

#Preview {
  ContentView()
}

[alinless]

Thanks

https://github.com/alinless/TestTCANavigation
Here is an example with a TCA StackState and a similar problem. In this case, the solution seems to be using a delay between pop and push (appending to a stack). It would be great if there are other options to handle it

[mbrandonw]

The library doesn't try to fix deficiencies in SwiftUI, and so because this is how vanilla SwiftUI works I don't think there is anything we can do.

[alinless]

Got it. Anyway, thank you very much!