mobile

# Mobile Development

Build native-quality mobile apps with React Native and Expo.

## Quick Reference

### Expo SDK 53+ (2026 Standard)

**New Architecture is DEFAULT** - No opt-in required.

```bash
# Create new project
npx create-expo-app@latest my-app
cd my-app
npx expo start
```

**Key Changes:**

- Hermes engine default (JSC deprecated)
- Fabric renderer + Bridgeless mode
- All `expo-*` packages support New Architecture
- `expo-video` replaces `expo-av` for video
- `expo-audio` replaces `expo-av` for audio

### Project Structure

```
app/
├── (tabs)/           # Tab navigation group
│   ├── index.tsx     # Home tab
│   ├── profile.tsx   # Profile tab
│   └── _layout.tsx   # Tab layout
├── [id].tsx          # Dynamic route
├── _layout.tsx       # Root layout
└── +not-found.tsx    # 404 page
```

### Navigation (Expo Router)

```tsx
// app/_layout.tsx
import { Stack } from "expo-router";

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="modal" options={{ presentation: "modal" }} />
    </Stack>
  );
}
```

**Deep Linking**

```tsx
// Navigate programmatically
import { router } from "expo-router";
router.push("/profile/123");
router.replace("/home");
router.back();
```

### Native Modules (New Architecture)

**Turbo Modules** - Synchronous, type-safe native access:

```tsx
// specs/NativeCalculator.ts
import type { TurboModule } from "react-native";
import { TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
  multiply(a: number, b: number): number;
}

export default TurboModuleRegistry.getEnforcing<Spec>("Calculator");
```

### Styling

**NativeWind (Tailwind for RN)**

```tsx
import { View, Text } from "react-native";

export function Card() {
  return (
    <View className="bg-white rounded-xl p-4 shadow-lg">
      <Text className="text-lg font-bold text-gray-900">Title</Text>
    </View>
  );
}
```

### State Management