Иконка, сплэш, имя, версия

Иконку в приложении автора задают три места конфига: общий icon, адаптивная иконка Android и значок уведомлений в параметрах плагина expo-notifications. Картинки лежат в public/ — те же, что обслуживают веб-версию, и это ещё аукнется в последней секции.

// app.config.js приложения автора, только то, что касается иконки
icon: "./public/icon-512.png",
android: {
  adaptiveIcon: {
    foregroundImage: "./public/icon-maskable-512.png",
    backgroundColor: "#171717",
  },
},
plugins: [
  ["expo-notifications", { icon: "./public/icon-192.png", color: "#171717" }],
],

Мы выполнили npx expo prebuild --no-install на копии проекта автора и сняли размеры со всех картинок, которые легли в нативные папки. Это не вывод команды, а опись того, что появилось:

# картинки после prebuild и их сторона в пикселях
android/app/src/main/res/
  mipmap-mdpi/        ic_launcher.webp 48    ic_launcher_round.webp 48    ic_launcher_foreground.webp 108
  mipmap-hdpi/        ic_launcher.webp 72    ic_launcher_round.webp 72    ic_launcher_foreground.webp 162
  mipmap-xhdpi/       ic_launcher.webp 96    ic_launcher_round.webp 96    ic_launcher_foreground.webp 216
  mipmap-xxhdpi/      ic_launcher.webp 144   ic_launcher_round.webp 144   ic_launcher_foreground.webp 324
  mipmap-xxxhdpi/     ic_launcher.webp 192   ic_launcher_round.webp 192   ic_launcher_foreground.webp 432
  mipmap-anydpi-v26/  ic_launcher.xml  ic_launcher_round.xml
  drawable-mdpi/ … drawable-xxxhdpi/    notification_icon.png 24 36 48 72 96
  drawable-mdpi/ … drawable-xxxhdpi/    splashscreen_logo.png 288 432 576 864 1152
  values/colors.xml   iconBackground #171717, notification_icon_color #171717
ios/Prilozhenie/Images.xcassets/AppIcon.appiconset/
  App-Icon-1024x1024@1x.png 1024, без альфа-канала
  Contents.json

Режут картинки три плагина. Иконки лаунчера — withAndroidIcons и withIosIcons из @expo/prebuild-config: это встроенные плагины, и, как мы видели в статье «Что Expo делает за вас», prebuild применяет их всегда, даже при пустом списке plugins. Значок уведомления — плагин expo-notifications. Правила у всех трёх короткие: базовый размер в dp, умноженный на плотность экрана. Соберём их миниатюрой, которая по конфигу выдаёт список файлов. Прогноз перед запуском: сколько файлов получится, какие исходники растянутся и из какого сделан круглый значок?

interface AdaptiveIcon {
  foregroundImage?: string;
  backgroundColor?: string;
}
interface IconConfig {
  icon?: string;
  android?: { adaptiveIcon?: AdaptiveIcon };
}
interface OutFile {
  sizes: number[];
  from: string;
}

// @expo/prebuild-config 57 · withAndroidIcons.js: пять плотностей и базовые размеры в dp
const scales = [1, 1.5, 2, 3, 4];
const LEGACY_DP = 48;
const ADAPTIVE_DP = 108;
// expo-notifications 57 · withNotificationsAndroid.js
const NOTIFICATION_DP = 24;

function iconFiles(config: IconConfig, notificationIcon?: string): Map<string, OutFile> {
  const files = new Map<string, OutFile>();
  const add = (name: string, dp: number, from: string) => files.set(name, { sizes: scales.map((s) => dp * s), from });
  const adaptive = config.android?.adaptiveIcon;
  const legacy = config.icon ?? adaptive?.foregroundImage;
  if (legacy) {
    add("ic_launcher.webp", LEGACY_DP, legacy);
    if (adaptive) add("ic_launcher_round.webp", LEGACY_DP, legacy);
    add("ic_launcher_foreground.webp", ADAPTIVE_DP, adaptive?.foregroundImage ?? legacy);
  }
  if (notificationIcon) add("notification_icon.png", NOTIFICATION_DP, notificationIcon);
  // withIosIcons.js: один файл 1024, остальные размеры Xcode нарежет сам
  files.set("App-Icon-1024x1024@1x.png", { sizes: [1024], from: config.icon ?? "белый квадрат" });
  return files;
}

