Hey everyone! 👋
I recently interviewed for the SDE-2 iOS role at Swiggy, and I wanted to share my journey with all of you. The process was structured into 4 rounds, and it covered everything from Swift basics and concurrency to system design and SwiftUI.

If you’re preparing for similar interviews, I hope this blog helps you understand what to expect and how to prepare better!

🧠 Round 1: Online Assessment (OA)

This was a timed online test that had a mix of DSA, Swift-specific MCQs, and SwiftUI-based snippet questions.

🧩 Problems I faced:

• Roman to Integer
• A Graph Problem (Medium-Hard) — Took some time, but I managed a working solution
• Swift MCQs — Focused on closures, optionals, memory handling
• SwiftUI Snippet MCQs — A few questions around @State, @Binding, @ObservedObject, and UI behavior

This round was a good mix of theory and implementation, and a clear test of your understanding of Swift and SwiftUI fundamentals.

🍏 Round 2: iOS Deep Dive (Part 1)

This was a very technical round focused on Swift and iOS internals.

🔐 Task:

Create a thread-safe singleton class named ThreadSafeDataStorage in Swift, with readData() and writeData(_:) methods.

The catch was to ensure thread-safety using DispatchQueue and handle concurrent access properly.

Other topics discussed:

• Retain cycles and how to resolve them
• Create a custom optional type and write logic similar to if let
• General iOS questions
• A custom implementation of map(_:)

This round required clarity of core concepts and Swift syntax fluency.

🧱 Round 3: System Design — Swiggy Order Tracking Screen

This round was all about high-level design, not just from an architecture perspective but also user experience.

🎯 Problem:

Design the “Track My Order” screen from Swiggy

💡 What I covered:

• Live status updates
• API design for status changes
• Real-time updates using sockets or polling
• Dynamic UI updates as per state (order confirmed, picked, delivered)
• Data models and how they’d look in Swift
• Basic HLD components and flow

It was an open-ended round, and the discussion was both technical and product-focused.

🍎 Round 4: iOS Deep Dive (Part 2)

This round felt more like a deep technical audit of how I think about iOS development.

🧠 Topics included:

• ARC and memory management
• GCD — DispatchBarrier, concurrent reads, serial writes
• Closures and retain cycles
• MVVM architecture — Real-world usage
• Singletons & thread safety
• Communication patterns — Delegate, NotificationCenter, Combine
• Copy-on-write — How it works, when it triggers
• Weak vs Unowned — Rules and use-cases
• App size optimization — What steps I follow
• What I’ve worked on personally
• SwiftUI — Understanding of @State, @Binding, @Environment, @ObservedObject
• SwiftUI benefits and when to avoid it
• Writing and structuring custom reusable views

This was probably my favorite round. It was a healthy mix of theory, practical knowledge, and architectural thinking.

🔚 Final Thoughts

The Swiggy interview process was very well-structured and pushed me to think deeper about my day-to-day development habits.

If you’re preparing:

• Brush up on Swift and iOS fundamentals
• Practice thread-safe coding patterns
• Be comfortable with SwiftUI and its property wrappers
• Understand real-world system design in mobile apps

Hope this blog helps you in your journey. If you have any questions or want to discuss interview prep, feel free to drop a comment or connect with me! 😊

Round 1: Machine Coding 💻

This was a hands-on round where I had to write working code for a given problem. The main focus was on logic, correctness, and clean code. The problem statement required structuring the solution efficiently.

Round 2: DSA 🔢

This round focused on Data Structures & Algorithms. I solved:

1️⃣ Graph Question — Number of Islands 🏝️

• Standard DFS/BFS problem. Since I had practiced similar problems before, I managed to solve it.

2️⃣ Two Pointers / Array Question — Container With Most Water 🛢️

• This was also straightforward, and I solved it using the two-pointer approach.

3️⃣ Modified Version of Above Problem — ❌ Couldn’t solve this one

• The interviewer modified the second question, making it trickier. I tried a few approaches but couldn’t get to the optimal solution.

Round 3: iOS Deep Dive 🍏

This round was heavily focused on iOS internals and Swift fundamentals.

✅ Value vs Reference Types
✅ Structs in Detail
✅ Memory Management
✅ Memory Address in Structs

A really interesting discussion happened around memory addresses in structures:

struct Example {
    var a: Int
}

var struct1 = Example(a: 5)
var struct2 = struct1
struct2.a = 9

Will the memory address of a change? 🤔

Then we went deeper into Copy-on-Write and why only arrays and dictionaries use it natively but not structs.

Another tricky question: If a struct has an array and we copy the struct, will the array still have the same address?

Other topics:
✅ Retain Cycles & ARC
✅ How retain cycles are formed (Examples)
✅ How to resolve them (Weak vs Unowned)

Round 4: System Design 🎮

This was quite different from a typical iOS System Design round. Instead of asking me to design an app or API, the problem was:

💣 Design a Matrix Game

• Players can bomb opponent’s mines
• The person who bombs all mines wins
• No need to discuss scope/features, just focus on game logic

It was a fun and challenging problem that required thinking through state changes and efficient updates.

Round 5: Hiring Manager 🧑‍💼 (The Toughest!)

This was the most difficult and detailed round. The HM went deep into my resume and past projects.

🚀 Topics Discussed:
✔️ WebSockets — How I used them in a project
✔️ Maps & Heatmaps — How I implemented them in an app
✔️ Audio/Video Streaming — Why quality drops on bad networks
✔️ App Performance — How to improve load times
✔️ Payment Gateway (Stripe) — What happens when a payment fails?
✔️ Beta Testing & CI/CD
✔️ Authentication Flows — Handling logins securely
✔️ Storing Images in AWS — Managing multiple resolutions

