Как создать приложение для медитации на Expo Router: полный гайд от freeCodeCamp.org

В новом обучающем курсе от платформы freeCodeCamp.org разработчик Стивен Гарсия (Steven Garcia) детально разбирает процесс создания мобильного приложения для медитации. Проект строится на стеке React Native и Expo Router с использованием TypeScript и NativeWind для стилизации, предлагая разработчикам среднего уровня освоить современные подходы к кроссплатформенной разработке .

🛠 Подготовка окружения и запуск проекта 3:41

Перед началом работы Стивен Гарсия подчеркивает, что данный курс не предназначен для абсолютных новичков и предполагает знание основ веб-разработки: JavaScript, React и Tailwind CSS . Для локальной разработки автор рекомендует использовать симуляторы: Xcode для iOS (только на macOS) и Android Studio для Android .

Основные шаги по настройке среды:

Xcode: Установка через App Store, проверка наличия Command Line Tools в настройках (Locations) .
Android Studio: Установка SDK (версия Android 14 на момент записи), компонентов Android Emulator и SDK Platform-Tools .
VS Code: Установка расширений Prettier, ES7+ React/Redux/React Native snippets, Expo Tools и Tailwind CSS IntelliSense .

Инициализация проекта выполняется командой npx create-expo-app@latest. Автор называет проект simple-meditation . После установки зависимостей проект запускается через npx expo start --clear, что генерирует QR-код для тестирования в приложении Expo Go или позволяет запустить симулятор нажатием клавиш i (iOS) или a (Android) .

📂 Архитектура и файловый роутинг в Expo Router 11:41

Expo Router привносит в мобильную разработку привычную по Next.js концепцию файлового роутинга. По мнению Стивена Гарсии, это значительно упрощает навигацию в приложении .

Структура проекта после очистки от бойлерплейта:

Директория app: Содержит основные экраны и файлы макетов (_layout.tsx).
Директория assets: Шрифты, изображения и аудиофайлы (доступны по ссылке в описании видео) .
Директория components: Переиспользуемые элементы интерфейса.
Директория constants: Статические данные (списки медитаций, пути к изображениям) .

Гарсия объясняет работу файла _layout.tsx, который определяет общую структуру интерфейса для всех вложенных файлов в папке. Использование компонента Slot из expo-router позволяет рендерить дочерние маршруты внутри макета, подобно children в веб-приложениях .

🎨 Стилизация с помощью NativeWind и создание главной страницы 18:38

Для верстки приложения используется NativeWind — адаптация Tailwind CSS для React Native. Процесс установки включает:

Установку пакетов nativewind и tailwindcss .
Инициализацию конфигурации командой npx tailwindcss init .
Настройку tailwind.config.js с указанием путей к файлам компонентов и настройкой кастомных шрифтов .
Добавление плагина nativewind/babel в файл babel.config.js .

Главная страница приложения создается на базе компонента ImageBackground с использованием эффекта линейного градиента. Для этого устанавливается библиотека expo-linear-gradient . Стивен демонстрирует создание переиспользуемого компонента CustomButton.tsx, который принимает пропсы onPress, title, а также кастомные стили для контейнера и текста .

🧘 Реализация списка медитаций и вкладочной навигации 34:31

Для организации навигации в нижней части экрана (tabs) создается директория (tabs). Круглые скобки в названии папки в Expo Router означают создание группы маршрутов, которая не отображается в URL пути .

Основные этапы разработки экрана «Nature Meditate»:

FlatList: Используется для отображения вертикального списка доступных медитаций. Автор подчеркивает важность использования keyExtractor для уникальной идентификации элементов .
Иконки: Для таб-бара используются иконки из библиотеки @expo/vector-icons (например, MaterialCommunityIcons) .
Динамические маршруты: Создание страницы отдельной медитации через файл [id].tsx. Гарсия объясняет, как извлекать параметры маршрута с помощью хука useLocalSearchParams .

Стивен акцентирует внимание на создании компонента AppGradient.tsx, который оборачивает контент в линейный градиент и SafeAreaView, предотвращая перекрытие элементов системными индикаторами (заряд батареи, время) .

🔋 Логика таймера и воспроизведение аудио 1:24:43

Сердце приложения — экран медитации с обратным отсчетом. Логика строится на хуках useState и useEffect.

Таймер: Переменная secondsRemaining инициализируется значением по умолчанию (например, 10 секунд). В useEffect используется setTimeout, который уменьшает значение на 1 каждую секунду .
Очистка: Крайне важно очищать таймер через clearTimeout(timerId) при размонтировании компонента, чтобы избежать утечек памяти .
Аудио: Для работы со звуком устанавливается библиотека expo-av . Функция initializeSound загружает аудиофайл, соответствующий выбранной медитации, а unloadAsync останавливает воспроизведение при выходе с экрана .

Для корректного отображения времени Стивен реализует функцию форматирования, которая добавляет ведущие нули (padding), используя методы math.floor и padStart(2, "0") .

📝 Аффирмации и глобальное состояние через Context API 56:06

Раздел аффирмаций организован как горизонтальная галерея категорий. Каждая категория ведет на отдельный экран, где текст аффирмации разбивается на предложения по точкам и выводится в виде списка .

Для управления длительностью медитации на разных экранах автор внедряет React Context API :

Создается TimerContext для хранения значения duration и функции setDuration.
Компонент TimerProvider оборачивает всё приложение в _layout.tsx, делая состояние доступным в любом дочернем компоненте .
Это позволяет пользователю выбрать длительность в модальном окне (Modal), и это изменение мгновенно отразится на главном экране таймера без «прокидывания» пропсов (prop drilling) .

В завершение курса Стивен Гарсия отмечает, что созданное приложение — это отличная база для портфолио, демонстрирующая владение современными инструментами экосистемы Expo .