React Native: ano ito, paano gumagana ang Bridge at JavaScript na kapaligiran

Ano ang React Native

React Native — ay isang framework na ginawa ng Facebook team (ngayon ay Meta) at inilabas bilang open-source noong 2015. Hindi tulad ng hybrid approach (Cordova, Ionic), ang React Native ay hindi gumagamit ng WebView. Sa halip, ang mga JavaScript component ay nai-map sa native na UI element: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

Ang unang bersyon ng React Native ay sumusuporta lamang sa iOS. Ang suporta sa Android ay idinagdag noong 2016. Bersyon 0.60 (2019) ay nagpakilala ng Autolinking — awtomatikong pagkonekta ng native dependencies. React Native 0.68 (2022) ay nagdagdag ng bagong Fabric + TurboModules architecture. Ang kasalukuyang stable na bersyon 0.74 (2024) ay ganap na nailipat sa New Architecture na may suporta sa Yoga 3.0 para sa Flexbox layout.

Ayon sa Statista 2024, ang React Native ay ginagamit sa 38% ng cross-platform na proyekto. Ang framework ay ginagamit ng Discord, Instagram, Shopify, Pinterest, Skype at Uber Eats. Ginagamit ng Meta ang React Native sa Facebook at Instagram — pangunahing mobile application na may 2 bilyong user.

Kasaysayan at ebolusyon ng React Native

React Native ay inihayag sa React.js Conf noong Enero 2015. Ang ideya ay ilipat ang deklaratibong paradigma ng React mula sa web patungo sa mobile platform. Ang unang commit sa repository ay lumitaw noong 2013 bilang isang internal na proyekto ng Facebook para gawin ang Facebook Groups application sa iOS.

Bersyon 0.70 (2022) ay nagpakilala ng Hermes bilang default na JavaScript engine. Ang Hermes ay isang engine na may pre-compilation (AOT), na optimize para sa mobile device. Binabawasan nito ang oras ng pag-start ng application ng 50% at laki ng APK ng 30% kumpara sa JavaScriptCore. Sinusuportahan ng Hermes ang ES6 at bahagyang ES2020.

Pagkakaiba sa pagitan ng React Native at React Web

React Web ay nagre-render ng mga component sa DOM element (div, span, p) sa pamamagitan ng ReactDOM. Ang React Native ay nagre-render sa native na component ng platform. Sa halip na <div> ginagamit ang <View>, sa halip na <span> — <Text>. Ang mga style ay itinakda sa pamamagitan ng StyleSheet.create() object, na isinasalin sa CSS properties ng platform. Ang Flexbox ay naka-default sa pamamagitan ng Yoga engine.

Navigation sa React Native ay iba sa web. Sa halip na react-router-dom ginagamit ang React Navigation — isang native library na may suporta para sa Stack, Tab at Drawer navigators. React Navigation 6.x ay gumagamit ng native animations (useNativeDriver) at integration sa Deep Links. Para sa native navigation ng iOS UINavigationController at Android Fragment screens, ginagamit ang react-native-navigation library mula sa Wix.

Arkitektura ng React Native

Arkitektura ng React Native ay tradisyonal na binuo sa paligid ng Bridge — isang asynchronous na JSON channel sa pagitan ng JavaScript environment at native code. Mula sa bersyon 0.68, ipinakilala ng Meta ang New Architecture, na pumapalit sa Bridge ng JSI (JavaScript Interface) at Fabric. Tingnan natin ang parehong modelo.

Bridge at Fabric

Bridge — ay isang naka-serialize na JSON protocol na tumatakbo sa maraming thread: JS Thread (interpretation ng React code), Main Thread (UI) at Native Modules Thread (API). Bawat interaction sa pagitan ng JS at native code ay dumadaan sa serialization at deserialization ng mga object, na nagdudulot ng pagkaantala sa mga madalas na tawag. Sa pag-scroll ng listahan ng 1000 element, ang Bridge ay gumagawa ng hanggang 10,000 JSON message bawat segundo.

Fabric — bagong rendering system sa React Native. Sa halip na Bridge, ang Fabric ay gumagamit ng C++ Shadow Tree na nagsi-sync sa UI thread sa pamamagitan ng JSI. Tinatanggal nito ang JSON serialization: ang native C++ code ay direktang tumatawag ng mga function sa JavaScript environment at vice versa. Binabawasan ng Fabric ang rendering latency mula 16 ms (Bridge) hanggang 2–4 ms.

TurboModules — pangalawang bahagi ng New Architecture. Sa lumang modelo, lahat ng native module ay na-load sa pagsisimula ng application. Ang TurboModules ay naglo-load ng mga module nang tamad (lazy loading) — kapag unang hiniling ng JS code ang mga ito. Binabawasan nito ang cold start time ng 40% sa mga application na may 20+ native module.

