Кроссплатформенна розробка мобільного додатку на 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 — зв'яжіться з нами, щоб обговорити деталі.