A production-ready mobile app skeleton built with Expo React Native and TypeScript, featuring comprehensive development tools, state management, and a complete authentication flow.
- 🚀 Expo SDK 53+ with TypeScript 5.4+ and strict type checking
- 📱 Cross-platform support (iOS, Android, Web)
- 🎨 Complete UI System with theme support (light/dark/system modes)
- 🧭 Type-safe Navigation with React Navigation 6
- 🔐 Authentication Flow with secure token management
- 📦 Modern State Management with Zustand stores
- 🛠️ Development Tools including debug menu and performance monitoring
- 🧪 Comprehensive Testing setup with Jest and React Native Testing Library
- 🔧 Code Quality Tools (ESLint, Prettier, Husky)
- 🚀 Production Ready with EAS Build and deployment configuration
- ♿ Accessibility Support with screen reader compatibility
- 🎯 Path Aliases configured for clean imports
src/
├── components/ # Reusable UI components
│ ├── common/ # Generic components (Button, Input, Loading, DevMenu)
│ ├── forms/ # Form-specific components with validation
│ └── examples/ # Example/demo components
├── screens/ # Screen components organized by feature
│ ├── auth/ # Authentication flow screens
│ ├── home/ # Home section screens
│ ├── profile/ # User profile screens
│ ├── settings/ # App settings screens
│ └── debug/ # Development debug screens
├── navigation/ # Navigation configuration and navigators
├── store/ # Zustand state management
│ ├── authStore.ts # Authentication state
│ ├── appStore.ts # App settings and theme
│ └── networkStore.ts # Network connectivity state
├── services/ # API clients and external services
├── hooks/ # Custom React hooks
├── utils/ # Utility functions and helpers
├── theme/ # Theme system and styling utilities
├── types/ # TypeScript type definitions
├── contexts/ # React contexts
├── providers/ # Provider components
├── config/ # App configuration and environment
└── constants/ # App constants and theme tokens
-
Install dependencies:
npm install
-
Start the development server:
npm start
-
Run on specific platforms:
npm run android # Android npm run ios # iOS npm run web # Web
npm run lint- Run ESLintnpm run lint:fix- Fix ESLint issuesnpm run format- Format code with Prettiernpm run type-check- Check TypeScript typesnpm test- Run testsnpm run test:watch- Run tests in watch modenpm run test:coverage- Run tests with coverage
Set up your environment configuration:
# Interactive setup
npm run setup:env
# Or manually copy and edit
cp .env.example .env# Development builds
npm run build:dev
# Staging builds
npm run build:staging
# Production builds
npm run build:prod
# Platform-specific builds
npm run build:android
npm run build:ios
npm run build:all# Validate environment configuration
npm run config:validate development
npm run config:validate staging
npm run config:validate production
# List all environments
npm run config:list# Publish updates to different channels
npm run update:dev
npm run update:staging
npm run update:prod# Submit to app stores
npm run submit:staging # Internal testing
npm run submit:prod # Production releaseThe app supports multiple environments with different configurations:
- Development: Local development with debug tools
- Staging: Pre-production testing environment
- Production: Live app store releases
# API Configuration
EXPO_PUBLIC_API_URL=https://api.example.com
EXPO_PUBLIC_API_VERSION=v1
# App Configuration
EXPO_PUBLIC_APP_ENV=development
EXPO_PUBLIC_DEBUG_MODE=true
# EAS Project Configuration
EXPO_PUBLIC_EAS_PROJECT_ID=your-project-id-here# Analytics and Monitoring
EXPO_PUBLIC_ANALYTICS_ID=your-analytics-id
EXPO_PUBLIC_SENTRY_DSN=your-sentry-dsnFor detailed configuration information, see Configuration Guide and Build & Deployment Guide.
- State Management: Zustand stores with persistence and TypeScript support
- Navigation: Type-safe React Navigation with authentication flow
- Theme System: Comprehensive theming with light/dark/system modes
- Error Handling: Global error boundaries with crash reporting
- Performance: Lazy loading, memory management, and optimization utilities
- Debug Menu: In-app debugging interface (development only)
- Performance Monitoring: Memory usage and performance tracking
- Network Monitoring: API request/response logging
- State Inspection: Real-time state debugging
- Crash Reporting: Error tracking and reporting utilities
- 📖 Architecture Guide - System architecture and design patterns
- 🏪 Store Documentation - Zustand state management architecture and patterns
- 🧩 Components Documentation - Complete component library reference
- 🛠️ Development Tools - Debugging and development utilities
- 🧪 Testing Guide - Comprehensive testing setup and utilities
- 🧪 Test Server - Mock API server for testing integrations
- 🌐 Services & API - API integration and services layer
- 🔧 Utils & Hooks - Utility functions and custom hooks
- 📝 Types Documentation - TypeScript type system and definitions
- 🎨 Assets Guide - Asset management and optimization
- 📜 Scripts Guide - Build scripts and automation utilities
- ⚙️ Configuration Guide - Environment and build configuration
- 🚀 Build & Deployment - Build and deployment processes
- 🔄 Migration Summary - Redux to Zustand migration details
- ✅ Final Integration - Integration completion status
- 📝 Recent Updates - Latest improvements and changes (v1.2.3 - TypeScript 5.4+ and Enhanced ESLint Configuration)
This project maintains high code quality with:
- TypeScript with strict mode enabled
- ESLint for code linting with React Native rules
- Prettier for consistent code formatting
- Husky for pre-commit hooks
- Jest for unit and integration testing
- React Native Testing Library for component testing
Pre-commit hooks automatically run linting, formatting, and type checking.