Кроссплатформенная разработка мобильного приложения на React Native

Кроссплатформенная разработка мобильного приложения на React Native

С выходом React Native New Architecture (Fabric + JSI + TurboModules) в продакшене с RN 0.71+, архитектура стека изменилась радикально. JSI (JavaScript Interface) заменил асинхронный bridge синхронным C++ интерфейсом — нативные модули теперь вызываются напрямую из JS без сериализации через JSON. Fabric переписал рендерер с нуля: UI-дерево строится через C++ Shadow Tree, а не через отдельный поток Native UI thread по старой схеме.

На практике это означает, что приложения на RN 0.73+ с включённой New Architecture ведут себя иначе, чем написанные год назад — часть старых библиотек без поддержки TurboModules просто не заработает или потребует enableLegacyBridge. При старте нового проекта мы всегда используем New Architecture; при миграции существующего — аудит зависимостей обязателен.

Где проявляются реальные сложности

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.

Видели краш на Android 13 в приложении доставки: react-native-camera не обрабатывала новые разрешения READ_MEDIA_IMAGES (заменили устаревший READ_EXTERNAL_STORAGE). Пришлось переходить на react-native-vision-camera 3.x — она поддерживает Camera2 API и Skia Frame Processors для real-time обработки кадров.

Шрифты и 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.

Тестирование

Unit-тесты — Jest + @testing-library/react-native. Component-тесты: render + fireEvent + snapshot для критичных компонентов. E2E — Detox (рекомендуем) или Maestro. Detox требует настройки под каждую платформу, но даёт надёжные тесты на реальных симуляторах.

Анализ производительности — react-native-performance + Flipper с плагином Performance Monitor. Для профилирования JS — Chrome DevTools через Metro debugger.

Сроки и объём

Стоимость рассчитывается индивидуально по ТЗ. После аудита требований фиксируем scope, стек и этапы.