Halimbawa ng application sa 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 — ay mekanismo para tumawag ng platform API mula sa JavaScript. Kung ang functionality ay hindi sakop ng standard React Native components (camera, Bluetooth, biometrics), ang developer ay sumulat ng module sa Swift/Kotlin at irehistro ito sa pamamagitan ng RCTBridgeModule o TurboModule. Ang native function ay tinatawag mula sa JS sa pamamagitan ng NativeModules.CameraModule.takePhoto().

Ang React Native ay nagbibigay ng ready-made native modules para sa access sa accelerometer (react-native-sensors), geolocation (@react-native-community/geolocation), biometrics (react-native-biometrics) at local notification (@notifee/react-native). Para sa custom scenario, ang Expo ay nag-aalok ng Expo Modules API — mas simpleng interface para gumawa ng native module nang walang Xcode o Android Studio.

Mga Bentahe ng React Native

Malaking komunidad — Ang React Native ay may pinakamalaking komunidad sa mga cross-platform framework. Sa GitHub, ang proyekto ay may 117,000+ bituin, 1800+ kontribyutor. Ang npm ay nagda-download ng react-native ng 3 milyon+ beses bawat linggo. Ang mga tanong tungkol sa React Native ay bumubuo ng 5% ng lahat ng tanong sa mobile development section sa Stack Overflow.

JavaScript ecosystem — Ang mga React developer ay gumagamit ng parehong tools tulad ng sa web: npm, Babel, ESLint, Prettier, Jest, TypeScript. Ang business logic ay maaaring magamit muli sa pagitan ng web version (React) at mobile application (React Native). Ang mga library na Redux, Zustand, React Query, React Hook Form ay gumagana sa parehong platform nang walang pagbabago.

Expo — ay isang SDK at mga tool na nagpapasimple ng pag-develop sa React Native. Ang Expo ay nagbibigay ng ready-made modules (camera, notification, mapa, OAuth), cloud builds (EAS Build) at OTA updates (EAS Update). Ang Expo Go ay nagpapahintulot na patakbuhin ang application sa isang pisikal na device nang walang Xcode at Android Studio. Ayon sa data ng Expo 2024, 70% ng bagong React Native projects ay gumagamit ng Expo.

OTA updates — feature na available sa pamamagitan ng Expo Update at CodePush (Microsoft). Ang mga developer ay maaaring magpadala ng mga update ng JavaScript bundle nang direkta sa mga user nang hindi dumadaan sa App Store o Google Play review. Pinapabilis nito ang pag-aayos ng kritikal na bug mula 2–5 araw (paghihintay ng review) hanggang 1–2 oras.

TypeScript support ay naka-default mula sa React Native 0.71. Ang project template ay may kasamang tsconfig.json, types para sa lahat ng component at suporta para sa strict mode. Ang Flow (static typing mula sa Facebook) ay suportado rin, ngunit opisyal na inirerekomenda ng Meta ang TypeScript. Ang TypeScript template ay bumubuo ng 85% ng bagong projects ayon sa State of React Native 2024 survey.

Ecosystem at mga sikat na library

npm — pangunahing package registry para sa React Native. Ang paghahanap ng library ay nifi-filter ng keyword na react-native. Para sa installation ginagamit ang npm install o yarn add. Ang React Native CLI ay awtomatikong nagli-link ng native dependencies (mula bersyon 0.60). Para sa Expo projects, ang installation ay pinamamahalaan sa pamamagitan ng expo install, na pumipili ng compatible na bersyon ng library.

Mga pangunahing library

@react-navigation/native — de facto standard para sa navigation sa React Native. Ang library ay may kasamang Stack Navigator (animated transitions), Tab Navigator (ibaba menu para sa iOS/Android), Drawer Navigator (sidebar menu) at Material Top Tab. React Navigation 7.x (2024) ay nagpakilala ng static route configuration at buong suporta para sa React 18 na may useSyncExternalStore.

react-native-reanimated — library para sa high-performance animations. Ang Reanimated 3.x ay nagpapatakbo ng mga animation sa UI thread (worklet), na lumalampas sa JS thread. Ito ay ginagarantiyahan ang 60 FPS kahit sa pag-animate ng 100+ element. Ang useSharedValue, useAnimatedStyle at withSpring ay pumapalit sa Animated API mula sa standard package. Pinangangasiwaan ng Reanimated ang touch gestures sa pamamagitan ng react-native-gesture-handler.

@tanstack/react-query — library para sa pamamahala ng server state. Ang React Query ay nag-cache ng API responses, awtomatikong nag-re-request ng data kapag nagbago ang network (refetchOnReconnect) at sumusuporta sa pagination gamit ang useInfiniteQuery. Bersyon 5.x ay may kasamang optimistic updates para sa UX — ang interface ay nag-a-update bago matanggap ang server response, pagkatapos ay itinatama.