React Native v mobilním vývoji: co to je, klíčové koncepty a jak to funguje

Základy (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — syntaktické rozšíření JavaScriptu pro popis UI. Vypadá jako HTML, ale funguje přes React.createElement(). Výrazy JSX: {variable}, {condition && <View />}, {array.map()}. Functional Component — funkce, která vrací JSX. Přijímá props jako argument. Moderní standard Reactu (před React 16.8 se používaly Class Components). Hooks — funkce pro přístup ke stavu a životnímu cyklu z Functional Component. Pravidla Hooks: pouze na nejvyšší úrovni, pouze ve Functional Components.

Reference Hooks

useState — lokální stav. useEffect — vedlejší účinky. useContext — přístup k Context. useRef — měnitelná reference. useCallback — memoizace funkce. useMemo — memoizace hodnoty. Custom Hooks — znovupoužitelná logika: function useDebounce(value, delay).

// Functional Component s hooks v 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 — vrací [value, setValue]. setValue — nahrazuje (neslučuje jako setState v Class). Pro objekty: setUser(prev => ({ ...prev, name: 'New' })). useEffect — provádí se po renderování. Pole závislostí: [] — jednou (mount), [dep] — když se dep změní, undefined — každé renderování. Funkce čištění — return () => {}. useContext — const value = useContext(MyContext). Vyžaduje Context.Provider výše ve stromu.

useRef — měnitelný objekt, který uchovává hodnotu mezi renderováními. .current — změna. Používá se pro: přístup k nativním prvkům (ref={inputRef}), ukládání předchozích hodnot, časovače. useCallback — vrací memoizovanou funkci. const handlePress = useCallback(() => {}, [dep]). useMemo — vrací memoizovanou hodnotu. const sorted = useMemo(() => data.sort(), [data]). Používejte useMemo pro náročné výpočty.

useState — pro jednoduchý stav. useEffect — pro API volání a odběry. useCallback/useMemo — pro optimalizaci. IT Sectr doporučuje nememoizovat vše — pouze při skutečných problémech s výkonem.

Custom Hooks

Custom Hook — funkce, která používá vestavěné hooks. Název začíná use*. Příklady: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks jsou hlavním způsobem opětovného použití logiky v React Native. IT Sectr doporučuje vyčlenit obchodní logiku do Custom Hooks a udržovat komponenty čisté (pouze JSX + styly).

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

View — základní kontejner (analogický k div). Text — text (jediná komponenta pro text). TextInput — vstup textu. ScrollView — posouvatelný kontejner. FlatList — virtualizovaný seznam pro velká data. SectionList — FlatList s sekcemi. SafeAreaView — automatické odsazení od Safe Area (výřez, stavový řádek). Pressable — moderní náhrada za TouchableOpacity. useColorScheme — detekce tmavého/světlého motivu.

Optimalizace FlatList

FlatList — virtualizace: vykreslují se pouze viditelné prvky + windowSize. Optimalizace: 1) keyExtractor — jedinečný klíč, 2) getItemLayout — pevná výška (přeskočí měření onLayout), 3) React.memo pro renderItem, 4) maxToRenderPerBatch (výchozí 10), 5) windowSize (výchozí 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navigace v React Native

React Navigation — standardní navigační zásobník. NativeStackNavigator — nativní animace (push/pop). TabNavigator — spodní karty. DrawerNavigator — boční menu. NavigationContainer — kořenová komponenta navigace. Deep linking — konfigurace odkazů pro externí odkazy. Tok ověřování — podmíněná navigace: isAuth ? AppStack : AuthStack. IT Sectr doporučuje NativeStackNavigator pro hlavní obrazovky a TabNavigator pro navigaci první úrovně.

Styly (StyleSheet)

StyleSheet.create() — vytváření stylů. Všechny vlastnosti v camelCase: backgroundColor, fontSize, marginTop. Flexbox — výchozí model rozvržení (flexDirection: 'column'). Žádná CSS kaskáda, žádná dědičnost, žádné selektory. Inline styly — fungují, ale nejsou doporučeny. StyleSheet.compose() — kombinování stylů. Platform.select — platformově specifické styly: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — správa odsazení bezpečné zóny.

Styled Components a CSS-in-JS

Styled Components — knihovna pro CSS-in-JS v React Native. Restyle — theming + responzivní styly. NativeWind — Tailwind CSS pro React Native. Unistyles — rychlé styly s atomickým CSS. Tmavý režim — useColorScheme + dynamické styly. IT Sectr doporučuje StyleSheet.create pro jednoduchost a NativeWind pro projekty s designovým systémem.

Animace (Animated API)

Animated API — deklarativní animace. Animated.Value — hodnota animace. Animated.timing — jednoduchá animace. Animated.spring — pružinová animace. Animated.View — animovatelný View. useNativeDriver — animace v nativním vlákně (transform, opacity — podporovány). Animated.loop — opakovaná animace. LayoutAnimation — automatická animace při změně rozvržení. reanimated 2/3 (knihovna) — výkonnější alternativa. Metro Bundler — JavaScript bundler. Sestavuje JS + assety do bundle. Podporuje Fast Refresh (Hot Reload). Hermes — JS engine optimalizovaný pro mobil: rychlý start, méně paměti. Výchozí od RN 0.70+.

Gesture Handler a animace

React Native Gesture Handler — nativní zpracování gest. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — deklarativní API gest. Reanimated + Gesture Handler — kombinace pro 60fps animace s gesty. react-native-skia — GPU vykreslování pro komplexní 2D grafiku. IT Sectr doporučuje Reanimated 3 pro všechny animace výkonnější než Animated API.

Síť (fetch, AsyncStorage, API)

fetch — vestavěný HTTP klient. Podporuje GET, POST, headers, body. Axios — populární knihovna s interceptory. AsyncStorage — úložiště klíč-hodnota (podobné UserDefaults). MMKV — rychlá alternativa k AsyncStorage od WeChat. react-native-keychain — bezpečné ukládání tokenů. React Query (TanStack Query) — správa stavu serveru: caching, revalidace, stránkování. IT Sectr doporučuje React Query pro API požadavky a MMKV pro lokální ukládání.

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

Native Module — most mezi JS a nativním kódem (Java/Kotlin pro Android, ObjC/Swift pro iOS). Umožňuje volat nativní API z JS. Turbo Modules (New Architecture) — náhrada starých Native Modules. Synchronní volání, typování přes Codegen, méně režie. Fabric Renderer — nový renderer se synchronním rozvržením. JSI (JavaScript Interface) — přímý přístup JS k nativním objektům bez mostu. IT Sectr doporučuje Turbo Modules pro nové projekty a Native Modules pro stávající.

// Nativní modul 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)
    }
}

