swiftui-navigation-transitions

Introduction to SwiftUI Navigation Transitions

SwiftUI Navigation Transitions is a library designed to enhance the navigation experience in SwiftUI apps. It provides developers with the ability to fully customize push and pop transitions within SwiftUI's NavigationView and NavigationStack. The library manages to do this by offering a simple modifier that seamlessly integrates into existing SwiftUI components, avoiding the need to recreate the navigation stack from scratch.

The Basics

For developers who want to use this library in an iOS 13+ project, the setup is straightforward. By using a NavigationView, you can apply the .navigationViewStyle(.stack) and then specify a transition with .navigationTransition(.slide).

NavigationView {
  // Your content here
}
.navigationViewStyle(.stack)
.navigationTransition(.slide)

For iOS 16+ projects, the implementation is similar, but it utilizes NavigationStack, making the process even simpler.

NavigationStack {
  // Your content here
}
.navigationTransition(.slide)

Customization

The API is designed to be familiar to those who have experience with built-in SwiftUI Transitions, ensuring ease of use. Developers can apply custom animations with the same syntax as they would use for standard SwiftUI transitions.

.navigationTransition(
    .fade(.in).animation(.easeInOut(duration: 0.3))
)

Transitions can be combined for more complex effects:

.navigationTransition(
    .slide.combined(with: .fade(.in))
)

Additionally, transitions can be dynamically chosen based on conditions within the app:

.navigationTransition(
    reduceMotion ? .fade(.in).animation(.linear) : .slide(.vertical)
)

Built-in Transitions and Customization

The library provides several standard transitions right out of the box, including:

• Default Transition: This uses standard system transitions.
• Fade Transition: This allows views to fade in or out.
• Slide Transition: This allows views to slide in from a specified axis.

Beyond these options, developers have the capability to create entirely custom transitions. These transitions can be crafted using a few lines of code that resemble typical SwiftUI structures.

struct Swing: NavigationTransition {
    var body: some NavigationTransition {
        Slide(axis: .horizontal)
        MirrorPush {
            let angle = 70.0
            let offset = 150.0
            OnInsertion {
                ZPosition(1)
                Rotate(.degrees(-angle))
                Offset(x: offset)
                Opacity()
                Scale(0.5)
            }
            OnRemoval {
                Rotate(.degrees(angle))
                Offset(x: -offset)
            }
        }
    }
}

Interactivity

An appealing feature of SwiftUI Navigation Transitions is the ability to override pop gesture behavior. This capability allows developers to implement full-pan screen gestures, providing a richer interactive experience.

.navigationTransition(.slide, interactivity: .pan)

It's even possible to maintain the default system transition behavior while customizing pop gesture interactions.

.navigationTransition(.default, interactivity: .pan)

Documentation

The library's documentation is comprehensive and readily accessible for various versions, including the main branch and latest releases. This ensures developers can find the necessary resources to effectively implement and customize their navigation transitions.

By leveraging SwiftUI Navigation Transitions, developers can create visually engaging and interactive navigation experiences within their SwiftUI applications, without compromising the simplicity and elegance that SwiftUI is known for.