React Native: що це, як працює Bridge і середовище JavaScript

Що таке React Native

React Native — це фреймворк, створений командою Facebook (нині Meta) і випущений як open-source у 2015 році. На відміну від гібридних підходів (Cordova, Ionic), React Native не використовує WebView. Натомість JavaScript-компоненти маппяться на нативні UI-елементи: View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView.

Перша версія React Native підтримувала лише iOS. Підтримка Android з'явилася у 2016 році. Версія 0.60 (2019) ввела Autolinking — автоматичне підключення нативних залежностей. React Native 0.68 (2022) включив нову архітектуру Fabric + TurboModules. Поточна стабільна версія 0.74 (2024) повністю переведена на архітектуру New Architecture з підтримкою Yoga 3.0 для Flexbox-верстки.

За даними Statista 2024, React Native використовується у 38% крос-платформних проєктів. Фреймворк застосовують Discord, Instagram, Shopify, Pinterest, Skype та Uber Eats. Meta використовує React Native у Facebook та Instagram — основному мобільному застосунку з 2 мільярдами користувачів.

Історія та еволюція React Native

React Native був анонсований на React.js Conf у січні 2015 року. Ідея полягала в перенесенні декларативної парадигми React з вебу на мобільні платформи. Перший коміт у репозиторії з'явився у 2013 році як внутрішній проєкт Facebook для створення застосунку Facebook Groups на iOS.

Версія 0.70 (2022) представила Hermes як рушій JavaScript за замовчуванням. Hermes — це рушій з попередньою компіляцією (AOT), оптимізований для мобільних пристроїв. Він скорочує час запуску застосунку на 50% і зменшує розмір APK на 30% порівняно з JavaScriptCore. Hermes підтримує ES6 та частково ES2020.

Відмінність React Native від React Web

React Web рендерить компоненти в DOM-елементи (div, span, p) через ReactDOM. React Native рендерить у нативні компоненти платформи. Замість <div> використовується <View>, замість <span> — <Text>. Стилі задаються через об'єкт StyleSheet.create(), який транслюється в CSS-властивості платформи. Flexbox включений за замовчуванням через Yoga-рушій.

Навігація в React Native відрізняється від вебу. Замість react-router-dom використовується React Navigation — нативна бібліотека з підтримкою Stack, Tab та Drawer навігаторів. React Navigation 6.x використовує нативні анімації (useNativeDriver) та інтеграцію з Deep Links. Для нативної навігації по екранах iOS UINavigationController та Android Fragment застосовується бібліотека react-native-navigation від Wix.

Архітектура React Native

Архітектура React Native традиційно будувалася навколо Bridge — асинхронного JSON-каналу між JavaScript-середовищем і нативним кодом. З версії 0.68 Meta представила New Architecture, яка замінює Bridge на JSI (JavaScript Interface) та Fabric. Розглянемо обидві моделі.

Bridge та Fabric

Bridge — це серіалізований JSON-протокол, що працює в кілька потоків: JS Thread (інтерпретація React-коду), Main Thread (UI) та Native Modules Thread (API). Кожна взаємодія між JS і нативним кодом проходить серіалізацію та десеріалізацію об'єктів, що створює затримки при частих викликах. При скролі списку на 1000 елементів Bridge генерує до 10 000 JSON-повідомлень за секунду.

Fabric — нова система рендерингу в React Native. Замість Bridge Fabric використовує C++ тіньове дерево (Shadow Tree), яке синхронізується з UI-потоком через JSI. Це усуває серіалізацію JSON: нативний C++-код безпосередньо викликає функції в JavaScript-середовищі і навпаки. Fabric скорочує затримку рендерингу з 16 мс (Bridge) до 2–4 мс.

TurboModules — друга частина New Architecture. У старій моделі всі нативні модулі завантажувалися при старті застосунку. TurboModules завантажують модулі ліниво (lazy loading) — тільки коли JS-код їх вперше запитує. Це скорочує час холодного старту на 40% у застосунках із 20+ нативними модулями.

