Кросплатформна розробка мобільного застосунку на React Native
З виходом React Native New Architecture (Fabric + JSI + TurboModules) у продакшені з RN 0.71+, архітектура стеку змінилася радикально. JSI (JavaScript Interface) замінив асинхронний міст синхронним 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.
Стек та архітектурні рішення
Керування станом: 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, підходить для offline-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 для hotfixes без релізу в сторах. 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.
Терміни та обсяг
| Масштаб | Приблизні терміни |
|---|---|
| MVP, до 10 екранів, REST | 6–10 тижнів |
| Продукт з авторизацією, картами, пушами | 3–5 місяців |
| Комплексна платформа: чат, платежі, оффлайн | 6–12 місяців |
Вартість розраховується індивідуально по ТЗ. Після аудиту вимог фіксуємо scope, стек та етапи.