// исходники из public/ приложения автора и их сторона в пикселях
const sourcePx: Record<string, number> = { "icon-512.png": 512, "icon-maskable-512.png": 512, "icon-192.png": 192 };
const config: IconConfig = {
  icon: "icon-512.png",
  android: { adaptiveIcon: { foregroundImage: "icon-maskable-512.png", backgroundColor: "#171717" } },
};

let count = 0;
for (const [name, { sizes, from }] of iconFiles(config, "icon-192.png")) {
  count += sizes.length;
  const ratio = Math.max(...sizes) / sourcePx[from];
  console.log(name + ": " + sizes.join(" ") + " ← " + from + (ratio > 1 ? ", растянут ×" + ratio : ""));
}
console.log("файлов: " + count);

Миниатюра сошлась с описью до пикселя. На Android каждая картинка — одна величина в dp, умноженная на пять плотностей: те самые dp из статьи «Размеры без пикселей: dp, проценты, PixelRatio». Лаунчер берёт файл из папки своей плотности, и на экране с плотностью 3 иконка займёт 144 пикселя. Круглый значок режется из общего icon, а не из адаптивного слоя: в исходнике legacyIcon = icon ?? foregroundImage и скругление в половину стороны, а без adaptiveIcon файла нет вовсе. Прямоугольный и круглый значки нужны только лаунчерам без адаптивных иконок, то есть Android 7.0 и 7.1 (круглый появился в 7.1). Ниже React Native 0.86 не опускается: в его libs.versions.toml стоит minSdk = "24", это и есть Android 7.0. Всё, что новее, берёт XML из mipmap-anydpi-v26 — о нём следующая секция.

На iOS файл один: начиная с Xcode 14 хватает картинки 1024 на 1024, остальные размеры Xcode нарезает сам. Исходник у автора — 512, и его растягивают вдвое. На домашнем экране это почти незаметно, иконка там в разы меньше, а в карточке App Store, где она крупная, края поплывут. Если icon не задан вовсе, плагин кладёт на это место белый квадрат, и комментарий в коде объясняет зачем: «to mitigate the chance of a submission failure to the app store». Без иконки App Store Connect сборку не примет, и белый квадрат спасает загрузку, но не вид в магазине.

И последнее: SVG сюда не годится. Все три плагина режут картинки функцией generateImageAsync из @expo/image-utils. Мы отдали ей icon.svg автора и получили Invalid mimeType for image with source: ./icon.svg. SVG остаётся вебу, нативной иконке нужен PNG.

Исходник иконки — PNG 1024×1024 в край, без своих скруглений. Меньше — растянут, SVG — не примут.

С Android 8 иконка приложения — не картинка, а два слоя по 108 на 108 dp: передний (foregroundImage) и фон (backgroundColor или backgroundImage). По 18 dp с каждой стороны документация Android отдаёт маске и эффектам вроде параллакса при касании. Остаётся середина 72 на 72 dp, и её лаунчер режет своей маской — кругом, скруглённым квадратом, «каплей», как решил производитель или пользователь. Логотипу документация велит уложиться в 66 на 66 dp. Самая тесная из обычных масок — круг диаметром 72, и углы квадрата 66 он срежет, поэтому на деле рисунок держат в круге диаметром 66. От Expo здесь только базовый размер слоя, ADAPTIVE_BASELINE_PIXEL_SIZE = 108, и файл, который связывает слои. Вот он после prebuild у автора:

<!-- android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml -->
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/iconBackground"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

Фоновый цвет уходит в colors.xml под именем iconBackground. Не задали — плагин подставит белый: в коде стоит setBackgroundColor(backgroundColor ?? '#ffffff', …), и прозрачный передний слой ляжет на белое.

