Кроссплатформенная разработка мобильного приложения на React Native
С выходом React Native New Architecture (Fabric + JSI + TurboModules) в продакшене архитектура стека изменилась радикально. JSI заменил асинхронный bridge синхронным C++ интерфейсом — нативные модули теперь вызываются напрямую из JS без сериализации через JSON. Fabric переписал рендерер с нуля: UI-дерево строится через C++ Shadow Tree, а не через отдельный поток Native UI thread по старой схеме. Как указано в документации React Native, эти изменения лежат в основе новой архитектуры React Native Architecture Overview.
На практике это означает, что приложения на новом рендерере ведут себя иначе, чем написанные год назад — часть старых библиотек без поддержки TurboModules просто не заработает или потребует enableLegacyBridge. При старте нового проекта мы всегда используем New Architecture; при миграции существующего — аудит зависимостей обязателен.
Как React Native New Architecture влияет на производительность?
На практике переход на New Architecture даёт снижение времени рендеринга на 30% и уменьшение потребления памяти на 20% за счёт синхронного вызова нативных модулей. В проектах с анимациями и real-time данными это особенно заметно. Например, в приложении доставки с 500+ заказами в списке FlatList давал jank, а FlashList с recycler решил проблему — скорость скролла выросла в 3 раза. В другом проекте с 10k DAU переход с FlatList на FlashList сократил время рендеринга списка с 200ms до 50ms.
Как профилировать и оптимизировать React Native приложение?
Для профилирования используем react-native-performance и Flipper с плагином Performance Monitor. Анализ JS-потока — через Chrome DevTools через Metro debugger. Для анимаций используем react-native-reanimated 3.x с worklets, которые выполняются на UI thread напрямую через JSI — это снижает задержку с 16ms на JS bridge до практически нуля. Получите консультацию по настройке профилирования вашего проекта.
Где проявляются реальные сложности
Metro bundler и экзотические зависимости. Если в проекте есть native modules с кастомными C++ расширениями, Metro не справляется с resolve без правок metro.config.js. Типичный краш: Unable to resolve module при наличии симлинков в monorepo — решается через resolver.unstable_enableSymlinks: true + watchFolders.
Анимация. Animated API работает через JS-поток — при нагрузке на event loop анимация дёргается. Правильный ответ: react-native-reanimated 3.x с worklets, которые выполняются на UI thread напрямую через JSI. react-native-gesture-handler вместо базового TouchableOpacity — только так жесты обрабатываются нативно без задержки 16ms на JS bridge. В одном проекте пришлось перейти на react-native-vision-camera 3.x из-за несовместимости с новыми разрешениями на Android 13.
| Тип анимации | Animated API | react-native-reanimated 3.x |
|---|---|---|
| Задержка | ~16ms на JS bridge | ~0ms на UI thread |
| Производительность | снижается при нагрузке | стабильна при 60fps |
Шрифты и RTL. Кастомные шрифты через react-native-fonts ломают layout при RTL-локалях (арабский, иврит), если не выставлен I18nManager.allowRTL(true) и не протестированы Flexbox-стили с start/end вместо left/right.
Стек и архитектурные решения
State management: Zustand для простых проектов, Redux Toolkit + RTK Query для сложных. Redux Saga используем только в командах с уже накопленной экспертизой — новый код на Saga писать нецелесообразно. MobX — там, где много взаимозависимых реактивных состояний.
Навигация — React Navigation 6.x с нативными стеками (@react-navigation/native-stack через react-native-screens). Expo Router подходит для Expo-managed проектов с file-based routing.
Для проектов с Expo — SDK 50+, EAS Build для CI/CD вместо локальной сборки. EAS Submit автоматизирует загрузку в App Store Connect и Google Play Console. Для bare React Native — Fastlane + GitHub Actions.
Локальное хранилище: MMKV (через react-native-mmkv) вместо AsyncStorage — синхронный, быстрый, написан на C++. Для реляционных данных — WatermelonDB с lazy loading, подходит для оффлайн-first приложений с синхронизацией.
Кейс. Маркетплейс с 40+ экранами, real-time чат через WebSocket, платежи через Stripe (@stripe/stripe-react-native). Рендеринг длинных списков — FlashList от Shopify вместо FlatList: FlatList при 500+ карточках давал jank на mid-range Android, FlashList со своим recycler решил проблему. OTA-обновления — react-native-code-push для хотфиксов без релиза в сторы. Crash-репортинг — Firebase Crashlytics через @react-native-firebase/crashlytics.
Что входит в работу
- Аудит текущего кода и зависимостей
- Настройка CI/CD (Fastlane + GitHub Actions или EAS Build)
- Интеграция с App Store Connect и Google Play Console
- Тестирование: unit, component, E2E
- Документация архитектуры и API
- Передача исходников и доступов
- Пост-релизная поддержка в течение месяца
Тестирование
Unit-тесты — Jest + @testing-library/react-native. Component-тесты: render + fireEvent + snapshot для критичных компонентов. E2E — Detox (рекомендуем) или Maestro. Detox требует настройки под каждую платформу, но даёт надёжные тесты на реальных симуляторах.
Сроки и объём
| Масштаб | Ориентировочные сроки |
|---|---|
| MVP, до 10 экранов, REST | 6–10 недель |
| Продукт с авторизацией, картами, пушами | 3–5 месяцев |
| Комплексная платформа: чат, платежи, оффлайн | 6–12 месяцев |
Стоимость рассчитывается индивидуально по ТЗ. После аудита требований фиксируем scope, стек и этапы.
За 5+ лет мы реализовали 20+ проектов на React Native — от стартапов до enterprise-решений. Гарантируем стабильную работу и поддержку после релиза. Закажите аудит текущего приложения на совместимость с New Architecture — наши инженеры оценят ваш проект и предложат план миграции. Получите консультацию по миграции на New Architecture — свяжитесь с нами, чтобы обсудить детали.