React Native w programowaniu mobilnym: co to jest, kluczowe koncepcje i jak działa

Podstawy (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — rozszerzenie składni JavaScript do opisywania UI. Wygląda jak HTML, ale działa poprzez React.createElement(). Wyrażenia JSX: {variable}, {condition && <View />}, {array.map()}. Functional Component — funkcja zwracająca JSX. Przyjmuje props jako argument. Nowoczesny standard React (przed React 16.8 używano Class Components). Hooks — funkcje do dostępu do stanu i cyklu życia z Functional Component. Zasady Hooks: tylko na najwyższym poziomie, tylko w Functional Components.

Referencja Hooks

useState — stan lokalny. useEffect — efekty uboczne. useContext — dostęp do Context. useRef — mutowalna referencja. useCallback — memoizacja funkcji. useMemo — memoizacja wartości. Custom Hooks — wielokrotnego użytku logika: function useDebounce(value, delay).

// Functional Component z hookami w 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>
  );
}

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

useState — zwraca [value, setValue]. setValue — zastępuje (nie scala jak setState w Class). Dla obiektów: setUser(prev => ({ ...prev, name: 'New' })). useEffect — wykonuje się po renderowaniu. Tablica zależności: [] — raz (montowanie), [dep] — gdy dep się zmienia, undefined — każde renderowanie. Funkcja czyszcząca — return () => {}. useContext — const value = useContext(MyContext). Wymaga Context.Provider wyżej w drzewie.

useRef — mutowalny obiekt przechowujący wartość między renderowaniami. .current — mutacja. Używany do: dostępu do elementów natywnych (ref={inputRef}), przechowywania poprzednich wartości, timerów. useCallback — zwraca zapamiętaną funkcję. const handlePress = useCallback(() => {}, [dep]). useMemo — zwraca zapamiętaną wartość. const sorted = useMemo(() => data.sort(), [data]). Używaj useMemo do kosztownych obliczeń.

useState — dla prostego stanu. useEffect — dla wywołań API i subskrypcji. useCallback/useMemo — do optymalizacji. IT Sectr zaleca niememoizowania wszystkiego — tylko przy rzeczywistych problemach z wydajnością.

Custom Hooks

Custom Hook — funkcja używająca wbudowanych hooków. Nazwa zaczyna się od use*. Przykłady: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks to główny sposób ponownego wykorzystania logiki w React Native. IT Sectr zaleca wyodrębnianie logiki biznesowej do Custom Hooks i utrzymywanie komponentów czystych (tylko JSX + style).

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

View — podstawowy kontener (analogiczny do div). Text — tekst (jedyny komponent dla tekstu). TextInput — wprowadzanie tekstu. ScrollView — przewijany kontener. FlatList — zwirtualizowana lista dla dużych danych. SectionList — FlatList z sekcjami. SafeAreaView — automatyczne odstępy od Safe Area (notch, pasek stanu). Pressable — nowoczesny zamiennik TouchableOpacity. useColorScheme — wykrywanie ciemnego/jasnego motywu.

Optymalizacja FlatList

FlatList — wirtualizacja: renderowane są tylko widoczne elementy + windowSize. Optymalizacja: 1) keyExtractor — unikalny klucz, 2) getItemLayout — stała wysokość (pomija pomiar onLayout), 3) React.memo dla renderItem, 4) maxToRenderPerBatch (domyślnie 10), 5) windowSize (domyślnie 21), 6) removeClippedSubviews, 7) initialNumToRender.

Nawigacja w React Native

React Navigation — standardowy stos nawigacji. NativeStackNavigator — natywna animacja (push/pop). TabNavigator — dolne zakładki. DrawerNavigator — menu boczne. NavigationContainer — główny komponent nawigacji. Deep linking — konfiguracja linkowania dla linków zewnętrznych. Przepływ uwierzytelniania — warunkowa nawigacja: isAuth ? AppStack : AuthStack. IT Sectr zaleca NativeStackNavigator dla głównych ekranów i TabNavigator dla nawigacji pierwszego poziomu.

Style (StyleSheet)

StyleSheet.create() — tworzenie stylów. Wszystkie właściwości w camelCase: backgroundColor, fontSize, marginTop. Flexbox — domyślny model układu (flexDirection: 'column'). Brak kaskady CSS, brak dziedziczenia, brak selektorów. Inline styles — działają, ale nie są zalecane. StyleSheet.compose() — łączenie stylów. Platform.select — style platformowe: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — zarządzanie wcięciami safe area.

