🚀 Expo Template

Production-ready шаблон для React Native приложений

Версия: 11.02.2026 (v3)

---

📖 О проекте

Этот шаблон создан для быстрого разворачивания мобильных приложений на основе Expo + React Native.
Включает все необходимые библиотеки для продакшена, готовый UI-kit с поддержкой темной темы и архитектуру FSD.

✨ Ключевые особенности

• 🎨 Готовый UI-kit с светлой и темной темой
• 🌍 Локализация (i18next) из коробки
• 🔔 Уведомления Готовые Push-уведомления на основе FCM/APN токенов и Firebase
• 🏗️ FSD архитектура для масштабируемости
• 📱 Навигация с табами и модальными окнами
• 🔄 State Management (Zustand + React Query)
• 🎯 TypeScript с полной типизацией
• 📝 Формы с валидацией (React Hook Form + Zod)

👥 Авторы

• @roso1nik — Core Architecture
• @maofao — UI Kit & Design

🛠️ Технологический стек

Core

• Expo v54
• React Native v0.81
• React v19.1
• TypeScript

State & Data

• @tanstack/react-query — серверное состояние и кэширование
• zustand — клиентское состояние
• axios — HTTP клиент

Forms & Validation

• react-hook-form — управление формами
• zod — схемы валидации

UI & Styling

• expo-image — оптимизированные изображения
• lucide-react-native — иконки
• @expo/vector-icons — векторные иконки
• @gorhom/bottom-sheet — bottom sheets
• react-native-keyboard-controller — управление клавиатурой

Utilities

• dayjs — работа с датами
• i18next & react-i18next — интернационализация
• @legendapp/list — производительные списки

Push Notifications

Based on FCM/APNs tokens with firebase

---

🚀 Быстрый старт

Установка зависимостей

npm install

Запуск в режиме разработки

npx expo start

Используйте Expo Go на телефоне или запустите на эмуляторе:

• Нажмите a для Android
• Нажмите i для iOS
• Отсканируйте QR-код в Expo Go

Сборка для продакшена

npm run prebuild

После этого можно собрать нативные приложения:

# Android
npx expo run:android

# iOS
npx expo run:ios

---

📁 Структура проекта (FSD)

📦 epxo-template
├── 📂 app/                    # 🔀 Роутинг и навигация
│   ├── _layout.tsx           # Root layout
│   ├── signIn.tsx            # Экран входа
│   ├── (modal)/              # Модальные окна
│   │   ├── notifications.tsx
│   │   └── settings.tsx
│   └── (tabs)/               # Табы навигации
│       ├── _layout.tsx
│       ├── index.tsx
│       └── profile.tsx
│
├── 📂 entities/               # 📊 Бизнес-сущности
│   └── index.ts              # (user, post, comment и т.д.)
│                             # Структура: api, model, ui, utils, hooks
│
├── 📂 features/               # ⚙️ Бизнес-логика
│   ├── index.ts
│   └── settings/
│       └── index.tsx
│
├── 📂 widgets/                # 🧩 Композитные компоненты
│   ├── cards.tsx
│   ├── notFound.tsx
│   ├── themeToggle.tsx
│   └── index.ts
│
└── 📂 shared/                 # 🔧 Переиспользуемые ресурсы
    ├── api/                  # API конфигурация
    ├── assets/               # Статичные ресурсы
    ├── config/               # Конфигурация приложения
    │   ├── app.ts            # Версия и настройки
    │   ├── api-query-keys.ts
    │   ├── storage-keys.ts
    │   └── global-dictionary.ts
    ├── const/                # Константы
    ├── hooks/                # Переиспользуемые хуки
    │   ├── use-color-scheme.ts
    │   ├── useDebounce.ts
    │   ├── useSortField.ts
    │   └── useCheckAppVersion.ts
    ├── i18n/                 # 🌍 Интернационализация
    │   ├── translations/
    │   │   ├── en.json
    │   │   └── ru.json
    │   └── hooks/
    ├── libs/                 # Библиотеки (dayjs и др.)
    ├── notifications/        # Push-Notifications
    ├── providers/            # React провайдеры
    ├── styles/               # 🎨 Темы и цвета
    │   ├── colors.ts
    │   └── useThemeColor.ts
    ├── types/                # TypeScript типы
    ├── ui/                   # 🎨 UI-kit компоненты
    │   ├── button.tsx
    │   ├── input.tsx
    │   ├── typography.tsx
    │   └── index.ts
    └── utils/                # Утилиты

---

🎯 Основные возможности

🎨 UI Kit

Готовые компоненты с поддержкой темной темы:

• Button — кнопки с вариантами
• Input — инпуты с валидацией
• Typography — типографика
• ThemeToggle — переключатель темы

import { Button, Input, Typography } from '@/shared/ui'
;<Button variant="primary" onPress={handlePress}>
    Нажми меня
</Button>

🌍 Локализация

Поддержка нескольких языков из коробки:

import { useTranslation } from '@/shared/i18n'

const { t } = useTranslation()
;<Text>{t('welcome.title')}</Text>

---

🔔 Push-уведомления

Подробнее: shared/notifications/README.md

⚙️ Конфигурация

Версия приложения

Обновляется в трех местах:

• shared/config/app.ts
• app.json
• package.json

Навигация

Настройка роутинга в директории app/:

• Табы — (tabs)/
• Модальные окна — (modal)/

Темы и цвета

Настройка в shared/styles/colors.ts:

export const colors = {
    light: {
        /* светлая тема */
    },
    dark: {
        /* темная тема */
    }
}

---

📚 Полезные команды

# Запуск с очисткой кэша
npx expo start --clear

# Обновление зависимостей
npx expo install --fix

# Проверка типов
npx tsc --noEmit

# Генерация нативных файлов
npx expo prebuild

📄 Лицензия

Этот проект доступен для свободного использования.

Сделано с ❤️ для React Native сообщества