Final Thoughts 🤔

Overall, it was a challenging yet rewarding experience. Flipkart’s interview process tests both DSA and deep iOS knowledge. If you’re preparing:

✅ Brush up on DSA (especially graphs, arrays, and modifications of known problems)
✅ Deep dive into Swift internals (memory management, retain cycles, ARC, copy-on-write)
✅ Prepare to discuss real-world projects in detail
✅ Be ready for System Design (can be unconventional like mine!)

Hope this helps anyone preparing for Flipkart SDE-2 iOS! Feel free to drop any questions below. 🚀

In this post, I’ll walk you through my interview process, the types of questions asked, and how this experience boosted my confidence as an iOS developer.

Interview Rounds at Walmart

The entire process consisted of four rounds:

1. DSA Round (Data Structures & Algorithms)
2. iOS Technical Round
3. Hiring Manager Round
4. HR Discussion

Round 1: DSA (Data Structures & Algorithms)

The first round was a classic coding interview, where I had to solve three Leetcode-style problems within the given time. The questions were:

Squares of a Sorted Array

• This required sorting squared values efficiently, making it a two-pointer problem.

Merge Intervals

• This tested my ability to handle overlapping intervals, which is useful in scheduling problems.

Longest Common Subsequence

• A classic dynamic programming problem that tests recursion and memoization.

I was well-prepared for this round thanks to consistent practice on Leetcode and mock interviews. I completed all three questions successfully, which gave me a solid start to the process.

Round 2: iOS Technical Interview

This round focused on iOS-specific concepts, covering various topics like:

• Access Specifiers (private, fileprivate, internal, public, open)
• Open vs Public (difference in subclassing and module accessibility)
• Grand Central Dispatch (GCD) (sync vs async, concurrent vs serial)
• Retain Cycle (how memory leaks occur and how to avoid them)
• Weak vs Unowned (differences and when to use each)
• Initializers (designated vs convenience)
• Closures (escaping vs non-escaping)
• Concurrency (async/await, actors in Swift)
• Semaphore & NSLock (handling multi-threading synchronization)
• Core Data (NSManagedObjectContext, persistent store)
• Static vs Dynamic Frameworks (difference and when to use each)

The interviewer didn’t go into deep explanations but expected quick, correct responses. If I answered confidently, he quickly moved to the next question, so the key was concise and accurate explanations.

Round 3: Hiring Manager Discussion

This was the round I felt least confident about because I was not prepared for System Design questions.

• The Hiring Manager introduced herself and asked about my background.
• We discussed my current company’s projects and the tech stack I worked with.

She asked in-depth questions about my current project, such as:

• How do you fetch data?
• Where is the news data stored?
• Who updates the news from the backend?
• How do you handle analytics and crash reports (Firebase Analytics & Crashlytics)?

Then came System Design, which I wasn’t ready for. 😬
But I stayed calm and designed a system on the spot, explaining my thought process.

Even though I wasn’t confident about this round, I somehow managed to clear it!

Round 4: HR Discussion

This was a casual conversation where I was asked:

• Why are you leaving your current company?
• Why Walmart?
• What are your career goals?
• Salary expectations and benefits discussion.

It was straightforward and mostly about alignment with Walmart’s culture and values.

Key Takeaways & Lessons Learned

✨ Hard work pays off: My preparation on Leetcode, iOS concepts, and past project experiences helped me answer questions confidently.

✨ Confidence matters: Even when I wasn’t sure about the System Design round, I kept my composure and explained my thought process, which helped me clear it.

✨ Quick and clear answers: The iOS round moved fast. If I hesitated, I might have lost the opportunity. Knowing the fundamentals inside out was crucial.

✨ Mock interviews help: Practicing with mock interviews and revising iOS topics gave me the speed and clarityneeded in technical rounds.

Final Thoughts

Clearing SDE-3 iOS at Walmart was a huge confidence boost. This experience reinforced the idea that consistent effort and learning can help you achieve your goals. 🚀

For anyone preparing for similar roles, my advice is:
✅ Master DSA (solve at least 100+ Leetcode problems)
✅ Know your iOS concepts deeply
✅ Practice explaining your projects and system design
✅ Stay calm and think on your feet during unexpected questions

I hope my experience helps you in your journey! 💪 Let me know in the comments if you have any questions. 😃

Step 1: Create a New SwiftUI Project

First things first, you’ll need to create a new SwiftUI project. Open Xcode and create a new iOS project using the Apptemplate. Select SwiftUI as the user interface option and choose a name for your project (e.g., LockScreenWidgetApp).

Step 2: Add a Widget Extension

Once the project is created, we’ll add a Widget Extension to support creating widgets for the lock screen.

1. In the File menu, select New > Target.
2. Choose Widget Extension under the iOS section.
3. Name the widget (e.g., SmallWidget).
4. Select the Widget Family option as Accessory Circular, as we’ll be creating a small, circular widget.
5. Click Finish.

Now you should see a new widget extension folder in your project, complete with some sample code to get started. We will modify this code for our widget.

Step 3: Design Your Widget View

Let’s move to the next step: designing the widget’s interface. For simplicity, we’ll use a switch statement to handle different widget types (although for now, we’ll only add the support for the circular accessory widget).

In your widget’s EntryView (typically found in SmallWidgetEntryView.swift), replace the existing code with the following:

struct SmallWidgetEntryView : View {
    var entry: Provider.Entry
    @Environment(\.widgetFamily) private var family

