React Native vs Swift vs Kotlin: When to Use Each

# React Native vs Swift vs Kotlin: When to Use Each

### Author: Son Nguyen

> Date: 2025-03-23

Mobile app development requires balancing rapid iteration with deep platform integration. In this article, we dive into every facet of mobile development - from how the frameworks work under the hood to code‑level examples you can run today. We compare:

- **React Native:** A JavaScript‑based cross‑platform framework using a native bridge (or Fabric in the latest versions) with Hermes or JavaScriptCore.
- **Swift:** Apple’s native language using SwiftUI (or UIKit) for high‑performance iOS apps.
- **Kotlin:** Android’s native language leveraging Jetpack Compose (or traditional XML layouts) with powerful coroutine support.

---

## 1. Architectural Deep Dive

### React Native

React Native leverages a JavaScript engine (Hermes on Android or JavaScriptCore on iOS) that runs your app’s business logic. It then communicates with native UI components via a bridge. In its latest iteration (Fabric), the bridge is re‑architected to allow synchronous layout updates.

#### Key Components:

- **JS Thread:** Runs your JavaScript code.
- **Bridge:** Serializes data between JavaScript and native code.
- **Native Modules:** Perform operations like networking and file I/O.

**Example: A simple React Native counter (with hooks)**

```
// App.tsx

export default function App() {
const [count, setCount] = useState(0);
return (
<SafeAreaView style={styles.container}>
<Text style={styles.text}>You clicked {count} times</Text>
setCount((c) => c + 1)} />
</SafeAreaView>
);
}

const styles = StyleSheet.create({
container: { flex: 1, justifyContent: "center", alignItems: "center" },
text: { fontSize: 20, marginBottom: 10 },
});
```

### Swift (iOS Native)

Swift compiles ahead-of‑time (AOT), and with SwiftUI, you write declarative UI code that the compiler converts into efficient render trees. Swift’s concurrency model with `async/await` and actors is built into the language.

#### Key Components:

- **SwiftUI:** Declarative UI framework that efficiently diff‑computes UI updates.
- **Concurrency:** Uses `async/await` to write clear asynchronous code.
- **ABI Stability:** Since Swift 5.0, providing robust performance.

**Example: A SwiftUI counter app**

```
// ContentView.swift
import SwiftUI

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

var body: some View {
VStack {
Text("You clicked \(count) times")
.font(.title)
.padding()
Button("Increment") {
count += 1
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
}
}
```

### Kotlin (Android Native)

Kotlin for Android, especially with Jetpack Compose, offers a modern approach to building UIs. Compose compiles Kotlin code into an efficient UI runtime, while coroutines enable smooth asynchronous programming.

#### Key Components:

- **Jetpack Compose:** Declarative UI toolkit that transforms Kotlin code into UI components.
- **Coroutines & Flow:** For reactive and asynchronous programming.
- **ART (Android Runtime):** Optimized for native performance.

**Example: A Jetpack Compose counter app**

```
// MainActivity.kt
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
CounterApp()
}
}
}

@Composable
fun CounterApp() {
var count by remember { mutableStateOf(0) }
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "You clicked $count times", style = MaterialTheme.typography.h5)
Spacer(modifier = Modifier.height(16.dp))
Button(onClick = { count++ }) {
Text(text = "Increment")
}
}
}
```

---

## 2. Performance & Profiling Benchmarks

We ran our tests on the following devices:

- **iOS:** iPhone 13 Pro (iOS 17)
- **Android:** Pixel 7 Pro (Android 14)

**Test Metrics:**

- **Cold Launch Time:** Measured from app start until the first rendered frame.
- **Warm Launch Time:** Time to re‑open the app.
- **CPU Intensive Task:** Execution time for a loop running 10M operations.
- **UI Responsiveness:** Average frame time when scrolling a list of 1000 items.
- **Memory Footprint:** Peak Resident Set Size (RSS).
- **Battery Impact:** Percentage drop over one hour idle.