React Native у мобільній розробці: що це, ключові поняття та як працює

Основи (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — синтаксичне розширення JavaScript для опису UI. Виглядає як HTML, але працює через React.createElement(). JSX вирази: {variable}, {condition && <View />}, {array.map()}. Functional Component — функція, що повертає JSX. Приймає props як аргумент. Сучасний стандарт React (до React 16.8 використовувались Class Components). Hooks — функції для доступу до стану та життєвого циклу з Functional Component. Правила Hooks: тільки на верхньому рівні, тільки в Functional Components.

Hooks Reference

useState — локальний стан. useEffect — side effects. useContext — доступ до Context. useRef — mutable ref. useCallback — мемоізація функції. useMemo — мемоізація значення. Custom Hooks — перевикористовувана логіка: function useDebounce(value, delay).

// Functional Component з хуками в 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>
  );
}

Хуки (useState, useEffect, useRef, useCallback, useMemo)

useState — повертає [value, setValue]. setValue — заміна (не merge, як setState в Class). Для об'єктів: setUser(prev => ({ ...prev, name: 'New' })). useEffect — виконується після рендеру. Масив залежностей: [] — один раз (mount), [dep] — при зміні dep, undefined — кожен рендер. Cleanup функція — return () => {}. useContext — const value = useContext(MyContext). Потребує Context.Provider вище в дереві.

useRef — mutable об'єкт, що зберігає значення між рендерами. .current — мутація. Використовується для: доступу до нативних елементів (ref={inputRef}), зберігання попереднього значення, таймерів. useCallback — повертає мемоізовану функцію. const handlePress = useCallback(() => {}, [dep]). useMemo — повертає мемоізоване значення. const sorted = useMemo(() => data.sort(), [data]). Використовуйте useMemo для дорогих обчислень.

useState — для простого стану. useEffect — для API викликів та підписок. useCallback/useMemo — для оптимізації. IT Sectr рекомендує не мемоізувати все підряд — тільки при реальних проблемах продуктивності.

Custom Hooks

Custom Hook — функція, що використовує вбудовані хуки. Ім'я з use*. Приклади: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks — основний спосіб перевикористання логіки в React Native. IT Sectr рекомендує виносити бізнес-логіку в Custom Hooks і залишати компоненти чистими (тільки JSX + стилі).

Компоненти (View, Text, FlatList, ScrollView, SafeAreaView)

View — базовий контейнер (аналог div). Text — текст (єдиний компонент для тексту). TextInput — введення тексту. ScrollView — прокручуваний контейнер. FlatList — віртуалізований список для великих даних. SectionList — FlatList з секціями. SafeAreaView — автоматичні відступи від Safe Area (notch, status bar). Pressable — сучасна заміна TouchableOpacity. useColorScheme — визначення темної/світлої теми.

FlatList Optimization

FlatList — віртуалізація: рендеряться тільки видимі елементи + windowSize. Оптимізація: 1) keyExtractor — унікальний ключ, 2) getItemLayout — фіксована висота (пропуск вимірювання onLayout), 3) React.memo для renderItem, 4) maxToRenderPerBatch (за замовчуванням 10), 5) windowSize (за замовчуванням 21), 6) removeClippedSubviews, 7) initialNumToRender.

Навігація в React Native

React Navigation — стандартний навігаційний стек. NativeStackNavigator — нативна анімація (push/pop). TabNavigator — нижні вкладки. DrawerNavigator — бічне меню. NavigationContainer — кореневий компонент навігації. Deep linking — linking конфіг для зовнішніх посилань. Authentication flow — умовна навігація: isAuth ? AppStack : AuthStack. IT Sectr рекомендує NativeStackNavigator для основних екранів та TabNavigator для навігації першого рівня.

Стилі (StyleSheet)

StyleSheet.create() — створення стилів. Всі властивості в camelCase: backgroundColor, fontSize, marginTop. Flexbox — модель за замовчуванням (flexDirection: 'column'). Немає CSS cascade, немає наслідування, немає селекторів. Inline styles — працюють, але не рекомендуються. StyleSheet.compose() — комбінування стилів. Platform.select — платформенні стилі: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — управління safe area insets.

