React Native

01Как работает React Native

В вашем приложении два мира. Мир JavaScript выполняет React-компоненты, состояние и бизнес-логику внутри Hermes — JavaScript-движка, созданного для мобильных устройств, который компилирует код в байткод на этапе сборки, поэтому приложения запускаются быстрее и потребляют меньше памяти. Нативный мир владеет настоящими объектами UIView и Android View, камерой, keychain и так далее. React описывает, как должен выглядеть экран; React Native превращает это описание в нативные view. <View> становится UIView на iOS и ViewGroup на Android; <Text> становится нативным текстом. WebView нет: прокрутка, жесты и ввод текста нативные, поэтому RN-приложения ощущаются как настоящие приложения. Для раскладки используется Yoga — движок, реализующий Flexbox, поэтому один и тот же стиль работает на обеих платформах.

02New Architecture: JSI, Fabric, TurboModules

Старая архитектура отправляла каждое сообщение между JavaScript и нативным кодом как сериализованный JSON через асинхронный «мост» (bridge) — очередь, которая становилась узким местом для анимаций и больших списков. New Architecture, включённая по умолчанию с 0.76 и единственно возможная с 0.82, заменяет его. JSI (JavaScript Interface) позволяет JavaScript держать прямые ссылки на C++ объекты и вызывать их синхронно, без сериализации. Fabric — новый рендерер: он строит дерево UI на C++, поддерживает конкурентные возможности React 18+ и умеет синхронно измерять и обновлять раскладку. TurboModules — нативные модули, которые загружаются лениво при первом использовании и типизируются через Codegen, генерирующий C++ связку из вашей спецификации на TypeScript, так что ошибки проявляются на этапе сборки. Практический эффект: более плавные жесты и анимации (Reanimated 4 требует New Architecture), более быстрый запуск, а библиотеки должны быть совместимы с New Architecture — проверяйте до установки.

• JSI: прямые синхронные вызовы JS ↔ C++, без JSON-моста
• Fabric: рендерер на C++, конкурентный React, синхронная раскладка
• TurboModules + Codegen: ленивые типобезопасные нативные модули
• Hermes: движок с компиляцией в байткод, по умолчанию на обеих платформах

03Bare React Native или Expo?

Команда React Native теперь рекомендует начинать с фреймворка, и главный из них — Expo. Expo даёт большой набор поддерживаемых нативных модулей, файловую маршрутизацию (Expo Router), config plugins, которые сами редактируют нативные проекты, development builds и EAS для облачных сборок, публикации в сторы и OTA-обновлений. «Bare» означает, что вы напрямую владеете папками ios/ и android/ (проект создаётся через React Native Community CLI). Bare даёт полный контроль и подходит командам с нативным опытом или тяжёлыми кастомными нативными SDK. Граница размылась: Expo-приложения могут включать любой нативный код через config plugins или prebuild, а bare-приложения могут использовать модули Expo. Моё правило: для нового продукта со стандартными потребностями начинайте с Expo; для приложения, которое должно интегрировать необычные нативные SDK или следует существующему нативному шаблону, bare подходит — просто обновляйтесь регулярно.

1# Expo (recommended start)
2npx create-expo-app@latest my-app --template default
3cd my-app && npx expo start
4 
5# Bare React Native (Community CLI)
6npx @react-native-community/cli@latest init MyApp
7cd MyApp && npx react-native run-ios

04Реальное приложение с нуля: структура, окружения, API, состояние

Структурируйте код по фичам, а не по типам файлов, чтобы экран, его хуки и компоненты жили вместе. Держите три слоя раздельно. API-слой — это один HTTP-клиент с базовым URL, заголовком авторизации, обновлением токена и таймаутами; адаптеры превращают ответы бэкенда в типы приложения, поэтому переименованное поле на бэкенде меняет один файл, а не двадцать экранов. Сторы (Zustand лёгкий и хорошо работает) хранят состояние приложения: сессию, корзину, настройки; экраны читают сторы и вызывают действия, но никогда не делают запросы напрямую. Для серверных данных TanStack Query добавляет кэширование, повторы и перезапрос при возврате фокуса. Окружения: держите URL API и ключи отдельно для каждой сборки (dev, staging, prod) через конфигурацию на этапе сборки, никогда не хардкодьте их и никогда не кладите в приложение настоящие секреты — всё, что есть в бандле, можно извлечь. Автоматически повторяйте только идемпотентные запросы (GET, PUT с ключами); повторённый POST может создать дублирующийся заказ.

