@hieuvh301195/rn-expo-template

A comprehensive React Native Expo template with TypeScript, Redux, i18n, theming, and 100% test coverage.

Quick Start

Create a new project using this template:

npx create-expo-app@latest my-awesome-app --template @hieuvh301195/rn-expo-template

Then:

cd my-awesome-app
yarn install
yarn start

After Creating Your Project

1. Update app.json with your app details:

   • name: Your app display name
   • slug: Your app slug (lowercase, no spaces)
   • ios.bundleIdentifier: Your iOS bundle ID (e.g., com.yourcompany.myapp)
   • android.package: Your Android package name (e.g., com.yourcompany.myapp)
   • scheme: Your app deep link scheme

2. Set up environment variables:

   cp .env.example .env
   # Edit .env with your values

3. Install Husky hooks:

   yarn prepare

4. Run the app:

   yarn start

Features

• Expo Router: File-based routing with drawer navigation
• Authentication: Login & Register screens with form validation
• Todo Management: Todo list with filter tabs (All, New, Done)
• Drawer Navigation: User profile, settings access, app version
• Settings: Language switching (EN/VI), Theme switching (Light/Dark)
• State Management: Redux Toolkit with typed hooks
• API Layer: Axios with interceptors for logging and error handling
• Internationalization: i18next with English and Vietnamese
• Theming: Light and Dark theme support with ThemeProvider
• Performance: Memoization with useMemo, useCallback, and memo
• Testing: Jest with 100% coverage requirement (104 tests)
• Code Quality: ESLint, Prettier, Husky pre-commit hooks

Project Structure

your-app/
├── __tests__/                 # Test files
│   ├── components/            # Component tests
│   ├── hooks/                 # Hook tests
│   ├── services/              # Service tests
│   ├── store/                 # Redux store tests
│   └── utils/                 # Utility tests
├── app/                       # Expo Router screens
│   ├── _layout.tsx            # Root layout (providers)
│   ├── index.tsx              # Entry redirect
│   ├── (auth)/                # Auth route group
│   │   ├── _layout.tsx        # Auth stack layout
│   │   ├── login/             # Login screen
│   │   └── register/          # Register screen
│   └── (main)/                # Main route group (drawer)
│       ├── _layout.tsx        # Drawer layout
│       ├── home/              # Home screen
│       └── settings/          # Settings screen
├── src/
│   ├── api/                   # API layer (Axios client, endpoints)
│   ├── components/            # Reusable components
│   │   ├── atoms/             # Basic components (Button, Input)
│   │   ├── molecules/         # Composed components (TodoItem)
│   │   └── organisms/         # Complex components (TodoList)
│   ├── hooks/                 # Custom hooks
│   ├── i18n/                  # Internationalization
│   ├── store/                 # Redux store
│   ├── theme/                 # Theme configuration
│   └── types/                 # TypeScript types
├── docs/                      # Documentation
└── package.json

Available Scripts

| Command | Description | | -------------------- | ----------------------------- | | yarn start | Start Expo development server | | yarn android | Run on Android | | yarn ios | Run on iOS | | yarn web | Run on Web | | yarn test | Run tests | | yarn test:coverage | Run tests with coverage | | yarn lint | Run ESLint | | yarn lint:fix | Fix ESLint issues | | yarn format | Format code with Prettier | | yarn typecheck | TypeScript type checking |

Documentation

• Architecture Guide - System design and layers
• Coding Conventions - Code style and patterns
• Contributing Guide - How to add features
• Quick Reference - One-page cheat sheet
• AI Context - Essential context for AI maintainers

Tech Stack

• Framework: React Native with Expo SDK 53
• Routing: Expo Router (file-based)
• State Management: Redux Toolkit
• Styling: React Native StyleSheet with ThemeProvider
• i18n: i18next + react-i18next
• HTTP Client: Axios
• Testing: Jest + React Native Testing Library
• Linting: ESLint + Prettier
• Git Hooks: Husky + lint-staged

Publishing Template (For Maintainers)

To publish or update the template:

# Login to npm
npm login

# Publish
npm publish --access public

License

MIT