Testování (Jest, React Native Testing Library)

Jest — standardní běh testů. describe/it/expect. React Native Testing Library — testování komponent. render, fireEvent, waitFor. screen.getByText, getByTestId — vyhledávání. userEvent — simulace akcí. Snapshot testy — toMatchSnapshot(). MSW (Mock Service Worker) — mockování API. Detox — E2E testy pro RN (grey-box, nativní). IT Sectr doporučuje React Native Testing Library pro komponenty a Detox pro end-to-end scénáře.

CodePush (App Center) — OTA aktualizace JS bundle bez publikování v App Store/Google Play. Používá se pro: rychlé opravy, A/B testy, změny obsahu. Omezení: nelze měnit nativní kód. Alternativy: EAS Update (Expo), react-native-update. IT Sectr doporučuje CodePush pro naléhavé opravy a EAS Update pro Expo projekty.

Expo — framework pro React Native. Spravovaný pracovní postup — všechny konfigurace přes app.json. Development builds — vlastní nativní moduly bez eject. Expo SDK — vestavěné moduly: kamera, biometrie, notifikace. EAS Build — cloud build. Expo Router — směrování založené na souborech (podobné Next.js). IT Sectr doporučuje Expo pro nové projekty a bare RN pro projekty s hlubokou nativní customizací.