mobile

Mobile — React Native + Expo

This command is part of the VibeHarness framework. Verify stack matches PROJECT_RULES.md. Record architecture decisions in docs/ai-dev/.

Mobile stack for building non-developer MVPs as native apps. Mobile app projects only.

Tech Stack

• React Native: Cross-platform native apps (iOS + Android)
• Expo: Managed workflow — no Xcode/Android Studio setup needed
• Expo Router: File-based navigation (like Next.js App Router)
• TypeScript: Type safety
• NativeWind: Tailwind CSS for React Native

Initial Setup

npx create-expo-app@latest my-app --template blank-typescript
cd my-app
npx expo install expo-router expo-linking expo-constants
npx expo install nativewind tailwindcss

Configure NativeWind (tailwind.config.js):

module.exports = {
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  presets: [require('nativewind/preset')],
  theme: { extend: {} },
  plugins: [],
};

Add to babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
      'nativewind/babel',
    ],
  };
};

Directory Structure

app/
├── _layout.tsx           # Root layout (navigation)
├── index.tsx             # Home screen
├── (tabs)/
│   ├── _layout.tsx       # Tab navigator
│   ├── home.tsx
│   └── profile.tsx
├── (auth)/
│   ├── login.tsx
│   └── signup.tsx
└── [id].tsx              # Dynamic route
components/
├── ui/                   # Reusable UI components
└── {feature}/            # Feature-specific components
lib/
├── api.ts                # API client (fetch)
└── storage.ts            # AsyncStorage helpers
types/
└── index.ts              # Shared types

Component Principles

• One component = one role. Split if over 150 lines
• Use React Native core components first (View, Text, Pressable, FlatList)
• Define props with TypeScript interfaces
• State management: useState/useReducer first, Zustand if complex
• HTTP requests: use built-in fetch only. Do NOT install Axios
• Navigation: Expo Router (file-based)