React Native in mobiele ontwikkeling: wat het is, kernconcepten en hoe het werkt

Basis (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — syntactische uitbreiding van JavaScript voor het beschrijven van UI. Ziet eruit als HTML, maar werkt via React.createElement(). JSX-expressies: {variable}, {condition && <View />}, {array.map()}. Functional Component — een functie die JSX retourneert. Accepteert props als argument. Moderne React-standaard (vóór React 16.8 werden Class Components gebruikt). Hooks — functies voor toegang tot toestand en levenscyclus vanuit Functional Component. Hooks-regels: alleen op het hoogste niveau, alleen in Functional Components.

Hooks-referentie

useState — lokale toestand. useEffect — bijwerkingen. useContext — toegang tot Context. useRef — veranderbare ref. useCallback — functie-memoization. useMemo — waarde-memoization. Custom Hooks — herbruikbare logica: function useDebounce(value, delay).

// Functional Component met hooks in 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 — retourneert [value, setValue]. setValue — vervangt (voegt niet samen zoals setState in Class). Voor objecten: setUser(prev => ({ ...prev, name: 'New' })). useEffect — wordt uitgevoerd na rendering. Afhankelijkheidsarray: [] — eenmalig (mount), [dep] — wanneer dep verandert, undefined — elke rendering. Opruimfunctie — return () => {}. useContext — const value = useContext(MyContext). Vereist Context.Provider hoger in de boom.

useRef — veranderbaar object dat waarde behoudt tussen renderings. .current — mutatie. Gebruikt voor: toegang tot native elementen (ref={inputRef}), opslaan van vorige waarden, timers. useCallback — retourneert een gememoriseerde functie. const handlePress = useCallback(() => {}, [dep]). useMemo — retourneert een gememoriseerde waarde. const sorted = useMemo(() => data.sort(), [data]). Gebruik useMemo voor dure berekeningen.

useState — voor eenvoudige toestand. useEffect — voor API-aanroepen en abonnementen. useCallback/useMemo — voor optimalisatie. IT Sectr raadt aan niet alles te memoriseren — alleen bij echte prestatieproblemen.

Custom Hooks

Custom Hook — een functie die ingebouwde hooks gebruikt. Naam begint met use*. Voorbeelden: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks zijn de primaire manier om logica te hergebruiken in React Native. IT Sectr raadt aan om bedrijfslogica in Custom Hooks onder te brengen en componenten schoon te houden (alleen JSX + stijlen).

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

View — basiscontainer (analoog aan div). Text — tekst (enige component voor tekst). TextInput — tekstinvoer. ScrollView — scrollbare container. FlatList — gevirtualiseerde lijst voor grote gegevens. SectionList — FlatList met secties. SafeAreaView — automatische opvulling van Safe Area (inkeping, statusbalk). Pressable — moderne vervanging voor TouchableOpacity. useColorScheme — detectie van donker/licht thema.

FlatList-optimalisatie

FlatList — virtualisatie: alleen zichtbare elementen + windowSize worden gerenderd. Optimalisatie: 1) keyExtractor — unieke sleutel, 2) getItemLayout — vaste hoogte (slaat onLayout-meting over), 3) React.memo voor renderItem, 4) maxToRenderPerBatch (standaard 10), 5) windowSize (standaard 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navigatie in React Native

React Navigation — standaard navigatiestack. NativeStackNavigator — native animatie (push/pop). TabNavigator — onderste tabbladen. DrawerNavigator — zijmenu. NavigationContainer — rootcomponent van navigatie. Deep linking — linkconfiguratie voor externe links. Authenticatiestroom — conditionele navigatie: isAuth ? AppStack : AuthStack. IT Sectr raadt NativeStackNavigator aan voor hoofdschermen en TabNavigator voor navigatie op het eerste niveau.

Stijlen (StyleSheet)

StyleSheet.create() — aanmaken van stijlen. Alle eigenschappen in camelCase: backgroundColor, fontSize, marginTop. Flexbox — standaard lay-outmodel (flexDirection: 'column'). Geen CSS-cascade, geen overerving, geen selectors. Inline stijlen — werken maar worden niet aanbevolen. StyleSheet.compose() — combineren van stijlen. Platform.select — platformspecifieke stijlen: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — beheer van safe area-insets.

Styled Components en CSS-in-JS

Styled Components — bibliotheek voor CSS-in-JS in React Native. Restyle — theming + responsieve stijlen. NativeWind — Tailwind CSS voor React Native. Unistyles — snelle stijlen met atomic CSS. Donkere modus — useColorScheme + dynamische stijlen. IT Sectr raadt StyleSheet.create aan voor eenvoud en NativeWind voor projecten met een designsysteem.

Animatie (Animated API)

Animated API — declaratieve animatie. Animated.Value — animatiewaarde. Animated.timing — eenvoudige animatie. Animated.spring — veeranimatie. Animated.View — animeerbare View. useNativeDriver — animatie op de native thread (transform, opacity — ondersteund). Animated.loop — lusanimatie. LayoutAnimation — automatische animatie bij lay-outwijziging. reanimated 2/3 (bibliotheek) — krachtiger alternatief. Metro Bundler — JavaScript-bundler. Bundelt JS + assets in één bundle. Ondersteunt Fast Refresh (Hot Reload). Hermes — JS-engine geoptimaliseerd voor mobiel: snelle start, minder geheugen. Standaard sinds RN 0.70+.

Gesture Handler en animaties

React Native Gesture Handler — native verwerking van gebaren. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — declaratieve gebaren-API. Reanimated + Gesture Handler — combinatie voor 60fps-animaties met gebaren. react-native-skia — GPU-rendering voor complexe 2D-graphics. IT Sectr raadt Reanimated 3 aan voor alle animaties die krachtiger zijn dan Animated API.

Netwerken (fetch, AsyncStorage, API)

fetch — ingebouwde HTTP-client. Ondersteunt GET, POST, headers, body. Axios — populaire bibliotheek met interceptors. AsyncStorage — sleutel-waarde-opslag (vergelijkbaar met UserDefaults). MMKV — snel alternatief voor AsyncStorage van WeChat. react-native-keychain — veilige tokenopslag. React Query (TanStack Query) — serverstatusbeheer: caching, herevaluatie, paginering. IT Sectr raadt React Query aan voor API-verzoeken en MMKV voor lokale opslag.

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

Native Module — brug tussen JS en native code (Java/Kotlin voor Android, ObjC/Swift voor iOS). Maakt het mogelijk om native API's vanuit JS aan te roepen. Turbo Modules (New Architecture) — vervanging van oude Native Modules. Synchrone aanroep, typering via Codegen, minder overhead. Fabric Renderer — nieuwe renderer met synchrone lay-out. JSI (JavaScript Interface) — directe JS-toegang tot native objecten zonder brug. IT Sectr raadt Turbo Modules aan voor nieuwe projecten en Native Modules voor bestaande.

// 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)
    }
}