Styled Components i CSS-in-JS

Styled Components — biblioteka dla CSS-in-JS w React Native. Restyle — theming + responsywne style. NativeWind — Tailwind CSS dla React Native. Unistyles — szybkie style z atomic CSS. Tryb ciemny — useColorScheme + dynamiczne style. IT Sectr zaleca StyleSheet.create dla prostoty i NativeWind dla projektów z systemem projektowym.

Animacja (Animated API)

Animated API — deklaratywna animacja. Animated.Value — wartość animacji. Animated.timing — prosta animacja. Animated.spring — animacja sprężynowa. Animated.View — animowalny View. useNativeDriver — animacja w natywnym wątku (transform, opacity — obsługiwane). Animated.loop — zapętlona animacja. LayoutAnimation — automatyczna animacja przy zmianie układu. reanimated 2/3 (biblioteka) — bardziej wydajna alternatywa. Metro Bundler — bundler JavaScript. Łączy JS + zasoby w bundle. Obsługuje Fast Refresh (Hot Reload). Hermes — silnik JS zoptymalizowany dla urządzeń mobilnych: szybki start, mniej pamięci. Domyślnie od RN 0.70+.

Gesture Handler i animacje

React Native Gesture Handler — natywne przetwarzanie gestów. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — deklaratywne API gestów. Reanimated + Gesture Handler — kombinacja dla animacji 60fps z gestami. react-native-skia — renderowanie GPU dla złożonej grafiki 2D. IT Sectr zaleca Reanimated 3 dla wszystkich animacji wydajniejszych niż Animated API.

Sieć (fetch, AsyncStorage, API)

fetch — wbudowany klient HTTP. Obsługuje GET, POST, headers, body. Axios — popularna biblioteka z interceptorem. AsyncStorage — magazyn klucz-wartość (analogiczny do UserDefaults). MMKV — szybka alternatywa dla AsyncStorage od WeChat. react-native-keychain — bezpieczne przechowywanie tokenów. React Query (TanStack Query) — zarządzanie stanem serwera: cache, rewalidacja, paginacja. IT Sectr zaleca React Query dla żądań API i MMKV dla przechowywania lokalnego.

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

Native Module — most między JS a kodem natywnym (Java/Kotlin dla Android, ObjC/Swift dla iOS). Umożliwia wywoływanie natywnych API z JS. Turbo Modules (New Architecture) — zamiennik starych Native Modules. Synchroniczne wywołanie, typowanie przez Codegen, mniejszy narzut. Fabric Renderer — nowy renderer z synchronicznym układem. JSI (JavaScript Interface) — bezpośredni dostęp JS do obiektów natywnych bez mostu. IT Sectr zaleca Turbo Modules dla nowych projektów i Native Modules dla istniejących.

// Natywny moduł Androida (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)
    }
}

Testowanie (Jest, React Native Testing Library)

Jest — standardowy runner testów. describe/it/expect. React Native Testing Library — testowanie komponentów. render, fireEvent, waitFor. screen.getByText, getByTestId — wyszukiwanie. userEvent — symulacja akcji. Testy Snapshot — toMatchSnapshot(). MSW (Mock Service Worker) — mockowanie API. Detox — testy E2E dla RN (grey-box, natywne). IT Sectr zaleca React Native Testing Library dla komponentów i Detox dla scenariuszy end-to-end.

CodePush (App Center) — aktualizacje OTA JS bundle bez publikowania w App Store/Google Play. Używany do: szybkich poprawek, testów A/B, zmian treści. Ograniczenia: nie można zmieniać kodu natywnego. Alternatywy: EAS Update (Expo), react-native-update. IT Sectr zaleca CodePush dla pilnych poprawek i EAS Update dla projektów Expo.

Expo — framework dla React Native. Managed workflow — wszystkie konfiguracje przez app.json. Development builds — niestandardowe moduły natywne bez eject. Expo SDK — wbudowane moduły: aparat, biometria, powiadomienia. EAS Build — budowanie w chmurze. Expo Router — routing oparty na plikach (podobny do Next.js). IT Sectr zaleca Expo dla nowych projektów i bare RN dla projektów z głęboką natywną personalizacją.