    var body: some View {
        switch family {
        case .accessoryCircular:
            VStack {
                Image(systemName: "qrcode")
                    .resizable()
                    .padding(12)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.black)
            .clipShape(.circle)

        default:
            Text("No Widget Available")
        }
    }
}

What’s Happening Here?

• We’re checking the widget family type using @Environment(\.widgetFamily).
• If the widget is an accessoryCircular, we’re displaying a QR code image inside a circular frame, with black background and some padding.
• The .clipShape(.circle) modifier ensures that the widget appears as a circle.

Step 4: Specify Supported Widget Families

Now, let’s tell the system what widget families our widget supports. In the widget’s main struct (found in SmallWidget.swift), replace the code with this:

struct SmallWidget: Widget {
    let kind: String = "SmallWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            if #available(iOS 17.0, *) {
                SmallWidgetEntryView(entry: entry)
                    .containerBackground(.fill.tertiary, for: .widget)
            } else {
                SmallWidgetEntryView(entry: entry)
                    .padding()
                    .background()
            }
        }
        .supportedFamilies([.accessoryCircular]) // Here we specify the widget family
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

Explanation of the Code:

• StaticConfiguration is used to create a static widget, meaning the content doesn’t change over time.
• We’re using .supportedFamilies([.accessoryCircular]) to tell the system that our widget only supports the accessoryCircular widget family.
• The containerBackground modifier is available starting from iOS 17 and gives our widget a background color for the widget container. For earlier versions, a fallback background is used.

Step 5: Lock Your Device and Add the Widget

Now, let’s test our widget on an actual lock screen. Here’s what you need to do:

1. Build and run the app on a physical device (lock screen widgets only work on physical devices).
2. Lock your device.
3. Press and hold on the lock screen to enter “Customize” mode.
4. Tap Add Widgets.
5. Look for your widget in the widget selection list and tap on it to add it to your lock screen.

Conclusion

That’s it! You’ve just created a simple lock screen widget that displays a QR code inside a circular frame. Of course, this is just the beginning. You can expand this by adding more widget families, customizing the view more deeply, or making the content dynamic based on app data.

Lock screen widgets are a great way to enhance user engagement with your app, and the process in SwiftUI is relatively simple. We hope this guide helps you get started!

If you have any questions or need further clarification, feel free to leave a comment! Happy coding! 😊

The Basics of Drag Gesture

To start, we’ll use DragGesture to detect user interaction. A drag gesture tracks the movement of the user’s finger, enabling us to update the slider’s position dynamically.

@State var offset: CGFloat = .zero
@State var userDragging: Bool = false

var drag: some Gesture {
    DragGesture()
        .onChanged { value in
            withAnimation {
                offset = max(0, value.translation.width)
                userDragging = true
            }
        }
        .onEnded { value in
            withAnimation {
                userDragging = false
                if value.translation.width >= (widthOfSlide * 0.7) {
                    offset = widthOfSlide - 10
                } else {
                    offset = .zero
                }
            }
        }
}

Here, onChanged dynamically updates the slider’s offset as the user drags, while onEnded determines if the slider reaches the threshold for confirmation.

Visual Feedback Using GeometryReader

Next, we’ll use GeometryReader to dynamically calculate the width of the slider. This ensures our layout adjusts to different screen sizes.

var body: some View {
    GeometryReader { geometry in
        VStack {
            Spacer()
            ZStack(alignment: .center) {
                HStack {
                    Image(systemName: "chevron.right.circle.fill")
                        .resizable()
                        .frame(width: 50, height: 50)
                        .foregroundStyle(.white)
                        .padding(.horizontal, 10)
                        .offset(x: offset)
                        .gesture(drag)
                    Spacer()
                }
                .frame(maxWidth: .infinity)
                .frame(height: 70)
                .background(.green)
                .clipShape(.capsule)
                .scaleEffect(userDragging ? 0.99 : 1.0)
                .onTapGesture {
                    withAnimation {
                        userDragging = true
                        offset = 20
                    }
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.4) {
                        withAnimation {
                            userDragging = false
                            offset = .zero
                        }
                    }
                }

                Text("Slide To Pay | ₹255")
                    .opacity(userDragging ? 0.5 : 1.0)
                    .foregroundStyle(.white)
                    .fontWeight(.bold)
                    .font(.title3)
            }
            .onAppear {
                widthOfSlide = geometry.size.width - 50 - 10
            }
        }
    }
    .padding()
}

In this layout, the slider button is dynamically positioned based on offset. We also use onTapGesture to provide visual feedback, where the slider wiggles if the user taps but doesn’t drag.

Adding Smooth Animations

Animations play a crucial role in enhancing the user experience. Using withAnimation, we ensure the slider snaps back or completes its slide with a polished look.

• Dragging Animation: Changes the slider’s position in real-time.
• Wiggle Effect: Briefly shifts the slider to nudge the user into sliding.

Wrapping It All Together

Here’s the complete code for our SlideToPay feature:

import SwiftUI

struct ContentView: View {

    @State var offset: CGFloat = .zero
    @State var widthOfSlide: CGFloat = .zero
    @State var userDragging: Bool = false

    var drag: some Gesture {
        DragGesture()
            .onChanged { value in
                withAnimation {
                    offset = max(0, value.translation.width)
                    userDragging = true
                }
            }
            .onEnded { value in
                withAnimation {
                    userDragging = false
                    if value.translation.width >= (widthOfSlide * 0.7) {
                        offset = widthOfSlide - 10
                    } else {
                        offset = .zero
                    }
                }
            }
    }

