React Native: wat is het, hoe werkt Bridge en JavaScript-omgeving

Wat is React Native

React Native — is een framework gemaakt door het Facebook-team (nu Meta) en uitgebracht als open-source in 2015. In tegenstelling tot hybride benaderingen (Cordova, Ionic) gebruikt React Native geen WebView. In plaats daarvan worden JavaScript-componenten toegewezen aan native UI-elementen: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

De eerste versie van React Native ondersteunde alleen iOS. Android-ondersteuning werd toegevoegd in 2016. Versie 0.60 (2019) introduceerde Autolinking — het automatisch koppelen van native afhankelijkheden. React Native 0.68 (2022) voegde de nieuwe Fabric + TurboModules-architectuur toe. De huidige stabiele versie 0.74 (2024) is volledig overgezet naar de New Architecture met ondersteuning voor Yoga 3.0 voor Flexbox-lay-out.

Volgens Statista 2024 wordt React Native gebruikt in 38% van de cross-platform projecten. Het framework wordt gebruikt door Discord, Instagram, Shopify, Pinterest, Skype en Uber Eats. Meta gebruikt React Native in Facebook en Instagram — de belangrijkste mobiele applicatie met 2 miljard gebruikers.

Geschiedenis en evolutie van React Native

React Native werd aangekondigd op React.js Conf in januari 2015. Het idee was het declaratieve paradigma van React over te brengen van het web naar mobiele platforms. De eerste commit in de repository verscheen in 2013 als een intern Facebook-project voor het maken van de Facebook Groups-applicatie op iOS.

Versie 0.70 (2022) introduceerde Hermes als de standaard JavaScript-engine. Hermes is een engine met voorcompilatie (AOT), geoptimaliseerd voor mobiele apparaten. Het verkort de opstarttijd van applicaties met 50% en verkleint de APK-grootte met 30% in vergelijking met JavaScriptCore. Hermes ondersteunt ES6 en gedeeltelijk ES2020.

Verschil tussen React Native en React Web

React Web rendert componenten naar DOM-elementen (div, span, p) via ReactDOM. React Native rendert naar native componenten van het platform. In plaats van <div> wordt <View> gebruikt, in plaats van <span> — <Text>. Stijlen worden ingesteld via het StyleSheet.create()-object, dat wordt vertaald naar CSS-eigenschappen van het platform. Flexbox is standaard ingeschakeld via de Yoga-engine.

Navigatie in React Native verschilt van het web. In plaats van react-router-dom wordt React Navigation gebruikt — een native bibliotheek met ondersteuning voor Stack-, Tab- en Drawer-navigators. React Navigation 6.x gebruikt native animaties (useNativeDriver) en integratie met Deep Links. Voor native navigatie van iOS UINavigationController- en Android Fragment-schermen wordt de bibliotheek react-native-navigation van Wix gebruikt.

React Native-architectuur

De React Native-architectuur was traditioneel gebouwd rond Bridge — een asynchroon JSON-kanaal tussen de JavaScript-omgeving en native code. Vanaf versie 0.68 introduceerde Meta New Architecture, die Bridge vervangt door JSI (JavaScript Interface) en Fabric. Laten we beide modellen bekijken.

Bridge en Fabric

Bridge — is een geserialiseerd JSON-protocol dat in meerdere threads werkt: JS Thread (interpretatie van React-code), Main Thread (UI) en Native Modules Thread (API). Elke interactie tussen JS en native code doorloopt serialisatie en deserialisatie van objecten, wat vertragingen veroorzaakt bij frequente aanroepen. Bij het scrollen van een lijst met 1000 elementen genereert Bridge tot 10.000 JSON-berichten per seconde.

Fabric — het nieuwe rendersysteem in React Native. In plaats van Bridge gebruikt Fabric een C++ Shadow Tree die via JSI synchroniseert met de UI-thread. Dit elimineert JSON-serialisatie: native C++-code roept direct functies aan in de JavaScript-omgeving en vice versa. Fabric vermindert de rendervertraging van 16 ms (Bridge) naar 2–4 ms.

TurboModules — het tweede deel van New Architecture. In het oude model werden alle native modules geladen bij het opstarten van de applicatie. TurboModules laden modules lui (lazy loading) — alleen wanneer de JS-code er voor het eerst om vraagt. Dit verkort de koude starttijd met 40% in applicaties met 20+ native modules.

Voorbeeld van een applicatie in 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;

Native modules

