React Native: vad är det, hur fungerar Bridge och JavaScript-miljön

Vad är React Native

React Native — är ett ramverk skapat av Facebook-teamet (nu Meta) och publicerat som öppen källa 2015. Till skillnad från hybridmetoder (Cordova, Ionic) använder React Native inte WebView. Istället mappas JavaScript-komponenter till inbyggda UI-element: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

Den första versionen av React Native stödde endast iOS. Android-stöd lades till 2016. Version 0.60 (2019) introducerade Autolinking — automatisk koppling av inbyggda beroenden. React Native 0.68 (2022) lade till den nya Fabric + TurboModules-arkitekturen. Den nuvarande stabila versionen 0.74 (2024) har helt överförts till New Architecture med stöd för Yoga 3.0 för Flexbox-layout.

Enligt Statista 2024 används React Native i 38 % av alla tvärplattformsprojekt. Ramverket används av Discord, Instagram, Shopify, Pinterest, Skype och Uber Eats. Meta använder React Native i Facebook och Instagram — den huvudsakliga mobilapplikationen med 2 miljarder användare.

Historik och utveckling av React Native

React Native tillkännagavs på React.js Conf i januari 2015. Idén var att överföra Reacts deklarativa paradigm från webben till mobila plattformar. Den första commiten i arkivet dök upp 2013 som ett internt Facebook-projekt för att skapa Facebook Groups-applikationen på iOS.

Version 0.70 (2022) introducerade Hermes som standard JavaScript-motor. Hermes är en motor med förkompilering (AOT), optimerad för mobila enheter. Den minskar applikationens starttid med 50 % och APK-storleken med 30 % jämfört med JavaScriptCore. Hermes stödjer ES6 och delvis ES2020.

Skillnad mellan React Native och React Web

React Web renderar komponenter till DOM-element (div, span, p) via ReactDOM. React Native renderar till plattformens inbyggda komponenter. Istället för <div> används <View>, istället för <span> — <Text>. Stilar sätts via StyleSheet.create()-objektet, som översätts till plattformens CSS-egenskaper. Flexbox är aktiverat som standard via Yoga-motorn.

Navigering i React Native skiljer sig från webben. Istället för react-router-dom används React Navigation — ett inbyggt bibliotek med stöd för Stack-, Tab- och Drawer-navigatorer. React Navigation 6.x använder inbyggda animationer (useNativeDriver) och integration med Deep Links. För inbyggd navigering av iOS UINavigationController- och Android Fragment-skärmar används biblioteket react-native-navigation från Wix.

React Native-arkitektur

React Native-arkitekturen byggdes traditionellt kring Bridge — en asynkron JSON-kanal mellan JavaScript-miljön och inbyggd kod. Från version 0.68 introducerade Meta New Architecture, som ersätter Bridge med JSI (JavaScript Interface) och Fabric. Låt oss titta på båda modellerna.

Bridge och Fabric

Bridge — är ett serialiserat JSON-protokoll som arbetar i flera trådar: JS Thread (tolkning av React-kod), Main Thread (UI) och Native Modules Thread (API). Varje interaktion mellan JS och inbyggd kod går igenom serialisering och deserialisering av objekt, vilket orsakar fördröjningar vid frekventa anrop. Vid rullning av en lista med 1000 element genererar Bridge upp till 10 000 JSON-meddelanden per sekund.

Fabric — det nya renderingssystemet i React Native. Istället för Bridge använder Fabric ett C++ Shadow Tree som synkroniseras med UI-tråden via JSI. Detta eliminerar JSON-serialisering: inbyggd C++-kod anropar direkt funktioner i JavaScript-miljön och vice versa. Fabric minskar renderingsfördröjningen från 16 ms (Bridge) till 2–4 ms.

TurboModules — den andra delen av New Architecture. I den gamla modellen laddades alla inbyggda moduler vid applikationsstart. TurboModules laddar moduler lat (lazy loading) — endast när JS-koden först efterfrågar dem. Detta minskar kallstarttiden med 40 % i applikationer med 20+ inbyggda moduler.

Exempel på applikation i 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;

Inbyggda moduler

