Reverse animation for NavigationLink?

Question

I am currently trying to implement a back button in my app. I have some Views linked through NavigationLinks and I'm using the default animation. I am pretty sure the default is .easeIn but tbh I can't really tell the difference between them. I tried making it .easeOut bc I assumed it would go the opposite way but it doesn't. I want my back button to essentially have the reverse direction of the normal animation to move forward in the app, but I can't seem to find a good answer in the documentation. Is there a good way to just reverse the default animation so it looks like it's going backwards?

Answer 1

I have mimicked the NavigationLink behaviour in one of my apps, because I needed more control on the behaviours and UI elements.

Basically, I have given a transition to the List view and an opposite transition to the detail view. If you add some "chevron" system images and place the buttons in the right position, a good eye can catch the trick, but I think it works pretty good for the average user.

Here is the code, check out the .transition() in each view (just remember to use withAnimation() when changing the state):

struct Example: View {
    @State private var detail: String? = nil
    
    let details = ["First", "Second", "Third"]
    
    var body: some View {
        VStack {
            
            if detail == nil {
                List(details, id: \.self) { item in
                    Text("Tap to see the detail \(item)")
                        .onTapGesture {
                            withAnimation {
                                self.detail = item
                            }
                        }
                }
                .transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)))
            } else {
                VStack {
                    Button {
                        withAnimation {
                            detail = nil
                        }
                    } label: {
                        Text("Back")
                    }
                    Text("Now you see only \(detail ?? "not found")")
                        .padding()
                }
                .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading)))
            }
        }
    }
}