На передний слой так и просится та же картинка, что и в icon. Проверим, что из этого выйдет. Подложка рисует обе иконки автора тем же SVG, что лежит в public/icon.svg: обычную — как есть, маскируемую — с листом, уменьшенным до 200 из 512. Так он уменьшен и в настоящем icon-maskable-512.png: мы сняли с него рамку светлого листа, 200 на 250 пикселей. На экране примера каждая иконка стоит под тремя масками, а в консоль идёт расстояние от центра до самой дальней точки листа. Прогноз: какую иконку какая маска обрежет?

declare const icons: { regular: string; maskable: string };
const { View, Image, StyleSheet } = ReactNative;

// слой адаптивной иконки — 108 dp, по 18 dp с каждой стороны отдано маске и эффектам;
// логотипу документация Android отводит не больше 66 dp
const LAYER = 108;
const VIEWPORT = 72;
const SAFE = 66;

interface Sheet {
  w: number;
  h: number;
  r: number;
}
interface LauncherIconProps {
  uri: string;
  radius: number;
}

// лист заметки в пикселях холста 512 — такой он в icon.svg и в icon-maskable-512.png
const sheets: Record<"regular" | "maskable", Sheet> = {
  regular: { w: 256, h: 320, r: 20 },
  maskable: { w: 200, h: 250, r: 15.625 },
};

// дальняя от центра точка скруглённого листа лежит на дуге угла
function farthest(sheet: Sheet): number {
  const px = Math.hypot(sheet.w / 2 - sheet.r, sheet.h / 2 - sheet.r) + sheet.r;
  return (px / 512) * LAYER;
}

for (const key of ["regular", "maskable"] as const) {
  const d = farthest(sheets[key]);
  const verdict = d <= SAFE / 2 ? "цел под любой маской" : d <= VIEWPORT / 2 ? "цел под кругом, но вне зоны 66" : "круг срежет края";
  console.log(key + ": " + d.toFixed(1) + " dp от центра · " + verdict);
}

// маску лаунчера здесь изображает View: overflow прячет всё, что за скруглением
function LauncherIcon({ uri, radius }: LauncherIconProps) {
  return (
    <View style={[styles.viewport, { borderRadius: radius }]}>
      <Image source={{ uri }} style={styles.layer} />
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: "row", gap: 12, marginBottom: 12 },
  viewport: { width: VIEWPORT, height: VIEWPORT, overflow: "hidden" },
  layer: { width: LAYER, height: LAYER, margin: (VIEWPORT - LAYER) / 2 },
});

// квадрат, скруглённый квадрат и круг — маски разных лаунчеров
mount(
  <View>
    {(["regular", "maskable"] as const).map((key) => (
      <View key={key} style={styles.row}>
        {[0, 16, VIEWPORT / 2].map((radius) => <LauncherIcon key={radius} uri={icons[key]} radius={radius} />)}
      </View>
    ))}
  </View>,
);

Обычная иконка переживает квадрат и скругление, но скруглённые углы листа лежат в 41,5 dp от центра, а круглая маска кончается на 36 — на экране примера круг срезает листу края вместе с углами. Маскируемая укладывается и в круг 66. Отсюда правило: передний слой — отдельная картинка, где рисунок уменьшен до безопасной зоны. У автора так и сделано. Настоящий icon-maskable-512.png мы проверили попиксельно: самая дальняя светлая точка листа — в 154,1 пикселя от центра, это 32,5 dp из 108, внутри 33. Миниатюра даёт 32,4, потому что не видит сглаживания краёв.

Маску на экране примера изображает View с overflow: "hidden" и borderRadius: он вырезает середину слоя так, как вырезала бы маска. Настоящую маску рисует лаунчер телефона, и какая она у вашего пользователя, песочница не знает — Platform.OS здесь "web". Но геометрия та же, и её хватает, чтобы увидеть срез до сборки.

Тот же файл автор отдаёт и веб-манифесту, с пометкой "purpose": "maskable" — что она значит, разбирала статья части II «Манифест и установка на экран». У PWA безопасная зона свободнее: спецификация манифеста задаёт круг радиусом 40% стороны, а у Android это 33 из 108, то есть 30,6%. Рисунок, уложенный в правило Android, проходит оба. Обратное неверно: рисунок до края зоны PWA доходит до 43,2 dp от центра, и круг Android его обрежет. Поэтому одну маскируемую иконку на две платформы рисуют по более строгому правилу.

