React Native inom mobilutveckling: vad det är, nyckelbegrepp och hur det fungerar

Grundläggande (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — syntaktisk utökning av JavaScript för att beskriva UI. Ser ut som HTML men fungerar via React.createElement(). JSX-uttryck: {variable}, {condition && <View />}, {array.map()}. Functional Component — en funktion som returnerar JSX. Accepterar props som argument. Modern React-standard (före React 16.8 användes Class Components). Hooks — funktioner för att komma åt tillstånd och livscykel från Functional Component. Hooks-regler: endast på högsta nivån, endast i Functional Components.

Hooks-referens

useState — lokalt tillstånd. useEffect — bieffekter. useContext — åtkomst till Context. useRef — föränderlig referens. useCallback — funktions-memoization. useMemo — värde-memoization. Custom Hooks — återanvändbar logik: function useDebounce(value, delay).

// Functional Component med hooks i 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 — returnerar [value, setValue]. setValue — ersätter (slår inte samman som setState i Class). För objekt: setUser(prev => ({ ...prev, name: 'New' })). useEffect — körs efter rendering. Beroendematris: [] — en gång (montering), [dep] — när dep ändras, undefined — varje rendering. Rensningsfunktion — return () => {}. useContext — const value = useContext(MyContext). Kräver Context.Provider högre upp i trädet.

useRef — föränderligt objekt som behåller värdet mellan renderingar. .current — mutation. Används för: åtkomst till native-element (ref={inputRef}), lagring av tidigare värden, timer. useCallback — returnerar en memoiserad funktion. const handlePress = useCallback(() => {}, [dep]). useMemo — returnerar ett memoiserat värde. const sorted = useMemo(() => data.sort(), [data]). Använd useMemo för dyra beräkningar.

useState — för enkelt tillstånd. useEffect — för API-anrop och prenumererationer. useCallback/useMemo — för optimering. IT Sectr rekommenderar att inte memoisera allt — endast när det finns verkliga prestandaproblem.

Custom Hooks

Custom Hook — en funktion som använder inbyggda hooks. Namnet börjar med use*. Exempel: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks är det primära sättet att återanvända logik i React Native. IT Sectr rekommenderar att flytta affärslogik till Custom Hooks och hålla komponenter rena (endast JSX + stilar).

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

View — grundläggande behållare (analog med div). Text — text (enda komponenten för text). TextInput — textinmatning. ScrollView — rullningsbar behållare. FlatList — virtualiserad lista för stora datamängder. SectionList — FlatList med sektioner. SafeAreaView — automatisk utfyllnad från Safe Area (skåra, statusfält). Pressable — modernt alternativ till TouchableOpacity. useColorScheme — detektering av mörkt/ljust tema.

FlatList-optimering

FlatList — virtualisering: endast synliga element + windowSize renderas. Optimering: 1) keyExtractor — unik nyckel, 2) getItemLayout — fast höjd (hoppar över onLayout-mätning), 3) React.memo för renderItem, 4) maxToRenderPerBatch (standard 10), 5) windowSize (standard 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navigering i React Native

React Navigation — standard navigationsstack. NativeStackNavigator — native animation (push/pop). TabNavigator — flikar längst ner. DrawerNavigator — sidomeny. NavigationContainer — rotkomponent för navigering. Deep linking — länkkonfiguration för externa länkar. Autentiseringsflöde — villkorlig navigering: isAuth ? AppStack : AuthStack. IT Sectr rekommenderar NativeStackNavigator för huvudskärmar och TabNavigator för navigering på första nivån.

Stilar (StyleSheet)

StyleSheet.create() — skapande av stilar. Alla egenskaper i camelCase: backgroundColor, fontSize, marginTop. Flexbox — standardlayoutmodell (flexDirection: 'column'). Ingen CSS-kaskad, inget arv, inga väljare. Inline-stilar — fungerar men rekommenderas inte. StyleSheet.compose() — kombinera stilar. Platform.select — platformspecifika stilar: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — hantering av safe area-insatser.

Styled Components och CSS-in-JS

Styled Components — bibliotek för CSS-in-JS i React Native. Restyle — teman + responsiva stilar. NativeWind — Tailwind CSS för React Native. Unistyles — snabba stilar med atomär CSS. Mörkt läge — useColorScheme + dynamiska stilar. IT Sectr rekommenderar StyleSheet.create för enkelhet och NativeWind för projekt med designsystem.

Animation (Animated API)

Animated API — deklarativ animation. Animated.Value — animationsvärde. Animated.timing — enkel animation. Animated.spring — fjäderanimation. Animated.View — animerbar View. useNativeDriver — animation på native-tråden (transform, opacity — stöds). Animated.loop — loopad animation. LayoutAnimation — automatisk animation vid layoutändring. reanimated 2/3 (bibliotek) — mer prestandastarkt alternativ. Metro Bundler — JavaScript-paketerare. Paketerar JS + tillgångar i ett bundle. Stöder Fast Refresh (Hot Reload). Hermes — JS-motor optimerad för mobil: snabb start, mindre minne. Standard sedan RN 0.70+.

Gesture Handler och animationer

React Native Gesture Handler — native gestbearbetning. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — deklarativ gest-API. Reanimated + Gesture Handler — kombination för 60fps-animationer med gester. react-native-skia — GPU-rendering för komplex 2D-grafik. IT Sectr rekommenderar Reanimated 3 för alla animationer som är mer prestandastarka än Animated API.

Nätverk (fetch, AsyncStorage, API)

fetch — inbyggd HTTP-klient. Stöder GET, POST, headers, body. Axios — populärt bibliotek med interceptorer. AsyncStorage — nyckel-värde-lagring (liknande UserDefaults). MMKV — snabbt alternativ till AsyncStorage från WeChat. react-native-keychain — säker tokenlagring. React Query (TanStack Query) — servertillståndshantering: cachning, omvalidering, paginering. IT Sectr rekommenderar React Query för API-anrop och MMKV för lokal lagring.

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

Native Module — bro mellan JS och native-kod (Java/Kotlin för Android, ObjC/Swift för iOS). Gör det möjligt att anropa native API:er från JS. Turbo Modules (New Architecture) — ersättning för gamla Native Modules. Synkront anrop, typning via Codegen, mindre overhead. Fabric Renderer — ny renderare med synkron layout. JSI (JavaScript Interface) — direkt JS-åtkomst till native-objekt utan bro. IT Sectr rekommenderar Turbo Modules för nya projekt och Native Modules för befintliga.

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

Testning (Jest, React Native Testing Library)

Jest — standard testrunner. describe/it/expect. React Native Testing Library — komponenttestning. render, fireEvent, waitFor. screen.getByText, getByTestId — sökning. userEvent — åtgärdssimulering. Snapshot-tester — toMatchSnapshot(). MSW (Mock Service Worker) — API-mockning. Detox — E2E-tester för RN (grey-box, native). IT Sectr rekommenderar React Native Testing Library för komponenter och Detox för end-to-end-scenarier.

CodePush (App Center) — OTA-uppdateringar av JS-bundle utan publicering i App Store/Google Play. Används för: snabbkorrigeringar, A/B-tester, innehållsändringar. Begränsningar: kan inte ändra native-kod. Alternativ: EAS Update (Expo), react-native-update. IT Sectr rekommenderar CodePush för akuta korrigeringar och EAS Update för Expo-projekt.

Expo — ramverk för React Native. Hanterat arbetsflöde — alla konfigurationer via app.json. Development builds — anpassade native-moduler utan eject. Expo SDK — inbyggda moduler: kamera, biometri, notifieringar. EAS Build — molnbygg. Expo Router — filbaserad routing (liknande Next.js). IT Sectr rekommenderar Expo för nya projekt och bare RN för projekt med djup native-anpassning.