Navigation with StackState: Replace an element in StackState by index while maintaining default slide animation

[jessedoescode]

Hi!

I'm looking to achieve this navigation flow:

From root view A, push an element B into StackState. From B, I push C into StackState, but from C I would like to have view dismissal lead back to A.

I've been playing around with different RangeReplaceableCollection methods, such as:

state.path.replaceSubrange(0 ... 0, with: [.foobar])

This works in achieving the desired navigation flow, where C goes back A as B gets replaced, but loses the default NavigationStack slide animation. If I use modifier .animation(.default, value: viewStore.path) I can use transitions, but I would like to have the default one.

Any way to achieve this? Thanks!

[mbrandonw]

Hi @jessedoescode, I believe the reason you are losing animation is because you are creating a whole new stack element for the path, which has a new underlying stack element ID. Have you tried other ways to remove all but the first element without reconstructing the first element?

Something like this:

state.path.removeLast(state.path.count - 1)

?

[jessedoescode]

Thanks @mbrandonw !

I was indeed over-complicating things a bit.

My thinking was that how can I make B disappear from the stack at the same time as I'm adding C. But indeed, when adding C I can do only state.path.append(.c), and if I then want C's dismissal to go to A instead of B, I can do state.path.removeLast(2) on dismissal to dismiss both C and also B. The downside of this, as far as I can tell, is that I have to override the SwiftUI default top-left back arrow dismiss behaviour.

I guess that's why my original thinking was that instead of just appending C to arrive at [A, B, C] I would try to replace B with C to arrive at [A, C]. Now the default SwiftUI dismissal would take me back to A, as desired. But I just can't get the animation to work with this.

The state.path.removeLast(state.path.count - 1) works as a workaround, though. Appreciate it!

[mbrandonw]

You can definitely do the remove+append trick to transition from [A, B] to [A, C], and I would actually expect that to animate automatically. However, if it isn't for some reason (can you provide a minimal repro?), then have you tried sending the action that causes the remove+append with animation? Like this:

store.send(…, animation: .default)

Does that help the navigation stack to animate?