    var body: some View {
        GeometryReader { geometry in
            VStack {
                Spacer()
                ZStack(alignment: .center) {
                    HStack {
                        Image(systemName: "chevron.right.circle.fill")
                            .resizable()
                            .frame(width: 50, height: 50)
                            .foregroundStyle(.white)
                            .padding(.horizontal, 10)
                            .offset(x: offset)
                            .gesture(drag)
                        Spacer()
                    }
                    .frame(maxWidth: .infinity)
                    .frame(height: 70)
                    .background(.green)
                    .clipShape(.capsule)
                    .scaleEffect(userDragging ? 0.99 : 1.0)
                    .onTapGesture {
                        withAnimation {
                            userDragging = true
                            offset = 20
                        }
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.4) {
                            withAnimation {
                                userDragging = false
                                offset = .zero
                            }
                        }
                    }

                    Text("Slide To Pay | ₹255")
                        .opacity(userDragging ? 0.5 : 1.0)
                        .foregroundStyle(.white)
                        .fontWeight(.bold)
                        .font(.title3)
                }
                .onAppear {
                    widthOfSlide = geometry.size.width - 50 - 10
                }
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Let me know if you have any questions or if there’s a particular topic you’d like me to cover next.

Drop some claps 👏👏👏 if you found this helpful 💡
All and any feedback is accepted. 📩

Step 1: Setting Up the ScannerView

The ScannerView forms the main structure of our QR scanner. It includes a semi-transparent background, a scanning area, and some branding at the bottom.

struct ScannerView: View {
    @State var animate: Bool = false
    
    var body: some View {
        ZStack {
            Rectangle()
                .fill(.black.opacity(0.2)) // Semi-transparent overlay
            
            ScannerAreaView(animate: $animate) // Scanner area with animation
                .offset(y: -100) // Adjust vertical position
            
            VStack {
                Spacer()
                // Branding images
                HStack {
                    Image("bhim")
                        .resizable()
                        .frame(width: 70, height: 20)
                    Image("upi")
                        .resizable()
                        .frame(width: 50, height: 20)
                }
                .padding(40)
            }
        }
        .compositingGroup() // For rendering effects
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

Key Features:

1. Background Overlay: The rectangle with .black.opacity(0.2) gives the scanner its signature dimmed background.
2. Branding Section: At the bottom, I included BHIM and UPI logos to mimic real-world QR scanner branding.

Step 2: Creating the Animated Edges

The EdgeRectangleView creates the animated stroke effect around the scanner area.

struct EdgeRectangleView: View {
    @Binding var animate: Bool
    
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .trim(from: animate ? 0.35 : 0.34, to: animate ? 0.4 : 0.41) // Vary stroke size
            .stroke(
                Color(red: 132/255, green: 44/255, blue: 240/255), 
                style: StrokeStyle(lineWidth: 10, lineCap: .round)
            )
    }
}

Key Features:

1. Trimming for Animation: The .trim() function animates a small section of the rectangle’s border, giving a scanning effect.
2. Dynamic Color: The vibrant purple stroke color adds a premium feel.

Step 3: Assembling the Scanner Area

The ScannerAreaView is the core of the scanner's animation. It combines the edge animations and applies a scaling effect to simulate scanning.

struct ScannerAreaView: View {
    @Binding var animate: Bool
    var rotationDegrees: [Double] = [0, 90, 180, 270]
    @State var timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()

    var body: some View {
        ZStack {
            Rectangle()
                .blendMode(.destinationOut) // Makes the scanner area transparent
                .clipShape(.rect(cornerRadius: 20)) // Custom shape
            
            ForEach(0..<4) { item in
                EdgeRectangleView(animate: $animate)
                    .rotationEffect(Angle(degrees: rotationDegrees[item])) // Rotate edges
            }
            .padding(20) // Adjust spacing
        }
        .onReceive(timer, perform: { _ in
            animate.toggle() // Toggle animation state
        })
        .frame(width: animate ? 320 : 300, height: animate ? 320 : 300) // Scaling effect
        .animation(.easeInOut(duration: 0.9), value: animate) // Smooth animation
    }
}

Key Features:

1. Rotating Edges: The rotationEffect rotates each edge rectangle by 90 degrees to position them around the scanner area.
2. Scaling Effect: The animate state changes the scanner size dynamically, giving a pulsing effect.
3. Timer-Based Animation: A Timer toggles the animate state every second to create a seamless loop.

Step 4: Preview the View

Finally, ensure the ScannerView is connected to your preview provider to test its appearance in Xcode.

#Preview {
    ScannerView()
}

Explaining the Key Visual Effects

1. Blend Mode: The .blendMode(.destinationOut) ensures that the scanning area is cut out from the dimmed background, creating a transparent region.
2. Custom Shapes: The .rect(cornerRadius: 20) creates rounded corners for the scanner area, enhancing the aesthetic.
3. Smooth Animations: The combination of .animation and .easeInOut ensures the scaling and edge animations are visually appealing.

How to Customize

1. Change Colors: Modify the stroke color in EdgeRectangleView to match your app's theme.
2. Adjust Animation Duration: Play around with the duration value in .animation() for faster or slower animations.
3. Add More Branding: Include additional elements like a logo or a help button for a more functional scanner.

Conclusion

This QR scanner animation is visually appealing and functional, perfect for any app that uses QR codes. It demonstrates the power and flexibility of SwiftUI in creating complex animations with minimal code. By breaking down the animation into reusable components, you can easily adapt it to your needs.

You can checkout the complete code with CodeScanner SPM integrated available on Github 👈

Let me know if you have any questions or if there’s a particular topic you’d like me to cover next.

Drop some claps 👏👏👏 if you found this helpful 💡
All and any feedback is accepted. 📩

In this blog, I’ll walk you through how the SwiftUI app lifecycle works, how to manage app state changes using ScenePhase, and when and how to reintroduce AppDelegate if you need it. Let's get started!

1. The SwiftUI Way: Managing Lifecycle with ScenePhase

The app’s lifecycle in SwiftUI is much cleaner than it was in UIKit, thanks to the @main keyword and the App protocol. Instead of relying on AppDelegate for lifecycle events, SwiftUI provides an @Environment variable for tracking the app’s lifecycle state, called scenePhase.

Let’s start by creating a simple SwiftUI app that tracks whether the app is active, inactive, or in the background.

import SwiftUI

@main
struct TimepassApp: App {
    // Using Environment to track scenePhase
    @Environment(\.scenePhase) var scenePhase
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .onChange(of: scenePhase) { newPhase in
            // Monitoring the app's lifecycle changes
            switch newPhase {
            case .active:
                print("App is active")
            case .inactive:
                print("App is inactive")
            case .background:
                print("App is in the background")
            @unknown default:
                print("Unknown state")
            }
        }
    }
}
struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .padding()
    }
}

