react-native-mobile-design

This skill guides creation of distinctive, production-grade React Native mobile applications. Implement real working TypeScript/React Native code with attention to aesthetics, performance, and platform conventions.

## Design Thinking

Before coding, understand context and commit to a design direction:

- **Purpose**: What problem does this app solve? Who uses it?
- **Platform**: iOS, Android, or both? Consider platform-specific patterns.
- **Tone**: Vibrant & playful, calm & professional, bold & expressive, minimal & clean.
- **Design System**: React Native Paper (M3), NativeBase, Tamagui, or custom.

## Recommended Stack

| Category | Recommended | Alternative |
|----------|-------------|-------------|
| **Runtime** | Expo | Bare React Native |
| **Language** | TypeScript | - |
| **State** | Zustand | Redux Toolkit, Jotai |
| **Server State** | TanStack Query | SWR |
| **Navigation** | React Navigation 6+ | Expo Router |
| **Styling** | NativeWind | StyleSheet, Tamagui |
| **UI Library** | React Native Paper | NativeBase |
| **Animations** | Reanimated 3 | Animated API |
| **Lists** | FlashList | FlatList |

## Quick Patterns

### NativeWind Styling
```tsx
<View className="flex-1 bg-white p-4">
  <Text className="text-xl font-bold text-gray-900">Title</Text>
  <Pressable className="bg-blue-500 py-3 px-6 rounded-xl active:opacity-80">
    <Text className="text-white font-semibold text-center">Button</Text>
  </Pressable>
</View>
```

### Zustand Store
```tsx
import { create } from 'zustand';

interface AuthStore {
  user: User | null;
  login: (user: User) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthStore>((set) => ({
  user: null,
  login: (user) => set({ user }),
  logout: () => set({ user: null }),
}));
```

### Navigation Setup
```tsx
const Stack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Home" compo