React Native: co to je, jak funguje Bridge a prostředí JavaScript

Co je React Native

React Native — je framework vytvořený týmem Facebook (nyní Meta) a vydaný jako open-source v roce 2015. Na rozdíl od hybridních přístupů (Cordova, Ionic) React Native nepoužívá WebView. Místo toho jsou JavaScriptové komponenty mapovány na nativní UI prvky: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

První verze React Native podporovala pouze iOS. Podpora Androidu byla přidána v roce 2016. Verze 0.60 (2019) představila Autolinking — automatické propojení nativních závislostí. React Native 0.68 (2022) přidal novou architekturu Fabric + TurboModules. Aktuální stabilní verze 0.74 (2024) byla zcela převedena na architekturu New Architecture s podporou Yoga 3.0 pro rozvržení Flexbox.

Podle údajů Statista 2024 je React Native používán ve 38 % cross-platform projektů. Framework používají Discord, Instagram, Shopify, Pinterest, Skype a Uber Eats. Meta používá React Native ve Facebooku a Instagramu — hlavní mobilní aplikaci s 2 miliardami uživatelů.

Historie a vývoj React Native

React Native byl oznámen na React.js Conf v lednu 2015. Myšlenkou bylo přenést deklarativní paradigma React z webu na mobilní platformy. První commit v repozitáři se objevil v roce 2013 jako interní projekt Facebooku pro vytvoření aplikace Facebook Groups na iOS.

Verze 0.70 (2022) představila Hermes jako výchozí JavaScriptový engine. Hermes je engine s předběžnou kompilací (AOT), optimalizovaný pro mobilní zařízení. Zkracuje dobu spuštění aplikace o 50 % a velikost APK o 30 % ve srovnání s JavaScriptCore. Hermes podporuje ES6 a částečně ES2020.

Rozdíl mezi React Native a React Web

React Web vykresluje komponenty do DOM prvků (div, span, p) prostřednictvím ReactDOM. React Native vykresluje do nativních komponent platformy. Místo <div> se používá <View>, místo <span> — <Text>. Styly se nastavují prostřednictvím objektu StyleSheet.create(), který je překládán do CSS vlastností platformy. Flexbox je ve výchozím nastavení zapnut prostřednictvím enginu Yoga.

Navigace v React Native se liší od webu. Místo react-router-dom se používá React Navigation — nativní knihovna s podporou Stack, Tab a Drawer navigátorů. React Navigation 6.x používá nativní animace (useNativeDriver) a integraci s Deep Links. Pro nativní navigaci obrazovek iOS UINavigationController a Android Fragment se používá knihovna react-native-navigation od Wix.

Architektura React Native

Architektura React Native byla tradičně postavena kolem Bridge — asynchronního JSON kanálu mezi prostředím JavaScript a nativním kódem. Od verze 0.68 Meta představila New Architecture, která nahrazuje Bridge za JSI (JavaScript Interface) a Fabric. Podívejme se na oba modely.

Bridge a Fabric

Bridge — je serializovaný JSON protokol pracující ve více vláknech: JS Thread (interpretace React kódu), Main Thread (UI) a Native Modules Thread (API). Každá interakce mezi JS a nativním kódem prochází serializací a deserializací objektů, což způsobuje zpoždění při častých voláních. Při posouvání seznamu o 1000 prvcích Bridge generuje až 10 000 JSON zpráv za sekundu.

Fabric — nový systém vykreslování v React Native. Místo Bridge Fabric používá C++ Shadow Tree, který se synchronizuje s UI vláknem prostřednictvím JSI. Tím se eliminuje serializace JSON: nativní C++ kód přímo volá funkce v prostředí JavaScript a naopak. Fabric snížuje zpoždění vykreslování z 16 ms (Bridge) na 2–4 ms.

TurboModules — druhá část New Architecture. Ve starém modelu se všechny nativní moduly načítaly při spuštění aplikace. TurboModules načítají moduly líně (lazy loading) — až když je JS kód poprvé vyžádá. To zkracuje dobu studeného startu o 40 % v aplikacích s 20+ nativními moduly.

Příklad aplikace v 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;

Nativní moduly

