React Native dalam pengembangan mobile: apa itu, konsep utama dan cara kerjanya

Dasar (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — ekstensi sintaksis JavaScript untuk mendeskripsikan UI. Terlihat seperti HTML tetapi bekerja melalui React.createElement(). Ekspresi JSX: {variable}, {condition && <View />}, {array.map()}. Functional Component — fungsi yang mengembalikan JSX. Menerima props sebagai argumen. Standar modern React (sebelum React 16.8 menggunakan Class Components). Hooks — fungsi untuk mengakses status dan siklus hidup dari Functional Component. Aturan Hooks: hanya di tingkat atas, hanya di Functional Components.

Referensi Hooks

useState — status lokal. useEffect — efek samping. useContext — akses ke Context. useRef — referensi yang dapat diubah. useCallback — memoisasi fungsi. useMemo — memoisasi nilai. Custom Hooks — logika yang dapat digunakan kembali: function useDebounce(value, delay).

// Functional Component dengan hooks di 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 — mengembalikan [value, setValue]. setValue — mengganti (tidak menggabungkan seperti setState di Class). Untuk objek: setUser(prev => ({ ...prev, name: 'New' })). useEffect — dijalankan setelah render. Array dependensi: [] — sekali (mount), [dep] — saat dep berubah, undefined — setiap render. Fungsi pembersihan — return () => {}. useContext — const value = useContext(MyContext). Memerlukan Context.Provider lebih tinggi di pohon.

useRef — objek yang dapat diubah yang mempertahankan nilai antar render. .current — mutasi. Digunakan untuk: akses ke elemen asli (ref={inputRef}), menyimpan nilai sebelumnya, timer. useCallback — mengembalikan fungsi yang telah dimemoisasi. const handlePress = useCallback(() => {}, [dep]). useMemo — mengembalikan nilai yang telah dimemoisasi. const sorted = useMemo(() => data.sort(), [data]). Gunakan useMemo untuk komputasi yang mahal.

useState — untuk status sederhana. useEffect — untuk panggilan API dan langganan. useCallback/useMemo — untuk optimasi. IT Sectr merekomendasikan untuk tidak mememoisasi semuanya — hanya saat ada masalah kinerja nyata.

Custom Hooks

Custom Hook — fungsi yang menggunakan hook bawaan. Nama dimulai dengan use*. Contoh: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks adalah cara utama untuk menggunakan kembali logika di React Native. IT Sectr merekomendasikan untuk mengekstrak logika bisnis ke Custom Hooks dan menjaga komponen tetap bersih (hanya JSX + gaya).

Komponen (View, Text, FlatList, ScrollView, SafeAreaView)

View — wadah dasar (analog dengan div). Text — teks (satu-satunya komponen untuk teks). TextInput — masukan teks. ScrollView — wadah yang dapat digulir. FlatList — daftar virtual untuk data besar. SectionList — FlatList dengan bagian. SafeAreaView — bantalan otomatis dari Safe Area (takik, bilah status). Pressable — pengganti modern untuk TouchableOpacity. useColorScheme — deteksi tema gelap/terang.

Optimasi FlatList

FlatList — virtualisasi: hanya elemen yang terlihat + windowSize yang di-render. Optimasi: 1) keyExtractor — kunci unik, 2) getItemLayout — tinggi tetap (melewatkan pengukuran onLayout), 3) React.memo untuk renderItem, 4) maxToRenderPerBatch (default 10), 5) windowSize (default 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navigasi di React Native

React Navigation — tumpukan navigasi standar. NativeStackNavigator — animasi asli (push/pop). TabNavigator — tab bawah. DrawerNavigator — menu samping. NavigationContainer — komponen root navigasi. Deep linking — konfigurasi tautan untuk tautan eksternal. Alur autentikasi — navigasi bersyarat: isAuth ? AppStack : AuthStack. IT Sectr merekomendasikan NativeStackNavigator untuk layar utama dan TabNavigator untuk navigasi tingkat pertama.

Gaya (StyleSheet)

StyleSheet.create() — pembuatan gaya. Semua properti dalam camelCase: backgroundColor, fontSize, marginTop. Flexbox — model tata letak default (flexDirection: 'column'). Tanpa kaskade CSS, tanpa pewarisan, tanpa pemilih. Inline styles — berfungsi tetapi tidak disarankan. StyleSheet.compose() — menggabungkan gaya. Platform.select — gaya khusus platform: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — mengelola inset area aman.

Styled Components dan CSS-in-JS

Styled Components — pustaka untuk CSS-in-JS di React Native. Restyle — theming + gaya responsif. NativeWind — Tailwind CSS untuk React Native. Unistyles — gaya cepat dengan CSS atomik. Mode gelap — useColorScheme + gaya dinamis. IT Sectr merekomendasikan StyleSheet.create untuk kesederhanaan dan NativeWind untuk proyek dengan sistem desain.

Animasi (Animated API)

Animated API — animasi deklaratif. Animated.Value — nilai animasi. Animated.timing — animasi sederhana. Animated.spring — animasi pegas. Animated.View — View yang dapat dianimasi. useNativeDriver — animasi di thread asli (transform, opacity — didukung). Animated.loop — animasi berulang. LayoutAnimation — animasi otomatis saat tata letak berubah. reanimated 2/3 (pustaka) — alternatif yang lebih berkinerja. Metro Bundler — penggabung JavaScript. Menggabungkan JS + aset menjadi satu bundel. Mendukung Fast Refresh (Hot Reload). Hermes — mesin JS yang dioptimalkan untuk seluler: startup cepat, memori lebih sedikit. Default sejak RN 0.70+.

Gesture Handler dan Animasi

React Native Gesture Handler — pemrosesan gerakan asli. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — API gerakan deklaratif. Reanimated + Gesture Handler — kombinasi untuk animasi 60fps dengan gerakan. react-native-skia — rendering GPU untuk grafis 2D kompleks. IT Sectr merekomendasikan Reanimated 3 untuk semua animasi yang lebih berkinerja dari Animated API.

Jaringan (fetch, AsyncStorage, API)

fetch — klien HTTP bawaan. Mendukung GET, POST, headers, body. Axios — pustaka populer dengan pencegat. AsyncStorage — penyimpanan kunci-nilai (mirip UserDefaults). MMKV — alternatif cepat untuk AsyncStorage dari WeChat. react-native-keychain — penyimpanan token yang aman. React Query (TanStack Query) — manajemen status server: caching, validasi ulang, paginasi. IT Sectr merekomendasikan React Query untuk permintaan API dan MMKV untuk penyimpanan lokal.

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 dan Turbo Modules

Native Module — jembatan antara JS dan kode asli (Java/Kotlin untuk Android, ObjC/Swift untuk iOS). Memungkinkan pemanggilan API asli dari JS. Turbo Modules (New Architecture) — pengganti Native Modules lama. Panggilan sinkron, pengetikan melalui Codegen, lebih sedikit overhead. Fabric Renderer — perender baru dengan tata letak sinkron. JSI (JavaScript Interface) — akses langsung JS ke objek asli tanpa jembatan. IT Sectr merekomendasikan Turbo Modules untuk proyek baru dan Native Modules untuk proyek yang sudah ada.

// Modul Asli Android (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)
    }
}

