ios-swiftui

What this skill does

# ios-swiftui

## Purpose
This skill provides expertise in SwiftUI for building declarative UIs in iOS apps, focusing on views, state management, animations, and navigation to streamline development.

## When to Use
Use this skill for iOS projects requiring responsive interfaces, such as apps with dynamic content, user interactions, or complex navigation; ideal for new iOS apps (iOS 13+), prototyping, or migrating from UIKit.

## Key Capabilities
- Create and modify views using structs that conform to the View protocol.
- Manage state with @State for local changes, @Binding for parent-child communication, @ObservedObject for external models, and @EnvironmentObject for app-wide data.
- Implement animations via withAnimation{} and modifiers like .animation(.easeIn).
- Handle navigation with NavigationStack, including stacks, lists, and sheets for multi-screen flows.

## Usage Patterns
To build a SwiftUI view, define a struct conforming to View and use modifiers in the body; for state, wrap variables with @State and update via functions. Pattern: Use @EnvironmentObject for shared data by injecting via .environmentObject() in the app's root view. For lists, apply List{} with ForEach{} for dynamic content. Always preview views with #Preview{} for rapid iteration. To handle sheets, use .sheet(isPresented: $isShowing) {} on a View.

## Common Commands/API
Use @State for local state: `@State private var count: Int = 0` then increment with `Button("Tap") { count += 1 }`.
Apply modifiers like `.padding()` or `.foregroundColor(.blue)` directly on views, e.g., `Text("Hello").padding().background(.yellow)`.
For animations, wrap changes: `withAnimation { self.isAnimating.toggle() }` on a view with `.animation(.default)`.
Navigation example: `NavigationStack { List(items, id: \.id) { item in NavigationLink { DetailView(item: item) } } }`.
Config format: In Xcode, ensure SwiftUI is selected in project settings; import SwiftUI in files.

## Integration Notes
Integrate SwiftUI into an existing iOS project by adding a SwiftUI view to a UIKit app via UIHostingController; set up in code like `let hostingController = UIHostingController(rootView: MySwiftUIView())`. For app-wide objects, pass via .environmentObject() in the @main App struct, e.g., `@main struct App: App { var body: some Scene { WindowGroup { ContentView().environmentObject(MyModel()) } } }`. If API keys are needed (e.g., for networking), load from env vars like `let apiKey = ProcessInfo.processInfo.environment["MY_API_KEY"]` and handle in your observed objects. Ensure iOS deployment target is 13.0+ in Xcode project settings.

## Error Handling
Handle state-related errors by ensuring @State updates occur on the main thread; use DispatchQueue.main.async for async updates, e.g., `DispatchQueue.main.async { self.data = newData }`. For navigation issues, check NavigationStack paths and use .onAppear{} to validate state, e.g., `onAppear { if path.isEmpty { path.append("home") } }`. Common errors: "Cannot use instance member" – fix by making variables @State; log errors with print() or os_log for debugging. If bindings fail, verify the wrapped value is correctly passed, e.g., in child views.

## Concrete Usage Examples
Example 1: Simple counter view – Create a view with @State: `struct CounterView: View { @State var count: Int = 0 var body: some View { VStack { Text("Count: \(count)") Button("Increment") { count += 1 } } } }`. Use in app: `ContentView().environment(\.colorScheme, .dark)`.
Example 2: Navigation with list – Build a list view: `struct ItemList: View { @State var items = [1,2,3] var body: some View { NavigationStack { List(items, id: \.self) { item in Text("Item \(item)") } .navigationTitle("Items") } } }`. Integrate by presenting: `ItemList().sheet(isPresented: $showSheet) { DetailView() }`.

## Graph Relationships
- Related to cluster: mobile (e.g., shares dependencies with android-kotlin skill).
- Links to: swift (for core language features), ios-core (for foundational iOS APIs).
- Dependencies: Requires xcode-tools for building; integrates with firebase-ios for backend services.