KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #ai-agent #developer-tools #claude-code #codex #deepseek-harness #ai-agents #cli #react #mcp

expo-router-starter-kit

★ 5 Open GitHub ↗

No description available.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Expo Router Starter Kit

A production-inspired Expo Router starter kit for building mobile apps with a clean folder structure, reusable UI, theme tokens, i18n, mock auth, and infrastructure examples.

This template is intentionally generic. It is not a finished product app. It is a starting point you can clone, rename, and extend with your own features.

## Why This Exists

Expo Router makes navigation simple, but an app can still become messy if routes, screens, components, hooks, config, and business logic all live in the wrong places.

This starter kit gives you a practical structure for apps that need:

- public and protected route groups
- native tabs
- mock authentication flow
- reusable UI components
- persisted light/dark/system theme mode
- persisted language preference
- basic config, storage, analytics, notifications, and toast examples
- a component gallery you can replace with your own product modules

## Tech Stack

- Expo SDK 56
- Expo Router
- React 19
- React Native 0.85
- TypeScript
- Expo Symbols
- Expo Localization
- Sonner Native
- ESLint with Expo config

## Getting Started

Install dependencies:

```sh
npm install
```

Start the development server:

```sh
npm run start
```

Then choose where to run the app:

```sh
npm run ios
npm run android
npm run web
```

Run checks before opening a pull request or publishing changes:

```sh
npm run check
```

You can also run them separately:

```sh
npm run typecheck
npm run lint
```

## Project Structure

```txt
src/app/          Expo Router routes and layouts
src/features/     feature modules and screen implementations
src/components/   shared UI components
src/theme/        colors, spacing, radius, typography, and theme provider
src/constants/    stable app-level values
src/config/       runtime config and feature flags
src/providers/    app-wide provider composition
src/hooks/        shared hooks
src/lib/          API, storage, analytics, notifications, toast
src/i18n/         translations and language provider
src/utils/        pure helper functions
src/types/        shared TypeScript types
tests/            lightweight test examples
docs/             structure notes
```

## Architecture Rules

- `src/app/` is for routes and layouts only.
- `src/features/` is for feature-specific screens, hooks, components, and local logic.
- `src/components/ui/` is for reusable UI primitives.
- `src/lib/` is for infrastructure code such as storage, API clients, analytics, notifications, and toast helpers.
- `src/theme/` owns design tokens and app theme resolution.
- `src/i18n/` owns translations and locale selection.

The route files intentionally stay thin. They point to screen components inside feature modules, so routing and business logic do not collapse into the same folder.

## Included Examples

### Routing

- `(auth)` public route group
- `(main)` protected app route group
- `(tabs)` native tab layout
- `/components` gallery route
- minimal root auth boundary using `Stack.Protected`

### Authentication

The auth flow uses mock credentials and a persisted session. Replace the current mock session provider with your real auth provider when you connect a backend.

Files to start with:

- `src/features/auth/auth-session.tsx`
- `src/features/auth/hooks/use-auth-form.ts`
- `src/features/auth/screens/login.tsx`
- `src/features/auth/screens/signup.tsx`

### UI Components

The starter includes common UI primitives:

- `Button`
- `IconButton`
- `Input`
- `Card`
- `Badge`
- `Alert`
- `Avatar`
- `ListRow`
- `ToggleRow`
- `CheckboxRow`
- `SegmentedControl`
- `ProgressBar`
- `LoadingIndicator`
- `EmptyState`
- `AppToaster`

Open the `/components` tab in the app to see examples of these components in use.

### Theme

The theme system supports:

- light mode
- dark mode
- system mode
- persisted user preference
- shared color, spacing, radius, motion, and typography tokens

The visual direction is inspired by calm product design systems: white surfaces, green-tinted neutral backgrounds, strong readable text, and restrained action colors.

### Internationalization

The i18n setup supports:

- English and Spanish dictionaries
- English as the default language
- persisted manual locale selection
- typed translation keys

Start here:

- `src/i18n/i18n-provider.tsx`
- `src/i18n/translations/en.ts`
- `src/i18n/translations/es.ts`

### Infrastructure Examples

The `src/lib/` folder includes small examples for:

- API calls
- analytics events
- notifications
- app storage
- toast helpers

These examples are intentionally lightweight. They show where infrastructure code should live without forcing a specific backend or vendor.

## Customizing This Template

After cloning, you will usually want to:

1. Rename the app in `app.json`.
2. Update the bundle identifiers when you add native build config.
3. Replace mock auth with your real auth provider.
4. Replace `features/component-showcase` with your first real feature.
5. Update translations inside `src/i18n/translations`.
6. Adjust tokens in `src/theme` to match your brand.
7. Replace placeholder assets in `assets/images`.

If you want to strip the example app down to a blank route, run:

```sh
npm run reset-project
```

## Contributing

Contributions are welcome. A good contribution improves the starter without making it too specific to one product.

Good contribution ideas:

- better documentation
- small UI component improvements
- accessibility fixes
- Expo Router structure improvements
- theme or i18n refinements
- bug fixes

Please keep dependencies minimal and prefer Expo-supported packages when possible.

See [CONTRIBUTING.md](./CONTRIBUTING.md) for the contribution flow.

## Creator

Created and maintained by **Code with Nomi**.

For business inquiries, contact **business@codelinx.net** or visit **codelinx.net**.

## License

MIT

expo-router-starter-kit

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README