Native modules — zijn een mechanisme om platform-API's aan te roepen vanuit JavaScript. Als functionaliteit niet wordt gedekt door standaard React Native-componenten (camera, Bluetooth, biometrie), schrijft de ontwikkelaar een module in Swift/Kotlin en registreert deze via RCTBridgeModule of TurboModule. De native functie wordt vanuit JS aangeroepen via NativeModules.CameraModule.takePhoto().

React Native biedt kant-en-klare native modules voor toegang tot de accelerometer (react-native-sensors), geolocatie (@react-native-community/geolocation), biometrie (react-native-biometrics) en lokale meldingen (@notifee/react-native). Voor aangepaste scenario's biedt Expo Expo Modules API aan — een eenvoudigere interface voor het maken van native modules zonder Xcode of Android Studio.

Voordelen van React Native

Enorme community — React Native heeft de grootste community onder cross-platform frameworks. Op GitHub heeft het project 117.000+ sterren, 1800+ bijdragers. npm downloadt react-native 3 miljoen+ keer per week. Vragen over React Native vormen 5% van alle vragen in de sectie mobiele ontwikkeling op Stack Overflow.

JavaScript-ecosysteem — React-ontwikkelaars gebruiken dezelfde tools als op het web: npm, Babel, ESLint, Prettier, Jest, TypeScript. Bedrijfslogica kan worden hergebruikt tussen de webversie (React) en de mobiele applicatie (React Native). Bibliotheken zoals Redux, Zustand, React Query, React Hook Form werken op beide platforms zonder wijzigingen.

Expo — is een SDK en toolset die de ontwikkeling in React Native vereenvoudigt. Expo biedt kant-en-klare modules (camera, meldingen, kaarten, OAuth), cloud builds (EAS Build) en OTA-updates (EAS Update). Expo Go maakt het mogelijk de applicatie op een fysiek apparaat te draaien zonder Xcode en Android Studio. Volgens Expo 2024 gebruikt 70% van de nieuwe React Native-projecten Expo.

OTA-updates — een functie beschikbaar via Expo Update en CodePush (Microsoft). Ontwikkelaars kunnen updates van het JavaScript-pakket rechtstreeks naar gebruikers sturen zonder goedkeuring van de App Store of Google Play. Dit versnelt het oplossen van kritieke fouten van 2–5 dagen (wachten op beoordeling) naar 1–2 uur.

TypeScript-ondersteuning is standaard ingeschakeld vanaf React Native 0.71. Het projectsjabloon bevat tsconfig.json, typen voor alle componenten en ondersteuning voor strict mode. Flow (statische typering van Facebook) wordt ook ondersteund, maar Meta beveelt officieel TypeScript aan. Het TypeScript-sjabloon vormt 85% van de nieuwe projecten volgens de State of React Native 2024-enquête.

Ecosysteem en populaire bibliotheken

npm — de belangrijkste pakketregistratie voor React Native. Bibliotheekzoekopdrachten worden gefilterd op het trefwoord react-native. Voor installatie wordt npm install of yarn add gebruikt. React Native CLI koppelt automatisch native afhankelijkheden (vanaf versie 0.60). Voor Expo-projecten wordt de installatie beheerd via expo install, dat de compatibele versie van de bibliotheek kiest.

Belangrijke bibliotheken

@react-navigation/native — de de facto standaard voor navigatie in React Native. De bibliotheek bevat Stack Navigator (geanimeerde overgangen), Tab Navigator (onder menu voor iOS/Android), Drawer Navigator (zijmenu) en Material Top Tab. React Navigation 7.x (2024) introduceerde statische routeconfiguratie en volledige ondersteuning voor React 18 met useSyncExternalStore.

react-native-reanimated — bibliotheek voor hoogwaardige animaties. Reanimated 3.x voert animaties uit in de UI-thread (worklet), waarbij de JS-thread wordt omzeild. Dit garandeert 60 FPS, zelfs bij het animeren van 100+ elementen. useSharedValue, useAnimatedStyle en withSpring vervangen de Animated API uit het standaardpakket. Reanimated verwerkt aanraakgebaren via react-native-gesture-handler.

@tanstack/react-query — bibliotheek voor het beheren van serverstatus. React Query caches API-antwoorden, vraagt gegevens automatisch opnieuw aan bij netwerkwijzigingen (refetchOnReconnect) en ondersteunt paginering met useInfiniteQuery. Versie 5.x bevat optimistische updates voor UX — de interface wordt bijgewerkt voordat het serverantwoord wordt ontvangen en vervolgens gecorrigeerd.