SwiftUI Slide Over Animation Like Builtin Navigation

Question

I'm experimenting with replicating SwiftUI's navigation without all the black box magic. However, I'm having trouble with the animation. No animation happens until maybe the second or third push/pop. When it does finally animate, it's hard to describe what it does. But it definitely isn't what I would expect.

I've tried various different animations but it's generally the same behavior.

struct RouterDemo: View {
    @State private var items: [Int] = Array(0..<50)
    @State private var selectedItem: Int?

    var body: some View {
        RouterStore(
            route: $selectedItem,
            state: { route in items.first(where: { $0 == route }) },
            content: { ItemsList(items: items, selectedItem: $0) },
            destination: { route, item in
                ItemDetail(item: item, selectedItem: route)
            }
        )
    }
}


public struct RouterStore<Destination, Content, Route, DestinationState>: View
where Destination: View,
      Content: View,
      Route: Hashable,
      DestinationState: Equatable {

    @Binding private var route: Route?
    private let toDestinationState: (Route) -> DestinationState?
    private let destination: (Binding<Route?>, DestinationState) -> Destination
    private let content: (Binding<Route?>) -> Content

    public init(
        route: Binding<Route?>,
        state toDestinationState: @escaping (Route) -> DestinationState?,
        @ViewBuilder content: @escaping (Binding<Route?>) -> Content,
        @ViewBuilder destination: @escaping (Binding<Route?>, DestinationState) -> Destination
    ) {
        self._route = route
        self.toDestinationState = toDestinationState
        self.destination = destination
        self.content = content
    }

    public var body: some View {
        GeometryReader { geometry in
            ZStack {
                content($route)
                wrappedDestination()
                    .frame(width: geometry.size.width)
                    .offset(
                        x: route == nil ? geometry.size.width : 0,
                        y: 0
                    )
                    .animation(self.animation)
            }
        }
    }

    private var animation: Animation = .easeIn(duration: 2)

    @ViewBuilder
    private func wrappedDestination() -> some View {
        if let _route = Binding($route),
           let _destinationState = toDestinationState(_route.wrappedValue) {
            ZStack {
                Group {
                    if #available(iOS 15.0, *) {
                        Color(uiColor: UIColor.systemBackground)
                    } else {
                        Color(UIColor.systemBackground)
                    }
                }
                .preferredColorScheme(.light)
                .ignoresSafeArea()
                self.destination($route, _destinationState)
            }
        } else {
            EmptyView()
        }
    }
}

struct ItemsList: View {
    let items: [Int]
    @Binding var selectedItem: Int?

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Button(
                    action: { selectedItem = item },
                    label: { Text(String(item)) }
                )
                    .contentShape(Rectangle())
            }
        }
    }
}

struct ItemDetail: View {
    let item: Int
    @Binding var selectedItem: Int?

    var body: some View {
        VStack {
            Text(String(item))
            Button(
                action: { selectedItem = nil },
                label: { Text("Back") }
            )
        }
    }
}

Answer 1

Thanks to the links Asperi provided, I figured it out.

Applying the animation to the container and providing the value to monitor to the animation fixed it.