1src/
2  app/          # navigation, providers, deep links
3  features/
4    auth/       # screens, hooks, components for sign-in
5    cart/
6    orders/
7  shared/
8    api/        # http client, adapters, endpoints
9    stores/     # zustand stores (session, cart, settings)
10    ui/         # Button, Text, Card — built on tokens
11    theme/      # colors, spacing, typography tokens
12    i18n/       # en / hy / ru dictionaries
13  native/       # bridges to custom native modules

05Навигация, поток авторизации и push

React Navigation (stack, tabs, drawers поверх нативных экранов) и Expo Router (файловая маршрутизация на основе React Navigation) — стандартный выбор. Моделируйте авторизацию как состояние навигации: корневой навигатор показывает стек авторизации или основные вкладки в зависимости от наличия сессии, так что неавторизованный пользователь не сможет попасть на приватные экраны по deep link. Храните токены в Keychain/Keystore (react-native-keychain или expo-secure-store), никогда не в AsyncStorage. Позвольте гостям просматривать приложение и закрывайте только действия, которым нужен аккаунт, возвращая пользователя в то же место после входа. Настраивайте deep links и Universal/App Links с самого начала; от них зависят push-уведомления, письма и QR-коды. Для push регистрируйте токен устройства после входа и отправляйте его на бэкенд, запрашивайте разрешение в осмысленный момент, а не при первом запуске, и обрабатывайте нажатия на уведомления навигацией по тем же маршрутам deep link.

1const Stack = createNativeStackNavigator<RootParams>();
2 
3export function RootNavigator() {
4  const session = useSession((s) => s.session);
5  return (
6    <Stack.Navigator screenOptions={{ headerShown: false }}>
7      {session ? (
8        <Stack.Screen name="Main" component={MainTabs} />
9      ) : (
10        <Stack.Screen name="Auth" component={AuthStack} />
11      )}
12      <Stack.Screen name="ForceUpdate" component={ForceUpdateScreen} />
13    </Stack.Navigator>
14  );
15}

06Стили, дизайн-токены и производительность списков

Каскада CSS нет: каждый компонент получает объект стилей, а StyleSheet.create делает их статичными. Соберите небольшую тему из токенов — цвета (светлая и тёмная тема), шкала отступов, радиусы, типографика — и несколько базовых компонентов (Text, Button, Card, Screen), которые используют только токены. Тогда в экранах никогда не будет сырых hex-значений или магических чисел, а тёмная тема или ребрендинг — это один файл. Учитывайте safe areas (react-native-safe-area-context), Dynamic Type/масштабирование шрифтов и edge-to-edge раскладку на Android. Длинные списки никогда не рендерьте через map внутри ScrollView; используйте FlatList или, лучше, FlashList, который переиспользует ячейки. Давайте элементам стабильные ключи, мемоизируйте компоненты строк, не делайте тяжёлую работу прямо в renderItem и правильно подбирайте размер изображений (expo-image или библиотека с кэшированием изображений). Анимируйте через Reanimated, который выполняет анимации в UI-потоке, поэтому они остаются плавными, даже когда JavaScript занят.

1export const theme = {
2  color: { bg: "#FFFFFF", text: "#111111", primary: "#0A6CFF", muted: "#6B7280" },
3  space: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
4  radius: { sm: 6, md: 12, pill: 999 },
5  font: { body: 16, title: 22, caption: 13 },
6} as const;
7 
8<FlashList
9  data={products}
10  keyExtractor={(p) => p.id}
11  renderItem={({ item }) => <ProductRow product={item} />}
12/>

07Нативные модули, различия платформ и отладка

Когда подходящей библиотеки нет — региональный платёжный SDK, принтер, кастомный сканер, — напишите TurboModule: спецификация на TypeScript, Codegen, затем реализации на Kotlin/Swift (Expo Modules API — более дружелюбная альтернатива). Держите интерфейс маленьким и основанным на promise. Ожидайте различий между платформами: процессы запроса разрешений, кнопка «назад» на Android, поведение клавиатуры, тени (shadow-свойства на iOS против elevation на Android), выбор даты, шрифты и более жёсткие ограничения фоновой работы на iOS. Используйте Platform.select или суффиксы файлов (Button.ios.tsx) только там, где поведение действительно отличается. Отладка: React Native DevTools (нажмите j в Metro) даёт отладчик в стиле Chrome, консоль, дерево React-компонентов и профилировщик для Hermes. Для нативных падений используйте логи Xcode и Android Studio (Logcat), для продакшена — Crashlytics или Sentry, а performance monitor — чтобы следить за частотой кадров JS и UI. Тестируйте на реальном слабом Android-телефоне — симулятор врёт о производительности.

