React Native sa mobile development: ano ito, mga pangunahing konsepto at kung paano ito gumagana

Mga Batayan (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — sintaktikong ekstensyon ng JavaScript para ilarawan ang UI. Mukhang HTML ngunit gumagana sa pamamagitan ng React.createElement(). Mga JSX expression: {variable}, {condition && <View />}, {array.map()}. Functional Component — isang function na nagbabalik ng JSX. Tumatanggap ng props bilang argumento. Modernong pamantayan ng React (bago ang React 16.8, ginamit ang Class Components). Hooks — mga function para ma-access ang estado at lifecycle mula sa Functional Component. Mga patakaran ng Hooks: sa pinakamataas na antas lamang, sa Functional Components lamang.

Sanggunian ng Hooks

useState — lokal na estado. useEffect — mga side effect. useContext — access sa Context. useRef — nababagong sanggunian. useCallback — pagsasaulo ng function. useMemo — pagsasaulo ng halaga. Custom Hooks — magagamit muli na lohika: function useDebounce(value, delay).

// Functional Component na may hooks sa React Native
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — nagbabalik ng [value, setValue]. setValue — pumapalit (hindi nagsasama tulad ng setState sa Class). Para sa mga object: setUser(prev => ({ ...prev, name: 'New' })). useEffect — tumatakbo pagkatapos ng render. Array ng dependencies: [] — isang beses (mount), [dep] — kapag nagbago ang dep, undefined — bawat render. Function ng paglilinis — return () => {}. useContext — const value = useContext(MyContext). Nangangailangan ng Context.Provider na mas mataas sa puno.

useRef — nababagong object na nagpapanatili ng halaga sa pagitan ng mga render. .current — pagbabago. Ginagamit para sa: access sa native elements (ref={inputRef}), pag-imbak ng mga nakaraang halaga, timer. useCallback — nagbabalik ng isinaulong function. const handlePress = useCallback(() => {}, [dep]). useMemo — nagbabalik ng isinaulong halaga. const sorted = useMemo(() => data.sort(), [data]). Gamitin ang useMemo para sa mahal na mga komputasyon.

useState — para sa simpleng estado. useEffect — para sa mga tawag sa API at subscription. useCallback/useMemo — para sa pag-optimize. Inirerekomenda ng IT Sectr na huwag isaulo ang lahat — kapag may tunay na problema sa pagganap lamang.

Custom Hooks

Custom Hook — isang function na gumagamit ng built-in na hooks. Pangalan ay nagsisimula sa use*. Halimbawa: useDebounce, useNetworkStatus, useAppState, useKeyboard. Ang Custom Hooks ay ang pangunahing paraan upang magamit muli ang lohika sa React Native. Inirerekomenda ng IT Sectr na ilabas ang lohika ng negosyo sa Custom Hooks at panatilihing malinis ang mga component (JSX + estilo lamang).

Mga Component (View, Text, FlatList, ScrollView, SafeAreaView)

View — pangunahing lalagyan (kahalintulad ng div). Text — teksto (tanging component para sa teksto). TextInput — input ng teksto. ScrollView — lalagyan na pwedeng i-scroll. FlatList — birtual na listahan para sa malaking data. SectionList — FlatList na may mga seksyon. SafeAreaView — awtomatikong padding mula sa Safe Area (notch, status bar). Pressable — modernong kapalit para sa TouchableOpacity. useColorScheme — pagtuklas ng madilim/maliwanag na tema.

Pag-optimize ng FlatList

FlatList — birtualisasyon: tanging nakikitang elemento + windowSize ang nire-render. Pag-optimize: 1) keyExtractor — natatanging susi, 2) getItemLayout — nakapirming taas (laktawan ang pagsukat ng onLayout), 3) React.memo para sa renderItem, 4) maxToRenderPerBatch (default 10), 5) windowSize (default 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navigation sa React Native

React Navigation — karaniwang navigation stack. NativeStackNavigator — native na animasyon (push/pop). TabNavigator — mga tab sa ibaba. DrawerNavigator — side menu. NavigationContainer — root component ng navigation. Deep linking — configuration ng link para sa mga panlabas na link. Daloy ng pagpapatotoo — kondisyonal na navigation: isAuth ? AppStack : AuthStack. Inirerekomenda ng IT Sectr ang NativeStackNavigator para sa mga pangunahing screen at TabNavigator para sa unang antas ng navigation.

Mga Estilo (StyleSheet)

StyleSheet.create() — paggawa ng mga estilo. Lahat ng property sa camelCase: backgroundColor, fontSize, marginTop. Flexbox — default na modelo ng layout (flexDirection: 'column'). Walang CSS cascade, walang mana, walang pumipili. Inline styles — gumagana ngunit hindi inirerekomenda. StyleSheet.compose() — pagsasama ng mga estilo. Platform.select — estilo na tiyak sa platform: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — pamamahala ng safe area insets.

Styled Components at CSS-in-JS

Styled Components — library para sa CSS-in-JS sa React Native. Restyle — theming + responsive na mga estilo. NativeWind — Tailwind CSS para sa React Native. Unistyles — mabilis na estilo na may atomic CSS. Madilim na mode — useColorScheme + dinamikong mga estilo. Inirerekomenda ng IT Sectr ang StyleSheet.create para sa pagiging simple at NativeWind para sa mga proyektong may sistema ng disenyo.

Animasyon (Animated API)

Animated API — deklaratibong animasyon. Animated.Value — halaga ng animasyon. Animated.timing — simpleng animasyon. Animated.spring — spring animasyon. Animated.View — View na maaaring i-animate. useNativeDriver — animasyon sa native thread (transform, opacity — sinusuportahan). Animated.loop — paulit-ulit na animasyon. LayoutAnimation — awtomatikong animasyon kapag nagbago ang layout. reanimated 2/3 (library) — mas mahusay na alternatibo. Metro Bundler — JavaScript bundler. Nag-bundle ng JS + assets sa isang bundle. Sumusuporta sa Fast Refresh (Hot Reload). Hermes — JS engine na na-optimize para sa mobile: mabilis na pagsisimula, mas kaunting memorya. Default mula RN 0.70+.

Gesture Handler at mga Animasyon

React Native Gesture Handler — native na pagproseso ng kilos. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — deklaratibong API ng kilos. Reanimated + Gesture Handler — kombinasyon para sa 60fps animasyon na may mga kilos. react-native-skia — GPU rendering para sa komplikadong 2D graphics. Inirerekomenda ng IT Sectr ang Reanimated 3 para sa lahat ng animasyon na mas mahusay kaysa sa Animated API.

Networking (fetch, AsyncStorage, API)

fetch — built-in na HTTP client. Sumusuporta sa GET, POST, headers, body. Axios — sikat na library na may mga interceptors. AsyncStorage — key-value na imbakan (katulad ng UserDefaults). MMKV — mabilis na alternatibo sa AsyncStorage mula sa WeChat. react-native-keychain — ligtas na imbakan ng token. React Query (TanStack Query) — pamamahala ng server state: caching, revalidation, pagination. Inirerekomenda ng IT Sectr ang React Query para sa mga kahilingan sa API at MMKV para sa lokal na imbakan.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules at Turbo Modules

Native Module — tulay sa pagitan ng JS at native code (Java/Kotlin para sa Android, ObjC/Swift para sa iOS). Nagpapahintulot sa pagtawag ng native API mula sa JS. Turbo Modules (New Architecture) — kapalit ng lumang Native Modules. Synchronous na tawag, pag-type sa pamamagitan ng Codegen, mas kaunting overhead. Fabric Renderer — bagong renderer na may synchronous na layout. JSI (JavaScript Interface) — direktang access ng JS sa native na mga object nang walang tulay. Inirerekomenda ng IT Sectr ang Turbo Modules para sa mga bagong proyekto at Native Modules para sa mga umiiral na.

// Android Native Module (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

Pagsubok (Jest, React Native Testing Library)

Jest — karaniwang test runner. describe/it/expect. React Native Testing Library — pagsubok ng component. render, fireEvent, waitFor. screen.getByText, getByTestId — paghahanap. userEvent — simulasyon ng aksyon. Snapshot test — toMatchSnapshot(). MSW (Mock Service Worker) — paggaya ng API. Detox — E2E test para sa RN (grey-box, native). Inirerekomenda ng IT Sectr ang React Native Testing Library para sa mga component at Detox para sa end-to-end na mga sitwasyon.

CodePush (App Center) — OTA update ng JS bundle nang hindi nag-publish sa App Store/Google Play. Ginagamit para sa: mabilis na pag-aayos, A/B test, pagbabago ng nilalaman. Limitasyon: hindi maaaring baguhin ang native code. Alternatibo: EAS Update (Expo), react-native-update. Inirerekomenda ng IT Sectr ang CodePush para sa agarang pag-aayos at EAS Update para sa mga proyekto ng Expo.

Expo — framework para sa React Native. Pinamamahalaang workflow — lahat ng configuration sa pamamagitan ng app.json. Development builds — custom native modules nang walang eject. Expo SDK — built-in na modules: camera, biometrics, notification. EAS Build — cloud build. Expo Router — file-based routing (katulad ng Next.js). Inirerekomenda ng IT Sectr ang Expo para sa mga bagong proyekto at bare RN para sa mga proyektong may malalim na native customization.