Свой проект: где кончается React Native и начинается Expo

Этажи здесь — не метафора, а пакеты, от которых зависит проект. React — это компоненты, хуки и снимки состояния из части IV. Рисовать он не умеет сам: рисует рендерер, которого React не знает. Этаж React Native даёт всё, что нужно на телефоне. Это примитивы View, Text, Pressable и FlatList, рендерер Fabric, превращающий элементы в нативные виды, и движок Hermes, в котором выполняется ваш JavaScript. Сюда же входят нативные модули, которые JS вызывает через JSI как обычные функции, и AppRegistry — место, где нативная половина приложения передаёт управление JS. Бандл собирает Metro, сборщик той же команды.

Над этим этажом стоит Expo. Он ничего из нижнего этажа не переписывает, а добавляет то, без чего проект не доходит до магазина. Это модули SDK (expo-secure-store, expo-notifications, expo-sqlite), маршрутизатор expo-router, конфиг app.json или app.config.js и prebuild, который генерирует из него папки ios/ и android/. Ещё — приложение Expo Go, команда npx expo start поверх Metro и облачные сервисы EAS: Build, Submit, Update. Сбоку от обоих этажей живут библиотеки сообщества — безопасные зоны, экраны, жесты, анимации. Это не React Native и не Expo, но Expo Go везёт их с собой, а npx expo install подбирает их версии под SDK.

Проверим карту на свежем проекте. В подложке — probe из прошлой статьи: она спрашивает рантайм, что лежит под именем из типов. В массиве — четыре зависимости, которые кладёт в package.json шаблон Expo SDK 57. Прогноз: что напечатают семь строк, особенно три последние, про имена из react-native? И какой из двух пакетов со строкой состояния окажется в песочнице?

declare function probe(names: (keyof typeof ReactNative)[]): void;

// dependencies свежего проекта: шаблон blank-typescript, Expo SDK 57
const dependencies = ["expo", "expo-status-bar", "react", "react-native"];

// глобали примера под именами пакетов, из которых их берёт проект
const globals: Record<string, object> = { react: React, "react-native": ReactNative };

for (const name of dependencies) {
  console.log(name + ":", name in globals ? "есть в песочнице" : "только в проекте");
}
probe(["AppRegistry", "StatusBar", "PermissionsAndroid"]);

Половины зависимостей в песочнице нет, и это ровно граница этажей. react и react-native лежат в глобалях, второй — в облике react-native-web, а оба пакета Expo существуют только в проекте. PermissionsAndroid — старый знакомый: имя из типов, которого нет в рантайме предпросмотра. А вот StatusBar нашёлся. Строка состояния есть на нижнем этаже, но свежий проект берёт её из expo-status-bar. Это не другая строка состояния, а надстройка над той же, и исходник это показывает:

// expo-status-bar 57.0.1, src/NativeStatusBarWrapper.tsx — сокращено, кавычки двойные
import { StatusBar as NativeStatusBar, useColorScheme } from "react-native";

export function StatusBar({ style, hideTransitionAnimation, animated, hidden }: StatusBarProps) {
  // тёмная тема системы — светлый текст строки состояния, и наоборот
  const colorScheme = useColorScheme();
  const barStyle = React.useMemo(() => styleToBarStyle(style, colorScheme), [style, colorScheme]);
  return <NativeStatusBar animated={animated} hidden={hidden} barStyle={barStyle} />;
}

Вклад Expo — перевести короткий style в barStyle, а при "auto" выбрать его по теме системы. Рисует строку StatusBar из react-native. Отсюда правило, по которому дальше в части помечен каждый API: этаж определяется пакетом в import, а не именем. import { StatusBar } from "react-native" выполнится в песочнице, from "expo-status-bar" — только в проекте, хотя внутри второго тот же компонент.

В первой статье главы мы прошли цепочку запуска: expo-router/entry, registerRootComponent из пакета expo, AppRegistry.registerComponent из React Native. Теперь посмотрим на место, где она переходит с этажа на этаж. Запускает приложение нативная половина. iOS или Android создаёт корневой вид и просит React Native выполнить JS-приложение с таким-то именем. JS к этому моменту должен положить в AppRegistry компонент под тем же именем. Имя — строковый ключ, договор двух половин, и в проекте на Expo он всегда "main". В iOS-половине Expo 57 это прямо константа defaultModuleName = "main" в ExpoReactNativeFactory.swift. Android-половина отдаёт то же имя из getMainComponentName в MainActivity, которую генерирует prebuild.

JS-сторону договора исполняет registerRootComponent. Без отладочных подробностей это несколько строк:

// expo 57.0.16, src/launch/registerRootComponent.tsx — сокращено, кавычки двойные
import { AppRegistry, Platform } from "react-native";