08Потоки и конвейер рендеринга

Приложение на React Native работает в нескольких потоках. JavaScript-поток выполняет React, обновления состояния и бизнес-логику в Hermes. Главный (UI) поток владеет нативными view, касаниями и циклом кадров платформы. Fabric рендерит в три фазы. Render: React создаёт элементы, а Fabric строит shadow tree из C++-узлов. Commit: Yoga рассчитывает layout для этого дерева, часто в фоновом потоке, и новое дерево становится следующим для показа. Mount: различия применяются к реальным нативным view в UI-потоке. При 60 Hz на каждый кадр есть около 16.7 ms, при 120 Hz — около 8 ms. Если JavaScript-поток занят разбором большого JSON-ответа или перерендером большого дерева, касания по-прежнему приходят, но React не может на них ответить, и приложение кажется зависшим. Поэтому worklet в Reanimated выполняют анимации в UI-потоке, а startTransition позволяет пометить несрочные обновления как прерываемые.

09Пишем TurboModule с Codegen

TurboModule начинается с типизированной JavaScript-спецификации. Имя файла должно начинаться с Native, а в package.json объявляется codegenConfig, который сообщает Codegen, где лежат спецификации. Во время сборки Codegen читает спецификацию и генерирует C++ и платформенные интерфейсы; ваши классы на Kotlin и Objective-C++ или Swift их реализуют, а компилятор ругается, если сигнатура метода не совпадает. Держите интерфейс маленьким: простые типы данных, promise для всего медленного и события для потоков обновлений, например статуса платежа. Никогда не блокируйте JavaScript-поток синхронными нативными вызовами, которые обращаются к сети или диску; синхронные методы — только для дешёвых чтений. Если в команде мало нативных разработчиков, Expo Modules API предлагает более простой DSL на Swift и Kotlin, который работает и в bare-приложениях.

1// specs/NativePayments.ts
2import type { TurboModule } from "react-native";
3import { TurboModuleRegistry } from "react-native";
4 
5export interface Spec extends TurboModule {
6  isAvailable(): boolean; // cheap, synchronous
7  startPayment(amountMinor: number, currency: string): Promise<string>;
8}
9 
10export default TurboModuleRegistry.getEnforcing<Spec>("NativePayments");
11 
12// package.json
13// "codegenConfig": { "name": "PaymentsSpec", "type": "modules",
14//   "jsSrcsDir": "specs", "android": { "javaPackageName": "com.example.payments" } }

10Время запуска и размер бандла

Холодный старт — это первое впечатление, и большая его часть под вашим контролем. Hermes уже поставляет заранее скомпилированный байткод, поэтому оставшаяся стоимость — в основном то, что ваш код делает при загрузке модулей: импорт всех экранов и тяжёлых библиотек сразу, синхронное чтение больших данных из хранилища или инициализация множества SDK до первого кадра. Загружайте экраны лениво, откладывайте аналитику и некритичные SDK до первого рендера и держите splash screen только до готовности первых значимых данных. Измеряйте на release-сборке на Android-устройстве среднего класса и никогда — в режиме разработки, который в разы медленнее. На Android включите минификацию R8 для release и сохраняйте её mapping-файлы для Crashlytics. Следите за размером JavaScript-бандла со временем: одна библиотека для дат или графиков может добавить сотни килобайт, которые скачивает и разбирает каждый пользователь.

11Безопасность и устойчивость в офлайне

Исходите из того, что бандл прочитают: любой может распаковать APK или IPA и изучить байткод Hermes и ассеты. Секреты остаются на сервере; приложение хранит только пользовательские токены в Keychain или Keystore. Чтобы усложнить злоупотребление API, добавьте аттестацию устройства (Play Integrity на Android, App Attest на iOS) и проверяйте её на сервере. Certificate pinning блокирует часть атак с перехватом, но может отрезать всех пользователей, если сертификат неожиданно сменится, поэтому пиньте публичные ключи, держите резервный ключ и удалённый kill-switch. Поведение в офлайне нужно проектировать явно: определять наличие сети, показывать закэшированные данные с понятным баннером «офлайн», складывать действия пользователя в локальную очередь и повторять их с ключами идемпотентности, чтобы повторно отправленный заказ никогда не дублировался. Очищайте кэши с персональными данными при выходе из аккаунта и исключайте чувствительные экраны из скриншотов и переключателя приложений, если этого требует предметная область.