DEV Community: Yossa Bourne

SwiftUI Complex Animations - Lume GPT Weather UI - Matched Geometry Effect [Video]

Yossa Bourne — Wed, 23 Apr 2025 10:17:11 +0000

Let’s do the first animation challenge inspired by Lume GPT Weather iOS app! In this video, I’ll walk you through creating complex animations and interfaces in SwiftUI using various techniques such as matched geometry effect, delay-based list animations, adjusting view’s darkness, and more!

What you’ll learn:

Synchronizing animations using .matchedGeometryEffect
Delay-based animations
Sizing layout based on container using .containerRelativeFrame
Complex animations
Adjusting view’s brightness / darkness

Please subscribe me and YouTube - AppBeyond for more contents!

MV vs MVVM in SwiftUI (2025): Which Architecture Should You Use? [Video]

Yossa Bourne — Sun, 06 Apr 2025 05:12:42 +0000

Which to choose: MV or MVVM? In this video, I’ll show to how to implement both patterns and guide you how to choose between these two in 2025.

What you’ll learn:

What’s in an iOS app
MV (Model-View) or VV (View-View) Pattern in action
MVVM Pattern in action
Choosing between MV and MVVM

Please subscribe me and my channel - AppBeyond for more videos!
There are other videos I've made about cool animations in SwiftUI. I also upload Swift and SwiftUI knowledge videos weekly!

It's 2025 and I still see people use NavigationLink in SwiftUI. Let's find out why you should AVOID it instead and use better alternatives!

Yossa Bourne — Tue, 11 Mar 2025 03:16:52 +0000

SwiftUI Navigation: NEVER use NavigationLink with NavigationStack

Yossa Bourne ・ Mar 10

#ios #swift #programming #discuss

Complete Guide to Navigation in SwiftUI with NavigationStack [Video]

Yossa Bourne — Tue, 11 Mar 2025 02:04:44 +0000

Master SwiftUI navigation with NavigationStack! In this video, you'll learn fundamental of navigation in SwiftUI and NavigationStack. I’ll show you how to navigate using different methods, from simple to advanced! Whether you're a beginner or an experienced developer, this tutorial will help you understand navigation in SwiftUI and help you build better apps.

What you’ll learn:

Fundamental of navigation in SwiftUI and NavigationStack
How to use NavigationLink and why you should avoid using it
How to navigate programmatically
How to pass data on navigation between views
How to support navigation with multiple data types
How to remove view programmatically

Please subscribe me and my channel - AppBeyond for more videos!
There are other videos I've made about cool animations in SwiftUI. I also upload Swift and SwiftUI knowledge videos weekly!

SwiftUI Navigation: NEVER use NavigationLink with NavigationStack

Yossa Bourne — Mon, 10 Mar 2025 19:27:32 +0000

Back then in the dark age prior to iOS 16, performing navigation in pure SwiftUI was evil, especially for those who came from UIKit. There was only one way to navigate was to use NavigationView + NavigationLink, the duo full of awful properties.

Fortunately, NavigationStack made its first debut in iOS 16 with a huge improvement. It alleviate a lot of issues we had with NavigationView + NavigationLink disastrous pair. What’s the best is we can use NavigationStack ALONE to perform navigation in pure SwiftUI. Since NavigationStack is better than NavigationView in every aspect, NavigationView is deprecated. But its friend — NavigationLink — is not…

Even though it’s bad and we’ve already had NavigationStack, I still see NavigationLink from time to time to time. That’s why I write this article to tell you…

These are 3 reasons why you SHOULDN’T use NavigationLink with NavigationStack

1. Eager View Initialization

When we use NavigationLink to link between the source and the destination views, it creates the destination view instance before it’s actually added to the view hierarchy. This leads to performance issues in real life when we construct a large number of views.

Let’s take a look at the following example, it prints to the console immediately without any interaction:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink {
                ExampleView() // Destination
            } label: {
                Text("Tap to navigate") // Source
            }
        }
    }
}

struct ExampleView: View {
    init() {
        print("init") // <--- This would be printed out before we tap the source view
    }

    var body: some View {
        Text("Hello, World!")   
    }
}

The console printed out as soon as the preview finished loading:

It would be even worse if each destination view initializes it own dependencies directly (i.e. containing @StateObject).

Solution? Use NavigationStack with .navigationDestination:

struct ContentView: View {

    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            Button {
                path.append(Destination.example)
            } label: {
                Text("Tap to navigate") // Source
            }
            .navigationDestination(for: Destination.self) { _ in
                ExampleView() // Destination
            }
        }
    }
}

enum Destination {
    case example
}

After fixing, the log is printed out after I tapped the button to navigate:

This solution brings us to the next point.

2. ANTI Programmatic Navigation

Most apps need programmatic navigation. It’s a crucial part for providing seamless experience in the app. These features (but not limited to) require the ability to navigate programmatically:

Asynchronous Navigation (i.e. go to the next screen after loading data from network)
Deep Linking
Handle push notifications (i.e. navigate to a certain screen after tapping a push notification)
App Intents

Unfortunately, it’s nearly impossible to achieve that capability with NavigationLink, and don’t try it at home if your app supports minimum iOS newer than 16.

NavigationStack and NavigationPath support programmatic navigation by design. This is how we easily achieve deep link handling with these wonderful duo:

struct ContentView: View {

    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            YourRootView() // <--- Source / Root
                .navigationDestination(for: Destination.self) { _ in
                    ExampleView() // <--- Destination
                }
        }
        // 1. Use .onOpenURL(_:) to detect incoming URL.
        .onOpenURL { url in 
            // 2. Handle the incoming URL using a custom method.
            handle(url)
        }
    }

    private func handle(_ url: URL) {
        // 3. Check if the URL is valid
        // For example, we only allow appduck://example.
        guard url.scheme == "appduck" else {
            return
        }

        guard let action = components.host, action == "example" else {
            return
        } 

        // 4. Finally, perform an action corresponding to the URL.
        // In this case, show ExampleView.
        path.append(Destination.example)
    }
}

enum Destination {
    case example
}

3. No Room for Additional Actions

If you have experience working on complex apps, you know that one button often do more than one thing, such as:

Asynchronous Operation (i.e. silently save data to the database)
Logging
Analytics

It’s pretty common if it’s a button made of Button, not NavigationLink. According to its documentation, none of its signatures accept functions:

Some developers suggest that we add additional actions to the destination view’s .onAppear():

struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink {
                ExampleView() // Destination
                    .onAppear {
                        performCustomAction() // <--- BAD PRACTICE!!! Don't to this!
                    }
            } label: {
                Text("Tap to navigate") // Source
            }
        }
    }
}

For simple apps, that trick might work. If you do that in more complex apps, you’ll end up with either a lot of duplicated code or unreadable one. This problem can be solved easily with NavigationStack and NavigationPath.

Conclusion

NavigationLink is an old API designed for quick prototyping alone. Its downsides make it’s very impractical to use in professional environments.

NavigationStack and NavigationPath are currently the best for pure SwiftUI navigation. They are simple and quite powerful.

However, if you’re looking for a better navigation system supporting SwiftUI views with

more performant
more capable
more reliable

Consider this option: UINavigationController wrapped in a UIViewControllerRepresentable.

Please subscribe me and my channel - AppBeyond for more videos!
There are other videos I've made about cool animations in SwiftUI. I also upload Swift and SwiftUI knowledge videos weekly!

Stretchy & Sticky Header in SwiftUI on iOS 18 [Video]

Yossa Bourne — Wed, 05 Mar 2025 02:45:00 +0000

Stretchy & sticky header is a very popular UI, and that’s what we’ll build together in this video. Since iOS 17, Apple provides us many simple yet powerful APIs on SwiftUI ScrollView. We’ll use one of that — onScrollGeometryChange — to help us achieve the effect easily.

What you’ll learn:

How to use .onScrollGeometryChange modifier
How to implement stretchy & sticky header in SwiftUI

Please subscribe me and my channel - AppBeyond for more videos!
There are other videos I've made about cool animations in SwiftUI. I also upload Swift and SwiftUI knowledge videos weekly!

Making 3D Button with Haptic Effect like Duolingo in SwiftUI

Yossa Bourne — Wed, 26 Feb 2025 14:00:00 +0000

In this video, I’ll show you how to make a 3D button with press effect like Duolingo. Later on, we'll add a haptic effect to make the button feels more immersive and satisfying. Don't forget to test it on your real device!

What you’ll learn:
➡ A simple way to make a 3D button
➡ Using haptic effect in SwiftUI

Please subscribe me and my channel - AppBeyond for more videos!
There are other videos I've made about cool animations in SwiftUI. I also upload Swift and SwiftUI knowledge videos weekly!

Mesh Gradient with Animation in SwiftUI [Video]

Yossa Bourne — Tue, 25 Feb 2025 15:37:32 +0000

In this video, I’ll show you how to create a stunning visual using MeshGradient in SwiftUI. Later in the video, I'll show you various techniques to perform animations with mesh gradient!

What you’ll learn:
➡ How to create a complex gradient using MeshGradient
➡ Various techniques to perform animations

Please subscribe me and my channel - AppBeyond for more videos!
There are other videos I've made about cool animations in SwiftUI. I also upload Swift and SwiftUI knowledge videos weekly!

Auto-Scrolling Infinite Carousel in SwiftUI [Video]

Yossa Bourne — Mon, 24 Feb 2025 02:06:19 +0000

In this video, I’ll walk you through building a seamless auto-scrolling infinite carousel using SwiftUI and new ScrollView APIs recently introduced in iOS 18. I promise the technique is much simpler than you thought! 🤩

What you’ll learn:

How to create an infinite scrolling carousel in SwiftUI without keeping adding / removing elements
How to use recent SwiftUI’s ScrollView APIs, including: scroll position, scroll phase, scroll geometry, and styling! 😎
How to use Timer to perform repeating tasks

Please subscribe me and my channel - AppBeyond for more videos!
There are other videos I've made about cool animations in SwiftUI. I also upload Swift and SwiftUI knowledge videos weekly!

Making Dating App Animation in SwiftUI [Video]

Yossa Bourne — Sun, 23 Feb 2025 12:08:24 +0000

In this video, I’ll show you how to make dating app animation in SwiftUI.

The first part is recreating a swiping card animations like in popular dating apps such as Tinder and Bumble. In this part, you’ll learn how to use drag gesture with @GestureState to move multiple views at once to create subtle animations.
The second part, I’ll make a view showing people liking each other. I’ll walk you through the process on how I create complex animations. Furthermore, I’ll create a particle effect using a powerful SwiftUI library called Vortex, created by Paul Hudson from Hacking with Swift.
Finally, I’ll combine those views together with SwiftUI navigation.

What you’ll learn:

How to use DragGesture and @GestureState to perform subtle animations
SwiftUI translation and transformation view modifiers
A process to create complex animations
Installing package using Swift Package Manager
How to use Vortex to create beautiful particle effects

Please subscribe me and my channel - AppBeyond for more videos! There are other videos I've made about cool animations in SwiftUI. I also upload Swift and SwiftUI knowledge videos weekly!