export default function registerRootComponent(component) {
  let qualifiedComponent = component;
  if (process.env.NODE_ENV !== "production") {
    // в отладке — не гасить экран, а в Expo Go на iOS показывать индикатор Fast Refresh
    qualifiedComponent = withDevTools(component);
  }
  AppRegistry.registerComponent("main", () => qualifiedComponent);
  if (Platform.OS === "web" && typeof window !== "undefined") {
    const rootTag = document.getElementById("root");
    AppRegistry.runApplication("main", { rootTag });
  }
}

На телефоне функция только регистрирует: runApplication вызовет нативная половина, когда корневой вид будет готов. В вебе нативной половины нет, и Expo вызывает его сам, с узлом #root со страницы. Это ровно то, что делает mount в песочнице: создаёт корень React на узле root и рисует в нём дерево. Одна оговорка: в веб-версии проекта Metro подставит соседний файл registerRootComponent.web.tsx, и там AppRegistry — собственная урезанная копия Expo поверх react-dom/client. Логика та же.

AppRegistry — нижний этаж, и в песочнице он есть. Значит, верхний этаж можно собрать из него своими руками. Корень отдаёт помощник подложки hostRoot: примеру document не положен. Сработает веб-ветка: Platform.OS в песочнице — "web", как мы выяснили в прошлой статье, так что пример повторяет веб-версию проекта, а не телефон. Прогноз: в каком порядке появятся строка от runApplication, строка «зарегистрировано» и строки рендера?

declare function hostRoot(id?: string): object | null;
const { AppRegistry, Platform, View, Text, Pressable } = ReactNative;

function App() {
  const [sets, setSets] = React.useState(0);
  console.log("рендер: подходов", sets);
  return (
    <View>
      <Text>Жим лёжа · подходов: {sets}</Text>
      <Pressable testID="log-set" onPress={() => setSets(sets + 1)}>
        <Text>Записать подход</Text>
      </Pressable>
    </View>
  );
}

// registerRootComponent из пакета expo 57 — без отладочной обёртки withDevTools
function registerRootComponent(component: React.ComponentType) {
  AppRegistry.registerComponent("main", () => component);
  // на телефоне runApplication вызывает нативная половина, в вебе её нет — зовёт сам Expo
  if (Platform.OS === "web") {
    AppRegistry.runApplication("main", { rootTag: hostRoot() });
  }
}

registerRootComponent(App);
console.log("зарегистрировано:", AppRegistry.getAppKeys());
setTimeout(() => fireEvent.press("log-set"), 100);

Первой пришла строка самого runApplication: react-native-web в отладочной сборке сообщает, какое приложение и с какими параметрами запускает. Затем «зарегистрировано», и только потом рендер. runApplication, как и mount, рендер лишь планирует, а рисует React в одной из следующих задач. Эту особенность мы видели в первой статье главы. Строка запуска зависит от рантайма, и печатает её разный код:

Теперь сломаем договор. Шаблон голого React Native, без Expo, регистрирует приложение под его именем из app.json: AppRegistry.registerComponent(appName, () => App). Привычку легко принести в проект на Expo, где нативная половина спросит "main". Прогноз: что напечатает пример и доберётся ли он до строки «запущено»?

declare function hostRoot(id?: string): object | null;
const { AppRegistry, View, Text } = ReactNative;

function App() {
  console.log("рендер App");
  return (
    <View>
      <Text>Подход</Text>
    </View>
  );
}

// привычка из голого React Native: ключ — имя приложения из app.json
const appName = "podhod";
AppRegistry.registerComponent(appName, () => App);
console.log("зарегистрировано:", AppRegistry.getAppKeys());

// нативная половина проекта на Expo запускает приложение по ключу "main"
AppRegistry.runApplication("main", { rootTag: hostRoot() });
console.log("запущено");

Приложение зарегистрировано, но под другим ключом, и runApplication бросает исключение. «Запущено» не напечатано: исключение оборвало пример. Компилятор промолчал — ключ здесь просто строка, и сверить её с нативной половиной типам не с чем. На телефоне будет красный экран со своим текстом. Любопытно, что обе его подсказки уводят в сторону:

Эту ошибку чаще даёт не чужое имя, а упавший импорт: модуль бросил исключение раньше, чем дошло до registerRootComponent. Ищите первое красное сообщение выше — причина там.

Для первого экрана на телефоне не нужны ни Xcode, ни Android Studio. Нужны Node — React Native 0.86 в поле engines требует ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0, — телефон с Expo Go из App Store или Google Play и одна сеть у телефона и компьютера. Expo Go — готовое приложение с нативной половиной, собранной командой Expo. От вас оно берёт только бандл, поэтому собирать ничего не придётся.

$ npx create-expo-app@latest podhod --template blank-typescript
$ cd podhod
$ npx expo start

Первая команда скачивает шаблон и ставит зависимости, вторая запускает Metro. Шаблон выбран blank-typescript, а не шаблон по умолчанию. Тот сразу приносит expo-router, а маршрутизатор у нас появится в главе 5, после собственного. В пустом шаблоне точка входа видна целиком. Тег latest у шаблона в момент написания — 57.0.24, то есть SDK 57. Когда latest переедет на следующую версию, та же команда принесёт её.