Есть и третий слой, monochromeImage. Его берут тематические значки Android 13, которые лаунчер перекрашивает под обои. Плагин создаёт этот слой, только если поле задано. У автора его нет, в ic_launcher.xml выше нет строки <monochrome>, и перекрашивать лаунчеру нечего. Документация Android добавляет, что начиная с Android 16 QPR 2 система перекрашивает и значки без монохромного слоя — сама.

Логотип на переднем слое — в круге 66 dp из 108. Всё, что дальше, лаунчер вправе отрезать.

App Store Connect не принимает иконку 1024 с альфа-каналом: такую сборку заворачивают ещё при загрузке. Expo от этого страхует, и страхует без спроса:

// @expo/prebuild-config 57.0.14 · build/plugins/icons/withIosIcons.js, сокращено
source = (await generateImageAsync({ projectRoot, cacheType: IMAGE_CACHE_NAME + cacheKey }, {
  src: icon,
  name: filename,
  width: size,
  height: size,
  // Transparency needs to be preserved in dark variant, but can safely be removed in "light" and "tinted" variants.
  removeTransparency: appearance !== "dark",
  // The icon should be square, but if it's not then it will be cropped.
  resizeMode: "cover",
  // Force the background color to solid white to prevent any transparency. (for "any" and "tinted" variants)
  backgroundColor: appearance !== "dark" ? "#ffffff" : undefined,
})).source;

Мы прогнали generateImageAsync с этими параметрами на icon.svg автора, отрендеренном в PNG с прозрачными углами. На выходе PNG из трёх каналов, без альфы вовсе, и угловой пиксель — (255, 255, 255). Значит, логотип на прозрачном фоне получит на iOS белую подложку, а квадрат, скруглённый своими силами, — белые углы под системной маской. В icon-512.png автора они уже есть: файл непрозрачный, тёмный квадрат со скруглением 112 из 512 нарисован на белом. Останутся ли белые кромки после маски iOS, решает разница между этим скруглением и системной кривой. Гадать не придётся, если отдать квадрат в край без своих углов. Те же белые углы увидят и владельцы Android 7: там ic_launcher.webp ставится без маски, как есть.

Прозрачность сохраняется в одном случае — у тёмного варианта. С iOS 18 в ios.icon можно передать объект { light, dark, tinted }, и для dark плагин альфу не трогает: тёмному варианту она нужна, так сказано и в комментарии над этой строкой.

Значок уведомления на Android устроен наоборот. Система берёт у него только альфа-канал и красит его сама: белым в строке состояния и цветом из notification_icon_color в шторке. Автор отдал плагину icon-192.png — иконку приложения. В React Native есть ровно такое же правило — проп tintColor у Image: каждый непрозрачный пиксель становится одним цветом. Подложка рисует обоих кандидатов тем же SVG автора, а долю непрозрачных пикселей считает через холст страницы: у примера React Native холста нет. Прогноз: что напечатается и что окажется в строке состояния?

declare const notificationIcons: { appIcon: string; silhouette: string };
// из подложки: доля пикселей с ненулевой альфой — рисунок читается через холст страницы
declare function opaqueShare(uri: string): Promise<number>;
const { View, Image, StyleSheet } = ReactNative;

interface BarProps {
  background: string;
  tint: string;
}

// Android берёт у значка уведомления только альфу и красит её сам — ровно это делает tintColor
function Bar({ background, tint }: BarProps) {
  return (
    <View style={[styles.bar, { backgroundColor: background }]}>
      <Image source={{ uri: notificationIcons.appIcon }} tintColor={tint} style={styles.icon} />
      <Image source={{ uri: notificationIcons.silhouette }} tintColor={tint} style={styles.icon} />
    </View>
  );
}

const styles = StyleSheet.create({
  bar: { flexDirection: "row", gap: 16, padding: 12 },
  icon: { width: 24, height: 24 },
});

// строка состояния красит значок белым, шторка — цветом notification_icon_color
mount(
  <View>
    <Bar background="#171717" tint="#ffffff" />
    <Bar background="#f5f5f5" tint="#171717" />
  </View>,
);