Explanation:

• The @Environment(\.scenePhase) tracks the app’s state and triggers changes based on its phase (active, inactive, or background).
• The .onChange(of:) modifier listens to changes in scenePhase, allowing us to handle the app's lifecycle events declaratively.

This is the ideal solution for most apps that don’t need additional control over system-level events at the start.

2. Handling Code During App Startup with init()

If you want to run any code when your SwiftUI app starts, before the app enters the view hierarchy, you can utilize the init() method in your App struct. This method is ideal for tasks like logging or configuring a service as the app starts.

Here’s how you can add custom startup logic using the init() method:

@main
struct TimepassApp: App {
    @Environment(\.scenePhase) var scenePhase

init() {
        // Code that runs as soon as the app starts
        print("App has started!")
        // Initialize any services or configurations here
    }
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .onChange(of: scenePhase) { newPhase in
            switch newPhase {
            case .active:
                print("App is active")
            case .inactive:
                print("App is inactive")
            case .background:
                print("App is in the background")
            @unknown default:
                print("Unknown state")
            }
        }
    }
}

Key Points:

• The init() method is called when the App is first initialized, making it a good place to configure services or set up initial states before any views are loaded.

3. When You Still Need AppDelegate

In most cases, using scenePhase and the init() method is enough for SwiftUI apps. But, there are times when you may still need access to AppDelegate—for example, when integrating third-party services that require delegate methods like push notifications, deep linking, or background tasks.

To do that, we can define an AppDelegate class and connect it to our SwiftUI app using UIApplicationDelegateAdaptor. Here's how you can implement that:

import SwiftUI

// Define your AppDelegate class
class AppDelegate: NSObject, UIApplicationDelegate {
    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
    ) -> Bool {
        // Perform any setup when the app finishes launching
        print("AppDelegate: App has finished launching")
        return true
    }
    
    // Implement other AppDelegate methods if needed
}

@main
struct TimepassApp: App {
    // Connecting AppDelegate with the app using UIApplicationDelegateAdaptor
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    @Environment(\.scenePhase) var scenePhase

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .onChange(of: scenePhase) { newPhase in
            switch newPhase {
            case .active:
                print("App is active")
            case .inactive:
                print("App is inactive")
            case .background:
                print("App is in the background")
            @unknown default:
                print("Unknown state")
            }
        }
    }
}

Explanation:

• The AppDelegate class is back, but now we use UIApplicationDelegateAdaptor to integrate it with the SwiftUI app.
• This allows you to handle AppDelegate lifecycle events (like push notifications or background tasks) while still taking advantage of SwiftUI's declarative lifecycle management with scenePhase.

Conclusion

With SwiftUI, you can now manage most of your app’s lifecycle using scenePhase, making your code cleaner and more declarative. For startup logic, the init() method in your App struct is often enough. But when you need more fine-grained control, or you’re dealing with third-party integrations that rely on AppDelegate, you can still bring it back into your SwiftUI app using UIApplicationDelegateAdaptor.

Whether you’re starting a new SwiftUI project or transitioning from UIKit, understanding how these lifecycle features work will ensure you can handle both simple and advanced use cases. Happy coding! 😄

Creating the List with ForEach

We begin by creating a simple List that displays colored rectangles. The colors will be provided using an array of gradient colors, and we'll iterate over this array using a ForEach loop.

Here’s the basic structure of our view:

struct ListView: View {
    let colors = [
        Color.blue.gradient,
        Color.red.gradient,
        Color.green.gradient,
        Color.blue.gradient,
        Color.red.gradient,
        Color.green.gradient
    ]
    
