expo-perfect-scaffold

An automated CLI scaffolding utility designed for Expo SDK 56 to immediately set up a perfect, production-ready routing environment using Expo Router, Zustand, and TanStack React Query.

This scaffolding utility is optimized to comply with the latest React Compiler specs (available in SDK 56). It automatically configures routing, state management, and basic UI components without containing any specific UI business logic, making it ideal for live coding sessions, coding interviews, and rapid prototyping.

Features

• ⚡ Auto-configuration: Configures metro.config.js, tsconfig.json, app.json, and package.json entry points/scripts.
• 🔐 Protected Routing Groups: Set up pre-configured auth groups ((auth) and (app)) with built-in routing guards and loaders.
• 📦 React Compiler Selector Patches: Replaces HOC-style selectors with compiler-compatible standard functional selectors to prevent hooks queue ordering bugs.
• 📑 Ready-to-Use Examples:
  • Auth layout and Login Screen: Validations, loading states, and login API mutations.
  • App layout and Home Screen: A clean Welcome page dashboard that renders upon successful authentication.
  • Zustand Auth Store: Async session restoration from AsyncStorage with automatic hydration.

Quick Start

In the root of your existing React Native / Expo SDK 56 project, run:

npx expo-perfect-scaffold

This will:

1. Update package.json entry point ("main": "expo-router/entry") and add the essential dependencies.
2. Update app.json with required config plugins and URL schemes.
3. Generate standard metro.config.js and tsconfig.json files.
4. Copy functional example components, screens, stores, and utilities inside the src/ folder.

After running the command:

1. Install the added dependencies:

   npm install

2. Start the bundler with a clean cache:

   npx expo start -c

File Structure Generated

src/
├── app/
│   ├── _layout.tsx                     # Root providers wrapper (QueryClient, SafeArea, GestureHandler)
│   ├── (auth)/
│   │   ├── _layout.tsx                 # Redirect guard: sends logged-in users to "/"
│   │   └── login.tsx                   # Example Login Screen (with Mock flow for quick start)
│   └── (app)/
│       ├── _layout.tsx                 # Redirect guard: sends guests to "/login"
│       └── index.tsx                   # Generic Dashboard / Welcome Screen
├── api/
│   └── authApi.ts                      # Generic login API requests using axios & react-query
├── components/
│   ├── Button.tsx                      # Modular pressable buttons (primary, secondary)
│   ├── Input.tsx                       # Controlled form text inputs with error states
│   └── Loader.tsx                      # Activity indicator loading overlay
├── core/
│   └── auth/
│       └── utils.ts                    # AsyncStorage key-value tokens helper
├── store/
│   ├── auth.ts                         # Zustand state for tokens & session hydration
│   └── createSelectors.ts              # Custom selectors utility
└── utils/
    └── helpers.ts                      # Shared helper utilities (error parsers, formatters)

License

MIT