Inbyggda moduler — är en mekanism för att anropa plattformens API:er från JavaScript. Om funktionaliteten inte täcks av standardkomponenterna i React Native (kamera, Bluetooth, biometri) skriver utvecklaren en modul i Swift/Kotlin och registrerar den via RCTBridgeModule eller TurboModule. Den inbyggda funktionen anropas från JS via NativeModules.CameraModule.takePhoto().

React Native tillhandahåller färdiga inbyggda moduler för åtkomst till accelerometer (react-native-sensors), geolokalisering (@react-native-community/geolocation), biometri (react-native-biometrics) och lokala notifieringar (@notifee/react-native). För anpassade scenarier erbjuder Expo Expo Modules API — ett enklare gränssnitt för att skapa inbyggda moduler utan Xcode eller Android Studio.

Fördelar med React Native

Stor gemenskap — React Native har den största gemenskapen bland tvärplattformsramverk. På GitHub har projektet 117 000+ stjärnor, 1800+ bidragsgivare. npm laddar ner react-native 3 miljoner+ gånger per vecka. Frågor om React Native utgör 5 % av alla frågor i mobilutvecklingssektionen på Stack Overflow.

JavaScript-ekosystem — React-utvecklare använder samma verktyg som på webben: npm, Babel, ESLint, Prettier, Jest, TypeScript. Affärslogik kan återanvändas mellan webbversionen (React) och mobilapplikationen (React Native). Bibliotek som Redux, Zustand, React Query, React Hook Form fungerar på båda plattformarna utan förändringar.

Expo — är en SDK och verktygslåda som förenklar utveckling i React Native. Expo erbjuder färdiga moduler (kamera, notifieringar, kartor, OAuth), molnbyggen (EAS Build) och OTA-uppdateringar (EAS Update). Expo Go gör det möjligt att köra applikationen på en fysisk enhet utan Xcode och Android Studio. Enligt Expo 2024 använder 70 % av nya React Native-projekt Expo.

OTA-uppdateringar — en funktion som är tillgänglig via Expo Update och CodePush (Microsoft). Utvecklare kan skicka uppdateringar av JavaScript-paketet direkt till användarna utan att gå igenom App Store eller Google Play-granskning. Detta snabbar upp åtgärdande av kritiska buggar från 2–5 dagar (väntan på granskning) till 1–2 timmar.

TypeScript-stöd är aktiverat som standard från React Native 0.71. Projektmallen innehåller tsconfig.json, typer för alla komponenter och stöd för strict mode. Flow (statisk typning från Facebook) stöds också, men Meta rekommenderar officiellt TypeScript. TypeScript-mallen utgör 85 % av nya projekt enligt State of React Native 2024-undersökningen.

Ekosystem och populära bibliotek

npm — det huvudsakliga paketregistret för React Native. Bibliotekssökningar filtreras efter nyckelordet react-native. För installation används npm install eller yarn add. React Native CLI länkar automatiskt inbyggda beroenden (från version 0.60). För Expo-projekt hanteras installationen via expo install, som väljer den kompatibla versionen av biblioteket.

Viktiga bibliotek

@react-navigation/native — de facto-standard för navigering i React Native. Biblioteket innehåller Stack Navigator (animerade övergångar), Tab Navigator (nedre meny för iOS/Android), Drawer Navigator (sidomeny) och Material Top Tab. React Navigation 7.x (2024) introducerade statisk routkonfiguration och fullt stöd för React 18 med useSyncExternalStore.

react-native-reanimated — bibliotek för högpresterande animationer. Reanimated 3.x utför animationer i UI-tråden (worklet), förbi JS-tråden. Detta garanterar 60 FPS även vid animering av 100+ element. useSharedValue, useAnimatedStyle och withSpring ersätter Animated API från standardpaketet. Reanimated hanterar pekgester via react-native-gesture-handler.

@tanstack/react-query — bibliotek för hantering av servertillstånd. React Query cachar API-svar, begär automatiskt om data vid nätverksförändringar (refetchOnReconnect) och stödjer paginering med useInfiniteQuery. Version 5.x innehåller optimistiska uppdateringar för UX — gränssnittet uppdateras innan det tar emot serverns svar och korrigeras sedan.