Nativní moduly — jsou mechanismus pro volání API platformy z JavaScriptu. Pokud funkcionalita není pokryta standardními komponentami React Native (kamera, Bluetooth, biometrie), vývojář napíše modul v Swift/Kotlin a zaregistruje jej prostřednictvím RCTBridgeModule nebo TurboModule. Nativní funkce je volána z JS pomocí NativeModules.CameraModule.takePhoto().

React Native poskytuje hotové nativní moduly pro přístup k akcelerometru (react-native-sensors), geolokaci (@react-native-community/geolocation), biometrii (react-native-biometrics) a místním notifikacím (@notifee/react-native). Pro vlastní scénáře nabízí Expo Expo Modules API — jednodušší rozhraní pro vytváření nativních modulů bez Xcode nebo Android Studio.

Výhody React Native

Obrovská komunita — React Native má největší komunitu mezi cross-platform frameworky. Na GitHubu má projekt 117 000+ hvězdiček, 1800+ přispěvatelů. npm týdně stahuje react-native 3 miliony+ krát. Otázky týkající se React Native tvoří 5 % všech otázek v sekci mobilního vývoje na Stack Overflow.

JavaScript ekosystém — React vývojáři používají stejné nástroje jako na webu: npm, Babel, ESLint, Prettier, Jest, TypeScript. Obchodní logiku lze znovu použít mezi webovou verzí (React) a mobilní aplikací (React Native). Knihovny Redux, Zustand, React Query, React Hook Form fungují na obou platformách beze změn.

Expo — je SDK a sada nástrojů, které zjednodušují vývoj v React Native. Expo poskytuje hotové moduly (kamera, notifikace, mapy, OAuth), cloudové sestavení (EAS Build) a OTA aktualizace (EAS Update). Expo Go umožňuje spustit aplikaci na fyzickém zařízení bez Xcode a Android Studio. Podle údajů Expo 2024 používá Expo 70 % nových React Native projektů.

OTA aktualizace — funkce dostupná prostřednictvím Expo Update a CodePush (Microsoft). Vývojáři mohou odesílat aktualizace JavaScript balíčku přímo uživatelům bez procházení recenzí App Store nebo Google Play. To urychluje opravu kritických chyb z 2–5 dnů (čekání na recenzi) na 1–2 hodiny.

Podpora TypeScript je ve výchozím nastavení zapnuta od React Native 0.71. Šablona projektu obsahuje tsconfig.json, typy pro všechny komponenty a podporu strict mode. Flow (statické typování od Facebooku) je také podporováno, ale Meta oficiálně doporučuje TypeScript. Typová šablona TypeScript tvoří 85 % nových projektů podle průzkumu State of React Native 2024.

Ekosystém a populární knihovny

npm — hlavní registr balíčků pro React Native. Vyhledávání knihoven je filtrováno podle klíčového slova react-native. Pro instalaci se používá npm install nebo yarn add. React Native CLI automaticky propojuje nativní závislosti (od verze 0.60). Pro Expo projekty je instalace spravována prostřednictvím expo install, který vybírá kompatibilní verzi knihovny.

Klíčové knihovny

@react-navigation/native — de facto standard pro navigaci v React Native. Knihovna zahrnuje Stack Navigator (animované přechody), Tab Navigator (spodní menu pro iOS/Android), Drawer Navigator (boční menu) a Material Top Tab. React Navigation 7.x (2024) představila statickou konfiguraci cest a plnou podporu React 18 s useSyncExternalStore.

react-native-reanimated — knihovna pro vysoce výkonné animace. Reanimated 3.x provádí animace ve vlákně UI (worklet), obcházejíc vlákno JS. To zaručuje 60 FPS i při animaci 100+ prvků. useSharedValue, useAnimatedStyle a withSpring nahrazují Animated API ze standardního balíčku. Reanimated zpracovává dotyková gesta prostřednictvím react-native-gesture-handler.

@tanstack/react-query — knihovna pro správu stavu serveru. React Query ukládá odpovědi API do mezipaměti, automaticky znovu načítá data při změNě sítě (refetchOnReconnect) a podporuje stránkování s useInfiniteQuery. Verze 5.x obsahuje optimistické aktualizace pro UX — rozhraní se aktualizuje před obdržením odpovědi serveru a poté je opraveno.