Приклад застосунку на React Native

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Нативні модулі

Нативні модулі — це механізм для виклику платформених API з JavaScript. Якщо функціональність не покрита стандартними компонентами React Native (камера, Bluetooth, біометрія), розробник пише модуль на Swift/Kotlin і реєструє його через RCTBridgeModule або TurboModule. Нативна функція викликається з JS через NativeModules.CameraModule.takePhoto().

React Native надає готові нативні модулі для доступу до акселерометра (react-native-sensors), геолокації (@react-native-community/geolocation), біометрії (react-native-biometrics) та локальних сповіщень (@notifee/react-native). Для кастомних сценаріїв Expo пропонує Expo Modules API — простіший інтерфейс для створення нативних модулів без Xcode або Android Studio.

Переваги React Native

Величезна спільнота — React Native має найбільшу спільноту серед крос-платформних фреймворків. На GitHub у проєкту 117 000+ зірок, 1800+ контриб'юторів. npm щотижня завантажує react-native 3 млн+ разів. Питання щодо React Native займають 5% усіх питань на Stack Overflow у розділі мобільної розробки.

JavaScript-екосистема — розробники React використовують ті самі інструменти, що й у вебі: npm, Babel, ESLint, Prettier, Jest, TypeScript. Можна перевикористовувати бізнес-логіку між веб-версією (React) та мобільним застосунком (React Native). Бібліотеки Redux, Zustand, React Query та React Hook Form працюють на обох платформах без змін.

Expo — це SDK та інструментарій, що спрощує розробку на React Native. Expo надає готові модулі (камера, сповіщення, карти, OAuth), хмарні збірки (EAS Build) та оновлення OTA (EAS Update). Expo Go дозволяє запускати застосунок на фізичному пристрої без Xcode та Android Studio. За даними Expo 2024, 70% нових React Native-проєктів використовують Expo.

OTA-оновлення — функція, доступна через Expo Update та CodePush (Microsoft). Розробники можуть надсилати оновлення JavaScript-бандла безпосередньо користувачам без проходження рев'ю App Store або Google Play. Це прискорює виправлення критичних багів з 2–5 днів (очікування рев'ю) до 1–2 годин.

Підтримка TypeScript включена за замовчуванням з React Native 0.71. Шаблон проєкту включає tsconfig.json, типи для всіх компонентів та підтримку strict mode. Flow (статична типізація від Facebook) також підтримується, але Meta офіційно рекомендує TypeScript. TypeScript-шаблон становить 85% нових проєктів за даними опитування State of React Native 2024.

Екосистема та популярні бібліотеки

npm — основний реєстр пакетів для React Native. Пошук бібліотек фільтрується за ключовим словом react-native. Для встановлення використовується npm install або yarn add. React Native CLI автоматично лінкує нативні залежності (з версії 0.60). Для Expo-проєктів встановлення керується через expo install, який підбирає сумісну версію бібліотеки.

Ключові бібліотеки

@react-navigation/native — стандарт де-факто для навігації в React Native. Бібліотека включає Stack Navigator (анімовані переходи), Tab Navigator (нижнє меню для iOS/Android), Drawer Navigator (бокове меню) та Material Top Tab. React Navigation 7.x (2024) ввела статичну конфігурацію маршрутів і повну підтримку React 18 з useSyncExternalStore.

react-native-reanimated — бібліотека для високопродуктивних анімацій. Reanimated 3.x виконує анімації в UI-потоці (worklet), минаючи JS-потік. Це гарантує 60 FPS навіть при анімації 100+ елементів. useSharedValue, useAnimatedStyle та withSpring замінюють Animated API зі стандартної поставки. Reanimated обробляє touch-жести через react-native-gesture-handler.

@tanstack/react-query — бібліотека для керування серверним станом. React Query кешує відповіді API, автоматично перезапитує дані при зміні мережі (refetchOnReconnect) та підтримує пагінацію з useInfiniteQuery. Версія 5.x включає оптимістичні оновлення для UX — інтерфейс оновлюється до отримання відповіді сервера, а потім коригується.