Learning SwiftUI on your phone

Most advice for learning SwiftUI starts with "install Xcode". That is a 7GB download, a Mac, and a project template with eleven files in it before you have seen a single view — which is a lot of ceremony to find out whether you like this.

You can get a long way with a phone. Not all the way. Here is the honest split.

What you can learn on a phone

• The view-and-modifier idea. That a view is a value, that modifiers wrap it rather than mutate it, and that order therefore matters.
• Layout. HStack, VStack, ZStack, Spacer, alignment, frame, padding.
• State. @State, what makes a view redraw, and why you can't just mutate a variable.
• Animation. The whole of it, honestly — implicit animation, springs, repeats, staggering, and time-driven motion.
• Shapes and drawing. Circle, RoundedRectangle, trim, stroke, gradients.

What needs a Mac

• Navigation and multi-screen apps — NavigationStack, TabView, sheets.
• Lists and scrolling with real data.
• Networking, persistence, Core Data, SwiftData.
• Anything you intend to ship to the App Store.

That is a real limit, not a soft one. A phone is where you learn the language and the layout model; a Mac is where you build an app.

An order that works

1. Draw one shape. A Circle with a frame and a fill. Change the numbers until the relationship between them is boring.
2. Stack three of them. Learn HStack spacing and alignment by getting it wrong a few times.
3. Add @State and a Button. Make something change on tap.
4. Animate that change. One .animation(_:value:) modifier. This is the moment SwiftUI starts feeling like a superpower.
5. Repeat it forever. repeatForever plus onAppear — see onAppear animation for why both are needed.
6. Stagger a ForEach. Index times a delay. Now you can build most loading indicators that exist.
7. Read the clock. TimelineView(.animation), and motion becomes maths instead of transitions.

Every step there is one file, small enough to hold in your head, and each one is a component you would actually use.

Build these seven things

In order. Each introduces exactly one new idea:

Full source for all of them is in the animation examples.

import SwiftUI

struct FadeGrid: View {
    @State private var lit = false

    var body: some View {
        VStack(spacing: 7) {
            ForEach(0..<3, id: \.self) { row in
                HStack(spacing: 7) {
                    ForEach(0..<3, id: \.self) { col in
                        RoundedRectangle(cornerRadius: 3)
                            .fill(.indigo)
                            .frame(width: 10, height: 10)
                            .opacity(lit ? 1 : 0.18)
                            .scaleEffect(lit ? 1 : 0.8)
                            .animation(
                                .easeInOut(duration: 0.75)
                                    .repeatForever()
                                    .delay(Double(row + col) * 0.1),
                                value: lit
                            )
                    }
                }
            }
        }
        .onAppear { lit = true }
    }
}

That one is worth typing out rather than pasting. Nested ForEach, a delay computed from both indices, and a diagonal falls out of it — which is a surprisingly good demonstration of why declarative UI is pleasant.

Type it, don't paste it

The uncomfortable part of learning on a phone is typing code on glass. It is slower, and that turns out to be useful for about a week — you read every character. After that, paste freely.

Swoop turns off autocorrect, smart quotes and autocapitalisation, because a curly quote in a string literal is a fifteen-minute mystery the first time it happens to you.

When to move to a Mac

When you want a second screen. That is the honest line: navigation is where the phone stops being enough, and it is also roughly where you stop learning SwiftUI and start learning app architecture.