Testen (Jest, React Native Testing Library)

Jest — standaard testrunner. describe/it/expect. React Native Testing Library — componenttesten. render, fireEvent, waitFor. screen.getByText, getByTestId — zoeken. userEvent — actiesimulatie. Snapshot-testen — toMatchSnapshot(). MSW (Mock Service Worker) — API-mocking. Detox — E2E-testen voor RN (grey-box, native). IT Sectr raadt React Native Testing Library aan voor componenten en Detox voor end-to-end-scenario's.

CodePush (App Center) — OTA-updates van JS-bundle zonder publicatie in App Store/Google Play. Gebruikt voor: noodreparaties, A/B-testen, inhoudswijzigingen. Beperkingen: kan native code niet wijzigen. Alternatieven: EAS Update (Expo), react-native-update. IT Sectr raadt CodePush aan voor dringende reparaties en EAS Update voor Expo-projecten.

Expo — framework voor React Native. Managed workflow — alle configuraties via app.json. Development builds — aangepaste native modules zonder eject. Expo SDK — ingebouwde modules: camera, biometrie, meldingen. EAS Build — cloud build. Expo Router — bestandsgebaseerde routering (vergelijkbaar met Next.js). IT Sectr raadt Expo aan voor nieuwe projecten en bare RN voor projecten met diepe native aanpassing.