Styled Components та CSS-in-JS

Styled Components — бібліотека для CSS-in-JS в React Native. Restyle — тематизація + responsive стилі. NativeWind — Tailwind CSS для React Native. Unistyles — швидкі стилі з atomic CSS. Dark mode — useColorScheme + динамічні стилі. IT Sectr рекомендує StyleSheet.create для простоти та NativeWind для проектів з дизайн-системою.

Анімація (Animated API)

Animated API — декларативна анімація. Animated.Value — значення анімації. Animated.timing — проста анімація. Animated.spring — пружинна анімація. Animated.View — анімований View. useNativeDriver — анімація на нативному потоці (transform, opacity — підтримуються). Animated.loop — зациклена анімація. LayoutAnimation — автоматична анімація при зміні layout. reanimated 2/3 (бібліотека) — більш продуктивна альтернатива. Metro Bundler — JavaScript bundler. Збирає JS + активи в bundle. Підтримує Fast Refresh (Hot Reload). Hermes — JS engine, оптимізований для мобільних: швидкий старт, менше пам'яті. Default з RN 0.70+.

Gesture Handler та анімації

React Native Gesture Handler — нативна обробка жестів. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — декларативний API жестів. Reanimated + Gesture Handler — комбінація для 60fps анімацій з жестами. react-native-skia — GPU-рендеринг для складної 2D-графіки. IT Sectr рекомендує Reanimated 3 для всіх анімацій продуктивніших за Animated API.

Networking (fetch, AsyncStorage, API)

fetch — вбудований HTTP-клієнт. Підтримує GET, POST, headers, body. Axios — популярна бібліотека з інтерцепторами. AsyncStorage — key-value сховище (аналог UserDefaults). MMKV — швидка альтернатива AsyncStorage від WeChat. react-native-keychain — безпечне зберігання токенів. React Query (TanStack Query) — управління серверним станом: кешування, ревалідація, пагінація. IT Sectr рекомендує React Query для API-запитів та MMKV для локального зберігання.

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 та Turbo Modules

Native Module — міст між JS та нативним кодом (Java/Kotlin для Android, ObjC/Swift для iOS). Дозволяє викликати нативні API з JS. Turbo Modules (New Architecture) — заміна старих Native Modules. Синхронний виклик, типізація через Codegen, менше overhead. Fabric Renderer — новий рендерер з синхронним layout. JSI (JavaScript Interface) — прямий доступ JS до нативних об'єктів без мосту. IT Sectr рекомендує Turbo Modules для нових проектів та Native Modules для існуючих.

// Нативний модуль 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)
    }
}

Тестування (Jest, React Native Testing Library)

Jest — стандартний тест-раннер. describe/it/expect. React Native Testing Library — тестування компонентів. render, fireEvent, waitFor. screen.getByText, getByTestId — пошук. userEvent — симуляція дій. Snapshot тести — toMatchSnapshot(). MSW (Mock Service Worker) — мокування API. Detox — E2E тести для RN (grey-box, нативні). IT Sectr рекомендує React Native Testing Library для компонентів та Detox для наскрізних сценаріїв.

CodePush (App Center) — OTA оновлення JS-бандлу без публікації в App Store/Google Play. Використовується для: гарячих фіксів, A/B тестів, змін контенту. Обмеження: не можна змінювати нативний код. Альтернативи: EAS Update (Expo), react-native-update. IT Sectr рекомендує CodePush для термінових фіксів та EAS Update для Expo-проектів.

Expo — фреймворк для React Native. Managed workflow — всі конфіги через app.json. Development builds — кастомні нативні модулі без eject. Expo SDK — вбудовані модулі: камера, біометрія, сповіщення. EAS Build — хмарна збірка. Expo Router — файлова маршрутизація (аналог Next.js). IT Sectr рекомендує Expo для нових проектів та bare RN для проектів з глибокою нативною кастомізацією.