mobile-development-skill

What this skill does

# Mobile Development Skill

Build powerful mobile applications across iOS, Android, and cross-platform platforms.

## Quick Start

### Choose Your Platform

```
Native Only              Cross-Platform
├─ iOS (Swift)          ├─ React Native
├─ Android (Kotlin)     └─ Flutter
```

### Decision Matrix

|  | iOS | Android | React Native | Flutter |
|---|---|---|---|---|
| **Learning Curve** | Medium | Medium | Easy (know JS) | Medium |
| **Performance** | Excellent | Excellent | Very Good | Excellent |
| **Code Sharing** | None | None | 70% | 80%+ |
| **Market Share** | 25% | 72% | Common | Growing |
| **Team Skills** | Xcode, Swift | Android Studio, Kotlin | JS/React | Dart |

---

## iOS Development

### **Swift Fundamentals**

```swift
// Variables and types
var name: String = "Alice"
let age: Int = 30  // immutable

// Optionals (handle nil safely)
var email: String? = nil
if let email = email {
    print("Email: \(email)")
}

// Functions
func greet(_ name: String) -> String {
    return "Hello, \(name)!"
}

// Classes vs Structs
class Person {
    var name: String
    init(name: String) {
        self.name = name
    }
}

struct Address {
    var street: String
    var city: String
}

// Extensions (add methods to existing types)
extension String {
    func capitalized() -> String {
        return self.prefix(1).uppercased() + self.dropFirst()
    }
}
```

### **SwiftUI (Modern Approach)**

```swift
import SwiftUI

struct ContentView: View {
    @State private var count = 0
    @State private var name: String = ""

    var body: some View {
        VStack(spacing: 20) {
            Text("Hello, World!")
                .font(.title)
                .foregroundColor(.blue)

            TextField("Enter name", text: $name)
                .textFieldStyle(.roundedBorder)
                .padding()

            Button(action: { count += 1 }) {
                Text("Count: \(count)")
                    .font(.headline)
                    .foregroundColor(.white)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .cornerRadius(10)
            }

            List {
                ForEach(0..<5, id: \.self) { index in
                    Text("Item \(index)")
                }
            }
        }
        .padding()
    }
}

// Preview
#Preview {
    ContentView()
}
```

### **iOS Lifecycle & Navigation**

```swift
// App Delegate (lifecycle)
@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

// Navigation
NavigationStack {
    VStack {
        NavigationLink(value: 42) {
            Text("Go to Details")
        }
    }
    .navigationDestination(for: Int.self) { id in
        DetailView(id: id)
    }
}
```

### **Networking & Async/Await**

```swift
struct User: Codable {
    let id: Int
    let name: String
    let email: String
}

// MVVM Pattern
@MainActor
class UserViewModel: ObservableObject {
    @Published var users: [User] = []
    @Published var isLoading = false
    @Published var error: String?

    func fetchUsers() async {
        isLoading = true
        defer { isLoading = false }

        do {
            let url = URL(string: "https://api.example.com/users")!
            let (data, _) = try await URLSession.shared.data(from: url)
            users = try JSONDecoder().decode([User].self, from: data)
        } catch {
            self.error = error.localizedDescription
        }
    }
}

// Use in View
struct UserListView: View {
    @StateObject private var viewModel = UserViewModel()

    var body: some View {
        List(viewModel.users) { user in
            VStack(alignment: .leading) {
                Text(user.name).font(.headline)
                Text(user.email).font(.caption)
            }
        }
        .task {
            await viewModel.fetchUsers()
        }
    }
}
```

---

## Android Development

### **Kotlin Fundamentals**

```kotlin
// Variables
var name: String = "Alice"
val age: Int = 30  // immutable

// Nullable types
var email: String? = null
email?.let { println(it) }  // Safe call

// Functions
fun greet(name: String): String = "Hello, $name!"

// Data classes
data class User(val id: Int, val name: String, val email: String)

// Extension functions
fun <T> List<T>.printAll() {
    forEach { println(it) }
}

// Higher-order functions
val numbers = listOf(1, 2, 3, 4, 5)
numbers
    .filter { it > 2 }
    .map { it * 2 }
    .forEach { println(it) }
```

### **Jetpack Compose (Modern UI)**

```kotlin
import androidx.compose.material3.*
import androidx.compose.runtime.*

@Composable
fun UserProfile(userId: String) {
    var user by remember { mutableStateOf<User?>(null) }
    var isLoading by remember { mutableStateOf(true) }

    LaunchedEffect(userId) {
        user = fetchUser(userId)
        isLoading = false
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text("Profile") }) }
    ) { padding ->
        Box(modifier = Modifier.padding(padding)) {
            when {
                isLoading -> CircularProgressIndicator()
                user != null -> {
                    Column {
                        Text(user!!.name, style = MaterialTheme.typography.headlineMedium)
                        Text(user!!.email)
                    }
                }
            }
        }
    }
}

@Preview
@Composable
fun PreviewUserProfile() {
    UserProfile("123")
}
```

### **Android Lifecycle & Architecture**

```kotlin
// MVVM with LiveData
class UserViewModel : ViewModel() {
    private val _users = MutableLiveData<List<User>>()
    val users: LiveData<List<User>> = _users

    fun loadUsers() {
        viewModelScope.launch {
            try {
                val data = apiService.getUsers()
                _users.value = data
            } catch (e: Exception) {
                // Handle error
            }
        }
    }
}

// Activity
class MainActivity : AppCompatActivity() {
    private val viewModel: UserViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewModel.users.observe(this) { users ->
            adapter.submitList(users)
        }

        viewModel.loadUsers()
    }
}
```

### **Networking with Retrofit**

```kotlin
interface ApiService {
    @GET("users")
    suspend fun getUsers(): List<User>

    @POST("users")
    suspend fun createUser(@Body user: User): User

    @GET("users/{id}")
    suspend fun getUser(@Path("id") id: Int): User
}

// Dependency Injection (Hilt)
@Module
@InstallIn(SingletonComponent::class)
object NetworkModule {
    @Provides
    fun provideApiService(): ApiService {
        return Retrofit.Builder()
            .baseUrl("https://api.example.com/")
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(ApiService::class.java)
    }
}
```

---

## React Native

### **Setup & Basics**

```javascript
import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';

export default function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {
      const response = await fetch('https://api.example.com/users');
      const data = await response.json();
      setUsers(data);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <ScrollView>
      {loading ? (
        <Text>Loading...</Text>
      ) : (
        users.map(user => (
          <TouchableOpacity key={user.id}>
            <Text>{user.name}</Text>
          </TouchableOpacity>
        ))
      )}
    </ScrollView>
  );
}
```

### **Navigation (React Navigation)**

```javascript
import { NavigationC