async function report() {
  for (const [name, uri] of Object.entries(notificationIcons)) {
    const share = await opaqueShare(uri);
    console.log(name + ": непрозрачно " + Math.round(share * 100) + "%");
  }
}
report();

Иконка приложения стала сплошным квадратом: белым на тёмной строке, тёмным в светлой шторке. Настоящий icon-192.png мы проверили попиксельно: из 36 864 пикселей прозрачных ноль. Уведомление об окончании отдыха из статьи «Уведомления: планировщик, канал, нажатие» пришло бы с белым квадратом в строке состояния. Силуэт сохранил форму листа, а строки в нём прорезаны прозрачностью.

В песочнице tintColor делает SVG-фильтр react-native-web: feFlood заливает всё цветом, feComposite с operator="in" оставляет заливку только там, где у картинки есть альфа. Это правило Android, воспроизведённое браузером, а не сам Android, но правило то же. Лечится отдельным файлом для уведомлений: белый силуэт на прозрачном фоне, не меньше 96 на 96 — это размер для xxxhdpi, 24 dp на плотность 4, — в параметре icon плагина.

Иконка приложения — без прозрачности. Значок уведомления — только прозрачность и силуэт.

Сплэш рисует система, а не React Native: на iOS это storyboard из ключа UILaunchStoryboardName в Info.plist, на Android — тема окна запуска. Он появляется до первой строки вашего JS, поэтому описывается конфигом, а не компонентом. Пакет expo-splash-screen у автора установлен, но в plugins его нет. А плагин без параметров не делает ничего:

// expo-splash-screen 57.0.8 · plugin/src/withSplashScreen.ts
const withSplashScreen: ConfigPlugin<Props | null> = (config, props) => {
  if (props != null) {
    config = withAndroidSplashScreen(config, props);
    config = withIosSplashScreen(config, props);
  }

  return config;
};

export default createRunOncePlugin(withSplashScreen, pkg.name, pkg.version);

Что тогда лежит в папках после prebuild? Остатки шаблона. На Android — те splashscreen_logo.png от 288 до 1152 пикселей из описи первой секции. Это заглушка шаблона, серая сетка с концентрическими кругами, и тема окна запуска ссылается прямо на неё. На iOS storyboard шаблона ждёт картинку, которой в Images.xcassets нет: там только AppIcon.appiconset. Вашего логотипа нет ни там, ни там.

<!-- android/app/src/main/res/values/styles.xml после prebuild, фрагмент -->
<style name="Theme.App.SplashScreen" parent="AppTheme">
  <item name="android:windowBackground">@drawable/splashscreen_logo</item>
</style>
<!-- values/colors.xml -->
<color name="splashscreen_background">#FFFFFF</color>

Настраивается сплэш параметрами плагина. Логотип для него — отдельный прозрачный PNG: лист без тёмного квадрата.

plugins: [
  "expo-router",
  ["expo-splash-screen", {
    backgroundColor: "#171717",
    image: "./public/splash-logo.png",   // лист без фона, прозрачный PNG
    imageWidth: 120,
    dark: { backgroundColor: "#000000" },
  }],
  // … остальные плагины без изменений
],

Тот же prebuild на копии проекта с этим плагином записал совсем другое:

<!-- values/styles.xml -->
<style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
  <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
  <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
  <item name="postSplashScreenTheme">@style/AppTheme</item>
  <item name="android:windowSplashScreenBehavior">icon_preferred</item>
</style>
<!-- values/colors.xml: splashscreen_background #171717; values-night/colors.xml: #000000 -->
<!-- drawable-mdpi … drawable-xxxhdpi/splashscreen_logo.png: 288 432 576 864 1152 -->
<!-- iOS: SplashScreenLogo.imageset — 120, 240, 360; SplashScreenBackground.colorset — #171717 и тёмный #000000 -->

Тема окна теперь наследует Theme.SplashScreen — системный сплэш Android 12, который библиотека AndroidX переносит и на версии постарше. Логотип лёг в холст 288 dp: в коде плагина canvasSize = 288 * multiplier, а сам логотип занимает в его середине imageWidth dp. Холст взят из требований Android: значок сплэша без своей подложки — 288 на 288 dp, и видно из него только круг диаметром 192 dp, всё снаружи система маскирует. Поэтому imageWidth больше 192 грозит той же обрезкой, что и адаптивной иконке. На iOS появились картинки 120, 240 и 360 пикселей и цвет со светлым и тёмным вариантом.