Pengujian (Jest, React Native Testing Library)

Jest — pelari pengujian standar. describe/it/expect. React Native Testing Library — pengujian komponen. render, fireEvent, waitFor. screen.getByText, getByTestId — pencarian. userEvent — simulasi tindakan. Pengujian Snapshot — toMatchSnapshot(). MSW (Mock Service Worker) — tiruan API. Detox — pengujian E2E untuk RN (grey-box, asli). IT Sectr merekomendasikan React Native Testing Library untuk komponen dan Detox untuk skenario ujung ke ujung.

CodePush (App Center) — pembaruan OTA bundel JS tanpa publikasi ke App Store/Google Play. Digunakan untuk: perbaikan panas, pengujian A/B, perubahan konten. Keterbatasan: tidak dapat mengubah kode asli. Alternatif: EAS Update (Expo), react-native-update. IT Sectr merekomendasikan CodePush untuk perbaikan mendesak dan EAS Update untuk proyek Expo.

Expo — framework untuk React Native. Alur kerja terkelola — semua konfigurasi melalui app.json. Development builds — modul asli kustom tanpa eject. Expo SDK — modul bawaan: kamera, biometrik, notifikasi. EAS Build — build cloud. Expo Router — perutean berbasis file (mirip Next.js). IT Sectr merekomendasikan Expo untuk proyek baru dan bare RN untuk proyek dengan kustomisasi asli mendalam.