    var body: some View {
        List {
            ForEach(Array(colors.enumerated()), id: \.offset) { index, color in
                Rectangle()
                    .fill(color)
                    .frame(maxWidth: .infinity)
                    .frame(height: 90)
                    .clipShape(.rect(cornerRadius: 15))
                    .padding()
                    .listRowInsets(EdgeInsets())
            }
        }
        .listStyle(.plain)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

Explanation:

• List: This is the main container that represents a vertically scrolling view. Each item in the list will be created by iterating over the array of colors.
• ForEach: This loop helps iterate over the colors array, creating a Rectangle for each color.
• Rectangle: We use this shape to fill each list item with a colored rectangle, setting its width, height, and corner radius for a rounded design.

Next, we’ll make our list items interactive by adding swipe actions.

Adding Swipe Actions to the List

In SwiftUI, you can easily add swipe actions to a List item by using the .swipeActions modifier. This can be done for both leading and trailing edges, enabling actions like editing, deleting, or marking as complete.

Let’s add two swipe actions: one on the leading edge and two on the trailing edge.

List {
    ForEach(Array(colors.enumerated()), id: \.offset) { index, color in
        Rectangle()
            .fill(color)
            .frame(maxWidth: .infinity)
            .frame(height: 90)
            .clipShape(.rect(cornerRadius: 15))
            .padding()
            .listRowInsets(EdgeInsets())
            .swipeActions(edge: .leading) {
                completeAction()
            }
            .swipeActions(edge: .trailing) {
                deleteAction()
                editAction()
            }
    }
}

Explanation:

• swipeActions(edge: .leading): This adds a swipe action to the leading (left) edge of each list item. We’ll use this for marking an item as done.
• swipeActions(edge: .trailing): This adds a swipe action to the trailing (right) edge. Here, we’ll add delete and edit actions.

Creating the Views for Swipe Actions

Now that the basic structure is in place, let’s define the views for the swipe actions: Mark Done, Delete, and Edit. Each action will have an icon and a label, with appropriate tint colors.

Complete (Mark Done) Action

private func completeAction() -> some View {
    Button {
        // Handle mark as done action
    } label: {
        VStack {
            Image(systemName: "checkmark.circle.fill")
            Text("Mark Done")
        }
    }
    .tint(.green)
}

This action marks the list item as complete and uses the green color for a positive action.

Delete Action

private func deleteAction() -> some View {
    Button(role: .destructive) {
        // Handle delete action
    } label: {
        VStack {
            Image(systemName: "wrongwaysign.fill")
            Text("Delete")
        }
    }
    .tint(.red)
}

The delete action is destructive, as indicated by the red tint and the role: .destructive. The destructive role automatically handles accessibility features like confirmation.

Edit Action

private func editAction() -> some View {
    Button {
        // Handle edit action
    } label: {
        VStack {
            Image(systemName: "note.text")
            Text("Edit")
        }
    }
    .tint(Color(red: 255/255, green: 128/255, blue: 0/255))
}

For the edit action, we use an orange tint. It includes an icon and a label to make the action clear to users.

Putting It All Together

Here’s the final code that combines everything:

struct ListView: View {
    let colors = [
        Color.blue.gradient,
        Color.red.gradient,
        Color.green.gradient,
        Color.blue.gradient,
        Color.red.gradient,
        Color.green.gradient
    ]
    
    var body: some View {
        List {
            ForEach(Array(colors.enumerated()), id: \.offset) { index, color in
                Rectangle()
                    .fill(color)
                    .frame(maxWidth: .infinity)
                    .frame(height: 90)
                    .clipShape(.rect(cornerRadius: 15))
                    .padding()
                    .listRowInsets(EdgeInsets())
                    .swipeActions(edge: .leading) {
                        completeAction()
                    }
                    .swipeActions(edge: .trailing) {
                        deleteAction()
                        editAction()
                    }
            }
        }
        .listStyle(.plain)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
    
    private func completeAction() -> some View {
        Button {
            // Handle mark as done action
        } label: {
            VStack {
                Image(systemName: "checkmark.circle.fill")
                Text("Mark Done")
            }
        }
        .tint(.green)
    }
    
    private func deleteAction() -> some View {
        Button(role: .destructive) {
            // Handle delete action
        } label: {
            VStack {
                Image(systemName: "wrongwaysign.fill")
                Text("Delete")
            }
        }
        .tint(.red)
    }
    
    private func editAction() -> some View {
        Button {
            // Handle edit action
        } label: {
            VStack {
                Image(systemName: "note.text")
                Text("Edit")
            }
        }
        .tint(Color(red: 255/255, green: 128/255, blue: 0/255))
    }
}

Conclusion

SwiftUI makes it incredibly easy to add swipe actions to a List, enhancing the interactivity and UX of your app. With just a few lines of code, we can introduce leading and trailing swipe gestures for actions like marking an item as complete, deleting, or editing.

Let me know if you have any questions or if there’s a particular topic you’d like me to cover next.

Drop some claps 👏👏👏 if you found this helpful 💡
All and any feedback is accepted. 📩

Let’s go step by step, starting from defining our properties to adding the animated behaviors. By the end of this blog, you’ll understand how the code works and how to apply similar principles to other animations.

💡 If you want to directly jump to complete code scroll to bottom.

Step 1: Defining the Properties

We’ll begin by defining the properties for our NotificationStack. This stack will contain multiple cards that animate when tapped.

struct NotificationStack: View {
    @State var isExpanded = false
    let cellHeight = 80
    let colors : [Color] = [.yellow, .pink, .indigo, .green, .red, .orange]

Here:

• @State var isExpanded: This Boolean state will help us track if the stack is expanded or collapsed. When isExpanded is true, the cards spread out; when false, they collapse into each other.
• cellHeight: Defines the height of each card in the stack.
• colors: We are using an array of colors for each card. SwiftUI’s color support is awesome for building visual effects quickly.

Step 2: Using LazyVStack for Performance

We are using LazyVStack for creating our vertical stack of cards. It’s like a VStack, but LazyVStack only renders the views that are currently visible, providing better performance in certain scenarios, especially when working with long lists.

VStack {
    LazyVStack(spacing: isExpanded ? 20 : -Double(cellHeight)) {

The spacing between the cards is dynamic here: if the stack is expanded, we want more space between the cards, but when collapsed, the cards should overlap.

Step 3: Adding the Text Elements with ForEach

Next, we use ForEach to iterate over the color array, creating a card for each color.

ForEach(0..<colors.count, id: \.self) { index in
    Text("Card \(index)")
        .frame(height: CGFloat(cellHeight))
        .frame(maxWidth: .infinity)
        .background(colors[index].gradient)
        .clipShape(.rect(cornerRadius: 18))
        .padding(.horizontal)

Here, we create text elements (which represent our “cards”) and assign each a color from the array. The card also has rounded corners with a clipShape modifier and some horizontal padding for aesthetics.

Step 4: Managing ZIndex and Offsets

Without controlling the zIndex, the cards would simply stack in their natural order, meaning the last card would be on top. We want the first card to be on top when collapsed.

.zIndex(Double(colors.count - index))

This line ensures that the first card has the highest z-index (layer position), and each subsequent card is stacked behind the previous one.

We then control the positioning of the cards based on whether the stack is expanded or not:

.offset(x: 0, y: getOffset(index: index))

We calculate the offset (vertical shift) using the getOffset(index:) function, which I’ll explain in detail later.

Step 5: Adding Opacity and Dynamic Padding

We also want to control the opacity of each card when the stack is collapsed, giving the appearance of cards disappearing as they move farther down the stack.

.opacity(getOpacity(with: index))
.padding(.horizontal, getHorizonatalPadding(index: index))

Here, both opacity and padding are dynamically set based on the index, which makes the visual effect more polished.

Step 6: Grouping for Smooth Animation

SwiftUI animations can sometimes be jerky if the changes to views are not grouped together properly. To avoid this, we use:

.geometryGroup()

This groups our geometry changes so that SwiftUI understands them as a single unit, allowing for a smoother animation experience.

Step 7: Adding Tap Gesture and Triggering Animation

Finally, we make the cards interactive by adding a tap gesture. When tapped, the isExpanded state toggles between trueand false, triggering the animation.

.onTapGesture {
    withAnimation {
        isExpanded.toggle()
    }
}

By wrapping the state change in withAnimation { ... }, SwiftUI automatically animates the relevant view changes.\

Step 8: Private Helper Functions

Now, let’s break down the helper functions that control the behavior of our cards.

getOffset(index:)

This function calculates how much each card should shift vertically depending on whether the stack is expanded or collapsed.

func getOffset(index: Int) -> CGFloat {
    if isExpanded {
        return 0
    } else {
        switch index {
        case 0: return 0
        case 1: return CGFloat(10)
        case 2: return CGFloat(20)
        default: return CGFloat(20)
        }
    }
}

When the stack is collapsed, the first card stays in place, while the following cards shift downward by 10 and 20 points respectively.

getHorizonatalPadding(index:)

This function handles the horizontal padding to give each card a slightly indented appearance when collapsed.

func getHorizonatalPadding(index: Int) -> CGFloat {
    if isExpanded {
        return 0
    } else {
        switch index {
        case 0: return 0
        case 1: return 5
        case 2: return 10
        default: return 10
        }
    }
}

When collapsed, each subsequent card has a bit more horizontal padding than the previous, contributing to the stacked effect.

getOpacity(with:)

Finally, we handle the opacity of each card to make the cards gradually disappear as they move down the stack.

func getOpacity(with index: Int) -> Double {
    if isExpanded {
        return 1
    } else {
        switch index {
        case 0: return 1
        case 1: return 0.75
        case 2: return 0.5
        default: return 0
        }
    }
}

Cards at the bottom of the stack have less opacity when collapsed, creating a fading effect.

Final Thoughts

That’s it! You’ve built a notification stack animation with SwiftUI. With simple state management and some clever use of animations and view modifiers, you can create a visually engaging experience for users. Try experimenting with different stack behaviors, colors, and shapes to customize this to your app’s design needs.

Complete Code 🫡

import SwiftUI

struct NotificationStack: View {
    @State var isExpanded = false
    let cellHeight = 80
    let colors : [Color] = [.yellow, .pink, .indigo, .green, .red, .orange]
    
    var body: some View {
        VStack {
            LazyVStack(spacing: isExpanded ? 20 :  -Double(cellHeight)) {
                ForEach(0..<colors.count, id: \.self) { index in
                    Text("Card \(index)")
                        .frame(height: CGFloat(cellHeight))
                        .frame(maxWidth: .infinity)
                        .background(colors[index].gradient)
                        .clipShape(.rect(cornerRadius: 18))
                        .padding(.horizontal)
                    // if we dont manage the zindex then last view will be on top, we want first to be on top
                        .zIndex(Double(colors.count - index))
                        .offset(x: 0, y: getOffset(index: index))
                        .opacity(getOpacity(with: index))
                        .padding(.horizontal, getHorizonatalPadding(index: index))
                    // handles smooth animation by taking elements insded a view as group
                        .geometryGroup()
                        .onTapGesture {
                            withAnimation {
                                isExpanded.toggle()
                            }
                        }
                }
            }
            .padding(.vertical)
            Spacer()
        }
        .frame(maxWidth: .infinity, alignment: .top)
    }
}

private extension NotificationStack {
    func getOffset(index: Int) -> CGFloat {
        if isExpanded {
            return 0
        } else {
            switch index {
            case 0: return 0
            case 1: return CGFloat(10)
            case 2: return CGFloat(20)
            default: return CGFloat(20)
            }
        }
    }
    
    func getHorizonatalPadding(index: Int) -> CGFloat {
        if isExpanded {
            return 0
        } else {
            switch index {
            case 0: return 0
            case 1: return 5
            case 2: return 10
            default: return 10
            }
        }
    }
    
    func getOpacity(with index: Int) -> Double {
        if isExpanded {
            return 1
        } else {
            switch index {
            case 0: return 1
            case 1: return 0.75
            case 2: return 0.5
            default: return 0
            }
        }
    }
}

Let me know if you have any questions or if there’s a particular topic you’d like me to cover next.

Drop some claps 👏👏👏 if you found this helpful 💡
All and any feedback is accepted. 📩

By the end of this blog, you’ll have a clear understanding of how to create a beautiful, animated heart that appears at the tap location and then gracefully flies away. Let’s dive in!

The Heart of the Matter: Understanding the Code

Let’s break down the code step by step, so you can see how it all comes together.

1. Defining the Model

struct HeartModel: Hashable, Identifiable {
    var id = UUID()
    var location: CGPoint
}

Explanation:
We start with a simple model, HeartModel, which conforms to Hashable and Identifiable. This model will represent each heart that appears on the screen. It contains a unique id to differentiate between hearts and a location property to store where the user tapped on the screen.

• id = UUID(): Automatically generates a unique identifier for each heart, essential for distinguishing between multiple hearts on the screen.
• location: CGPoint: Stores the x and y coordinates where the heart should appear.

2. Building the View: The Main Component

struct InstaLike: View {
    @State var heartsToDisplay: [HeartModel] = []
    
    var body: some View {
        ZStack {
            ForEach(heartsToDisplay) { heart in
                HeartView(heartObj: heart)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .ignoresSafeArea(edges: .all)
        .background(Color(red: 40/255, green: 40/255, blue: 40/255))
        .onTapGesture { location in
            let heart = HeartModel(location: location)
            heartsToDisplay.append(heart)
            DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                heartsToDisplay.removeAll(where: {$0.id == heart.id})
            }
        }
    }
}

Explanation:
The InstaLike view is where the magic happens. This view is responsible for displaying the hearts and handling user interactions.

• @State var heartsToDisplay: [HeartModel] = []: This state variable holds an array of HeartModel objects. Every time the user taps, a new heart is added to this array, which triggers the view to update and display the new heart.
• ZStack: All hearts are stacked on top of each other using a ZStack. As new hearts are added, they’re rendered on top of previous ones.
• .onTapGesture: This modifier handles the tap gesture. When the user taps, we capture the tap location, create a new HeartModel with that location, and append it to heartsToDisplay.
• DispatchQueue.main.asyncAfter: We delay the removal of the heart by 1 second, giving it time to animate before disappearing.

3. Crafting the Heart: The Animation View

struct HeartView: View {
    @State var heartObj: HeartModel
    @State var showHeart: Bool = false
    @State var rotate: Bool = false
    @State var fly: Bool = false
    
    var body: some View {
        GeometryReader { reader in
            ZStack {
                Image(systemName: "heart.fill")
                    .resizable()
                    .frame(width: 100, height: 100)
                    .foregroundStyle(
                        .linearGradient(
                            colors: [.purple, .pink, .pink, .orange],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing)
                    )
                    .symbolEffect(.bounce, value: showHeart)
                    .symbolEffect(.wiggle.clockwise, value: showHeart)
                    .opacity(showHeart ? 1 : 0)
                    .offset(x: fly ? (reader.size.width/2 - 40) : heartObj.location.x - 50, y: fly ? (heartObj.location.y - reader.size.height) : heartObj.location.y)
                    .onAppear() {
                        print(reader.size.width/2)
                        withAnimation(.easeInOut(duration: 0.2)) {
                            showHeart.toggle()
                        }
                        withAnimation(.snappy(duration: 0.5).delay(0.6)) {
                            fly.toggle()
                        }
                    }
            }
        }
        .ignoresSafeArea(edges: .all)
    }
}

Explanation:
The HeartView is the star of the show. It’s responsible for displaying the heart and animating it.

• @State var showHeart: Bool = false: Controls the visibility of the heart. Initially, it's hidden, and then it fades in with an animation.
• @State var fly: Bool = false: Controls the flying effect of the heart. It starts at the tap location and then moves upwards and towards the center of the screen.
• GeometryReader: This view helps us get the dimensions of the available space. It's crucial for calculating the position where the heart should move.
• Image(systemName: "heart.fill"): The heart image is drawn using SF Symbols. We apply a gradient to make it visually appealing.
• .symbolEffect(.bounce, value: showHeart): A fun little bounce effect is applied to the heart when it appears.
• .opacity(showHeart ? 1 : 0): The heart starts off invisible and fades in when showHeart toggles.
• .offset: The heart's position is adjusted based on the user's tap location, and then it flies upwards.
• .onAppear(): This modifier triggers when the view appears on the screen. We animate the heart’s appearance and movement in sequence.

Wrapping Up

With just a few lines of SwiftUI code, we’ve recreated the Instagram-like animation. This example shows the power of SwiftUI in making complex animations feel straightforward and accessible. Whether you’re creating a social media app or just want to add some flair to your app, this animation can be a great addition.

I hope this breakdown helps you understand how to work with SwiftUI’s animation capabilities. Feel free to customize the heart’s size, color, or animation to fit your app’s theme. Happy coding, and keep creating amazing experiences!

Let me know if you have any questions or if there’s a particular topic you’d like me to cover next.

Drop some claps 👏👏👏 if you found this helpful 💡
All and any feedback is accepted. 📩