// package.json свежего проекта: поля main, scripts и зависимости — из метаданных npm
// для expo-template-blank-typescript 57.0.24; name, version и прочее опущены
{
  "main": "index.ts",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~57.0.22",
    "expo-status-bar": "~57.0.1",
    "react": "19.2.3",
    "react-native": "0.86.3"
  },
  "devDependencies": {
    "@types/react": "~19.2.2",
    "typescript": "~6.0.3"
  }
}

Этажи видны уже здесь: две зависимости из четырёх — Expo. "main": "index.ts" — файл, с которого Metro начинает бандл. Все четыре скрипта — expo start, даже android и ios. Они открывают проект в Expo Go на эмуляторе или симуляторе, а не собирают своё приложение. Своя сборка — expo run:ios, как в скриптах приложения автора, — появится в главе 10.

// index.ts — файл из поля main
import { registerRootComponent } from "expo";

import App from "./App";

registerRootComponent(App);

index.ts — ровно одна строка из прошлого раздела: регистрация под ключом "main". А в App.tsx кладём экран, который только что выполнялся в песочнице. Меняются только первые строки: глобали React и ReactNative уступают место импортам, и у каждого импорта свой этаж.

// App.tsx — экран из прошлого раздела, теперь с импортами вместо глобалей
import { useState } from "react"; // этаж React
import { StatusBar } from "expo-status-bar"; // этаж Expo
import { View, Text, Pressable, StyleSheet } from "react-native"; // этаж React Native

export default function App() {
  const [sets, setSets] = useState(0);
  console.log("рендер: подходов", sets);
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Жим лёжа · подходов: {sets}</Text>
      <Pressable style={styles.button} onPress={() => setSets(sets + 1)}>
        <Text style={styles.buttonText}>Записать подход</Text>
      </Pressable>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, justifyContent: "center", padding: 24, gap: 12, backgroundColor: "#f4f1ea" },
  title: { fontSize: 20, fontWeight: "600" },
  button: { padding: 12, borderRadius: 8, alignItems: "center", backgroundColor: "#2a2735" },
  buttonText: { color: "#fff", fontWeight: "600" },
});

Теперь npx expo start. Терминал печатает QR-код и меню клавиш:

$ npx expo start

Metro теперь — сервер на компьютере, порт 8081. В QR-коде закодирован адрес exp://…: exp — схема ссылок Expo Go. На Android код сканируют из самого Expo Go, на iPhone — обычной камерой, и система предложит открыть ссылку в Expo Go. Телефон идёт к Metro за бандлом, Metro собирает его и отчитывается в том же терминале. После двух нажатий на «Записать подход» там окажется:

# терминал, где запущен npx expo start

console.log с телефона приходит в терминал: в отладке React Native 0.86 пересылает консоль в Metro. Сделано это через старый путь, помеченный в setUpDeveloperTools.js как «Remove legacy Metro log forwarding», так что надёжное место для логов — React Native DevTools, клавиша j. Строки Running "main" with {…} в терминале нет, хотя телефон её печатает: Expo CLI отфильтровывает её регулярным выражением. В нём, кстати, записаны обе формулировки, и React Native, и react-native-web.

Последняя проба — поправить экран, не трогая телефон. Замените «Жим лёжа» на «Присед» и сохраните файл. На телефоне мелькнёт плашка «Refreshing...», заголовок сменится, а счётчик останется на двойке. Это Fast Refresh — тот, что в части IV мимоходом перезапускал эффекты в статье «Уборка, двойной запуск и гонки запросов»: он подменяет изменённый модуль и сохраняет состояние компонентов. Перезагрузить приложение целиком, со сбросом состояния, — клавиша r в терминале.

Почему часть начинается с Expo, а не с голого React Native? Голый React Native — это часы Xcode, Gradle и CocoaPods до первого экрана, а затем переучивание под фреймворк, на котором всё равно пишут приложения. Документация React Native сама советует начинать с фреймворка и первым называет Expo. Почему тогда не с Expo целиком? Без нижнего этажа он превращается в магию, а замысел учебника — показать, из чего состоят фреймворки. Так же в части IV мы собирали своё, прежде чем взять Next.js.

Поэтому дальше у каждого API сказано, на каком он этаже. Нижний этаж выполняется в песочнице: там, где готового нет или его не видно, мы собираем миниатюру механизма. Настоящий Expo приходит там, где проект упирается в телефон, сборку и магазины, — листингом и записанным выводом.

Expo Go будет возить «Подход» почти всю часть. Когда появится нативный модуль, которого в нём нет, понадобится свой клиент — статья «Где кончается готовый клиент: свой dev client» в главе 10. То, что Expo генерирует обычный проект React Native и из него можно выйти, покажет статья перед ней — «Что Expo делает за вас: prebuild, конфиг и плагины». А песочница остаётся тем, чем была в прошлых статьях: React Native без Expo и без Metro. Всё, что в ней запускается, на телефоне запустится тоже, но не всё, что запускается на телефоне, в ней есть.