А в выводе prebuild появилась новая строка:

$ npx expo prebuild --no-install

Одним предупреждением дело не кончилось. В Info.plist этой копии вместо Light, которое стояло там без плагина, оказалось Automatic. Кто победил и почему, объясняет миниатюра модов из статьи «Что Expo делает за вас» — она в подложке. У автора userInterfaceStyle: "light", и ключ UIUserInterfaceStyle пишет встроенная копия плагина expo-system-ui: самого пакета в проекте нет, и prebuild применяет свою. Плагин сплэша пишет в тот же ключ. Встроенные плагины prebuild применяет после вашего списка. Прогноз: что окажется в ключе без тёмного варианта сплэша и с ним?

type Plist = Record<string, string>;
type Style = "light" | "dark" | "automatic";
interface AppConfig {
  name: string;
  userInterfaceStyle?: Style;
  mods?: { infoPlist?: (plist: Plist) => Plist };
}
interface SplashProps {
  backgroundColor?: string;
  dark?: { backgroundColor?: string; image?: string };
}
type ConfigPlugin = (config: AppConfig) => AppConfig;
// из подложки — моды из статьи «Что Expo делает за вас»: каждая правка встаёт в цепочку перед уже записанными
declare function withInfoPlist(config: AppConfig, action: (plist: Plist) => Plist): AppConfig;
declare function prebuild(config: AppConfig, file: Plist): Plist;

// встроенная копия плагина expo-system-ui: пакета в проекте нет, и prebuild берёт свою
const plistStyle: Record<Style, string> = { light: "Light", dark: "Dark", automatic: "Automatic" };
const withIosUserInterfaceStyle: ConfigPlugin = (config) =>
  withInfoPlist(config, (plist) => ({ ...plist, UIUserInterfaceStyle: plistStyle[config.userInterfaceStyle ?? "light"] }));

// expo-splash-screen 57 · withIosSplashInfoPlist.ts, сокращено
const withSplashScreen = (props: SplashProps): ConfigPlugin => (config) =>
  withInfoPlist(config, (plist) => {
    if (!props.dark?.backgroundColor && !props.dark?.image) return { ...plist, UILaunchStoryboardName: "SplashScreen" };
    const existing = config.userInterfaceStyle;
    if (existing && existing !== "automatic") {
      console.log("» ios: userInterfaceStyle: The existing `userInterfaceStyle` property is preventing splash screen from working properly. Remove it or disable dark mode splash screens.");
    }
    return { ...plist, UIUserInterfaceStyle: "Automatic", UILaunchStoryboardName: "SplashScreen" };
  });

// getPrebuildConfig: сначала ваш список plugins, потом встроенные плагины Expo
function infoPlistAfterPrebuild(splash: SplashProps): Plist {
  const initial: AppConfig = { name: "Подход", userInterfaceStyle: "light" };
  const plugins = [withSplashScreen(splash), withIosUserInterfaceStyle];
  const config = plugins.reduce((prev, plugin) => plugin(prev), initial);
  return prebuild(config, { CFBundleDisplayName: "Подход" });
}

console.log(infoPlistAfterPrebuild({ backgroundColor: "#171717" }).UIUserInterfaceStyle);
console.log(infoPlistAfterPrebuild({ backgroundColor: "#171717", dark: { backgroundColor: "#000000" } }).UIUserInterfaceStyle);

Без тёмного варианта в ключе Light. С ним — предупреждение и Automatic. Встроенный плагин применён позже, значит, его мод стоит в цепочке раньше и пишет первым, а мод сплэша из вашего списка пишет последним. Настоящий Expo делает то же самое, и с EXPO_DEBUG=1 порядок виден по строкам ios.infoPlist:

$ EXPO_DEBUG=1 npx expo config --type introspect

