gh-cskiro-claudex/skills/devops/react-project-scaffolder/modes/mobile.md

Mode 3: Mobile (Expo + React Native)

Purpose: Cross-platform mobile apps with production-ready tooling

Setup Time: ~60 seconds after npm install

Tech Stack

• Expo SDK 50+ (managed workflow)
• React Native (latest stable)
• TypeScript (strict mode)
• Jest + React Native Testing Library
• ESLint + Prettier + Husky
• EAS Build (optional)

Configuration Strategy: 2-3 key questions, smart defaults

Configuration Questions

1. "Include testing setup?" (default: yes)
2. "Include CI/CD for EAS?" (default: no)
3. "Navigation library?" (default: Expo Router)

Workflow Steps

1. Scaffold with Expo

npx create-expo-app {project-name} --template expo-template-blank-typescript
cd {project-name}

2. Apply TypeScript Strict Mode

• Update tsconfig.json with strict settings
• Configure path aliases for React Native
• Enable all type checking flags

3. Set Up Testing (if selected)

• Install Jest, React Native Testing Library
• Create jest.config.js for React Native
• Add example test
• Configure 80% coverage threshold
• Add test scripts:

  "test": "jest --maxWorkers=2",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage"
  

4. Configure Linting & Formatting

• Install ESLint with React Native rules
• Add Prettier configuration
• Set up Husky + lint-staged
• Configure pre-commit hooks

5. Set Up Navigation (Expo Router)

npx expo install expo-router

• Create app/ directory structure
• Set up root layout
• Add example screens

6. Initialize Git

git init
git add .
git commit -m "feat: initial Expo + React Native setup"

7. Provide Next Steps

## Your Mobile Project is Ready!

Start development:
  cd {project-name}
  npm install
  npx expo start

Project structure:
  app/
    ├── _layout.tsx       # Root layout
    ├── index.tsx         # Home screen
    └── [screen].tsx      # Dynamic routes
  components/             # Reusable components
  __tests__/              # Test files

Available commands:
  npx expo start         # Start development
  npx expo start --ios   # iOS simulator
  npx expo start --android  # Android emulator
  npm run test           # Run tests
  npm run lint           # Lint code

Configured features:
  ✓ TypeScript strict mode
  ✓ Expo Router navigation
  ✓ Jest + RNTL testing
  ✓ ESLint + Prettier
  ✓ 80% coverage threshold

Next steps:
  1. Run on device: npx expo start --tunnel
  2. Add more screens in app/
  3. Configure app.json for store submission
  4. Set up EAS Build for production

When to Use

• Cross-platform iOS/Android apps
• Quick mobile prototypes
• Apps using Expo managed workflow
• Teams familiar with React wanting mobile