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 ms (Bridge) на 2–4 ms.

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 управља додирним гестовима кроз react-native-gesture-handler.

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