Сперва встроенные плагины Expo, потом пикер, который prebuild применил сам, потом withIosUserInterfaceStyle с пометкой withFallback — «своя копия вместо пакета», — и лишь в конце моды вашего списка, задом наперёд: secure-store, сплэш, роутер. В исходнике плагина сплэша рядом со строкой infoPlist.UIUserInterfaceStyle = 'Automatic' стоит честное признание: «this is fragile because the order of operations matter now». Для пользователя это значит вот что: приложение, свёрстанное только в светлой теме, получит на iOS тёмные системные элементы — клавиатуру, диалоги, выбор даты, — стоит ему включить тёмный режим. Выбор честный: либо без тёмного сплэша, либо с тёмной темой у всего приложения.

Убирает сплэш не система, а JS. Корень expo-router на старте просит сплэш подождать, но не сразу: вызов стоит в setTimeout с комментарием «This must be delayed so the user has a chance to call it first». Сам же его и прячет — в onReady навигации, на следующем кадре. При ошибке на старте сплэш тоже убирается, чтобы не закрыть собой экран ошибки. Если приложению нужно дольше — например, дочитать базу, как в статье «Первый кадр: пока хранилище читается», — сплэш придерживают сами; эффект здесь такой же, как в части IV:

// app/_layout.tsx — держать сплэш, пока не открылась база дневника
import { useEffect } from "react";
import { Slot } from "expo-router";
import * as SplashScreen from "expo-splash-screen";

// на уровне модуля: expo-router ждёт один такт, чтобы вы успели раньше него
SplashScreen.preventAutoHideAsync();
SplashScreen.setOptions({ duration: 400, fade: true });

export default function RootLayout() {
  // ваш хук: база открылась или не открылась — оба исхода конец ожидания
  const ready = useDiaryReady();
  useEffect(() => {
    if (ready) SplashScreen.hideAsync();
  }, [ready]);
  if (!ready) return null;
  return <Slot />;
}

expo-splash-screen — пакет Expo, в песочнице он не соберётся, поэтому здесь только листинг. setOptions задаёт затухание: duration по умолчанию 400 мс, а fade, судя по типам пакета, действует только на iOS.

У приложения автора есть веб-версия на подпути /app, собирает её expo export --platform web — в package.json это скрипт export:web. Мы выполнили экспорт на копии проекта:

$ npx expo export --platform web --output-dir dist-web

$ cd dist-web && grep -o '<link[^>]*icon[^>]*>\|<link[^>]*manifest[^>]*>' index.html

Ни icon, ни adaptiveIcon до веба не доезжают. Первые четыре ссылки автор написал сам, в своём шаблоне страницы src/app/html/html.tsx. Пятую дописал экспорт: из конфига он берёт одно поле, web.favicon — у автора это favicon-32.png. Из него получается favicon.ico на три кадра — 16, 32 и 48, мы разобрали заголовок файла, — и последний кадр растянут из 32 пикселей. Если в public/ лежит свой favicon.ico, экспорт его не трогает и ничего не генерирует. Всё прочее — манифест, apple-touch-icon.png, маскируемая иконка — скопировано из public/ байт в байт. Итог: три объявления rel="icon" на одной странице, и какое взять, браузер решает сам. Одно из двух лишнее: либо поле web.favicon, либо ручные ссылки.

Маскируемую иконку веб-версии удобно проверить глазами. В Chrome DevTools, на вкладке Application в разделе Manifest, у иконок с maskable есть флажок «Show only the minimum safe area for maskable icons». Но он показывает круг PWA, 40% стороны, а для Android, как мы выяснили, нужен более тесный — судить по нему о лаунчере нельзя.

Имя и версия — самые короткие строки конфига. Куда они уходят, разобрано в статьях «Что Expo делает за вас» и «EAS Build: сборка в облаке без Xcode»; здесь — что с ними может пойти не так.

Сведём мелочи статьи в одну проверку перед отправкой. Из всего, что касается иконки и сплэша, отказ при загрузке грозит только за альфу в иконке iOS и за её отсутствие, и от обоих Expo страхует сам. Всё остальное пройдёт в магазин, и увидят это уже пользователи.

Иконку для карточки Google Play, 512 на 512, загружают отдельно, в консоли магазина. О ней и об остальных требованиях к карточке — статья «Магазины».