diff --git a/docs/__mocks__/react-intl.tsx b/docs/__mocks__/react-intl.tsx
new file mode 100644
index 00000000000000..6048da72228f02
--- /dev/null
+++ b/docs/__mocks__/react-intl.tsx
@@ -0,0 +1,88 @@
+import { type ReactElement, type ReactNode } from 'react';
+
+import enMessages from '~/messages/en.json';
+
+type FormatMessageDescriptor = {
+  id?: string;
+  defaultMessage?: string;
+};
+
+type FormatValues = Record<string, ReactNode | ((chunks: ReactNode) => ReactNode)>;
+
+type FormattedMessageProps = FormatMessageDescriptor & {
+  values?: FormatValues;
+  children?: (chunks: ReactNode) => ReactNode;
+};
+
+const messages = enMessages as Record<string, string>;
+
+function lookup({ id, defaultMessage }: FormatMessageDescriptor) {
+  if (id && messages[id] !== undefined) {
+    return messages[id];
+  }
+  return defaultMessage ?? id ?? '';
+}
+
+function expandTemplate(template: string, values: FormatValues = {}): (string | ReactElement)[] {
+  const tokenRegex = /<([A-Za-z][\w-]*)>([\S\s]*?)<\/\1>|{([A-Za-z][\w-]*)}/g;
+  const parts: (string | ReactElement)[] = [];
+  let lastIndex = 0;
+  let key = 0;
+  for (const match of template.matchAll(tokenRegex)) {
+    const matchIndex = match.index ?? 0;
+    if (matchIndex > lastIndex) {
+      parts.push(template.slice(lastIndex, matchIndex));
+    }
+    const [whole, tagName, inner, varName] = match;
+    if (tagName) {
+      const fn = values[tagName];
+      const inside = expandTemplate(inner, values);
+      const node = typeof fn === 'function' ? fn(inside) : inside;
+      parts.push(<span key={`t-${key++}`}>{node}</span>);
+    } else if (varName) {
+      const v = values[varName];
+      if (typeof v === 'function') {
+        parts.push(<span key={`v-${key++}`}>{(v as (c: ReactNode) => ReactNode)('')}</span>);
+      } else if (v !== undefined) {
+        parts.push(<span key={`v-${key++}`}>{v as ReactNode}</span>);
+      }
+    }
+    lastIndex = matchIndex + whole.length;
+  }
+  if (lastIndex < template.length) {
+    parts.push(template.slice(lastIndex));
+  }
+  return parts;
+}
+
+const stubIntl = {
+  locale: 'en',
+  formatMessage: (descriptor: FormatMessageDescriptor = {}) => lookup(descriptor),
+  formatDate: (value: unknown) => String(value ?? ''),
+  formatTime: (value: unknown) => String(value ?? ''),
+  formatRelativeTime: (value: unknown) => String(value ?? ''),
+  formatNumber: (value: unknown) => String(value ?? ''),
+  formatPlural: () => 'other',
+  formatList: (items: unknown[]) => (Array.isArray(items) ? items.join(', ') : String(items)),
+};
+
+export const useIntl = () => stubIntl;
+
+export const IntlProvider = ({ children }: { children?: ReactNode }) => <>{children}</>;
+
+export const FormattedMessage = ({
+  defaultMessage,
+  id,
+  values,
+  children,
+}: FormattedMessageProps) => {
+  const text = lookup({ id, defaultMessage });
+  const parts = expandTemplate(text, values);
+  if (typeof children === 'function') {
+    return <>{children(parts)}</>;
+  }
+  return <>{parts}</>;
+};
+
+export const defineMessages = <T,>(messages: T) => messages;
+export const createIntl = () => stubIntl;
diff --git a/docs/common/i18n.ts b/docs/common/i18n.ts
new file mode 100644
index 00000000000000..d64d07b3ff13e8
--- /dev/null
+++ b/docs/common/i18n.ts
@@ -0,0 +1,185 @@
+import enMessages from '~/messages/en.json';
+import jaMessages from '~/messages/ja.json';
+
+export type SupportedLocale = 'en' | 'ja';
+
+export const messages: Record<SupportedLocale, Record<string, string>> = {
+  en: enMessages,
+  ja: jaMessages,
+};
+
+export function getLocaleFromPath(path: string): SupportedLocale {
+  if (path === '/ja' || path.startsWith('/ja/')) {
+    return 'ja';
+  }
+  return 'en';
+}
+
+export function getCanonicalPath(path: string): string {
+  if (path === '/ja' || path === '/ja/') {
+    return '/';
+  }
+  let stripped = path.startsWith('/ja/') ? path.slice(3) : path;
+  if (stripped !== '/' && stripped.endsWith('/')) {
+    stripped = stripped.slice(0, -1);
+  }
+  return stripped;
+}
+
+export function buildLocalePath(currentPath: string, targetLocale: SupportedLocale): string {
+  const englishPath = getCanonicalPath(currentPath);
+  if (targetLocale === 'en') {
+    return englishPath;
+  }
+  if (englishPath === '/') {
+    return '/ja';
+  }
+  return `/ja${englishPath}`;
+}
+
+const EXPO_TUTORIAL_PATHS: ReadonlySet<string> = new Set([
+  '/tutorial/overview',
+  '/tutorial/introduction',
+  '/tutorial/create-your-first-app',
+  '/tutorial/add-navigation',
+  '/tutorial/build-a-screen',
+  '/tutorial/image-picker',
+  '/tutorial/create-a-modal',
+  '/tutorial/gestures',
+  '/tutorial/screenshot',
+  '/tutorial/platform-differences',
+  '/tutorial/configuration',
+  '/tutorial/follow-up',
+]);
+
+export function isTranslatableSection(path: string): boolean {
+  return EXPO_TUTORIAL_PATHS.has(getCanonicalPath(path));
+}
+
+const PATHS_WITH_JAPANESE: ReadonlySet<string> = new Set([
+  '/tutorial/overview',
+  '/tutorial/introduction',
+  '/tutorial/create-your-first-app',
+  '/tutorial/add-navigation',
+  '/tutorial/build-a-screen',
+  '/tutorial/image-picker',
+  '/tutorial/create-a-modal',
+  '/tutorial/gestures',
+  '/tutorial/screenshot',
+  '/tutorial/platform-differences',
+  '/tutorial/configuration',
+  '/tutorial/follow-up',
+]);
+
+export function hasJapaneseTranslation(path: string): boolean {
+  return PATHS_WITH_JAPANESE.has(getCanonicalPath(path));
+}
+
+const JA_SIDEBAR_TITLES: Record<string, string> = {
+  '/tutorial/overview': '概要',
+  '/tutorial/introduction': 'はじめに',
+  '/tutorial/create-your-first-app': '最初のアプリを作成する',
+  '/tutorial/add-navigation': 'ナビゲーションを追加する',
+  '/tutorial/build-a-screen': '画面を構築する',
+  '/tutorial/image-picker': '画像ピッカーを使用する',
+  '/tutorial/create-a-modal': 'モーダルを作成する',
+  '/tutorial/gestures': 'ジェスチャーを追加する',
+  '/tutorial/screenshot': 'スクリーンショットを撮影する',
+  '/tutorial/platform-differences': 'プラットフォームの違いに対応する',
+  '/tutorial/configuration': 'ステータスバー、スプラッシュスクリーン、アプリアイコンを設定する',
+  '/tutorial/follow-up': '学習リソース',
+};
+
+export function getJapaneseSidebarTitle(path: string): string | undefined {
+  return JA_SIDEBAR_TITLES[getCanonicalPath(path)];
+}
+
+const JA_SECTION_TITLES: Record<string, string> = {
+  'Expo tutorial': 'Expo チュートリアル',
+  More: 'その他',
+};
+
+export function getJapaneseSectionTitle(name: string): string | undefined {
+  return JA_SECTION_TITLES[name];
+}
+
+export const OG_LOCALES: Record<SupportedLocale, string> = {
+  en: 'en_US',
+  ja: 'ja_JP',
+};
+
+export const SITE_NAMES: Record<SupportedLocale, string> = {
+  en: 'Expo Documentation',
+  ja: 'Expo ドキュメント',
+};
+
+export const BASE_DESCRIPTIONS: Record<SupportedLocale, string> = {
+  en: 'Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.',
+  ja: 'Expo は、JavaScript と React を使って Android、iOS、web で動作するユニバーサルネイティブアプリを作るためのオープンソースプラットフォームです。',
+};
+
+type EnglishOgContent = { title: string; description?: string };
+
+const EN_OG_OVERRIDES: Record<string, EnglishOgContent> = {
+  '/tutorial/overview': {
+    title: 'Overview of Expo and EAS tutorials',
+  },
+  '/tutorial/introduction': {
+    title: 'Tutorial: Using React Native and Expo',
+    description:
+      'An introduction to a React Native tutorial on how to build a universal app that runs on Android, iOS and the web using Expo.',
+  },
+  '/tutorial/create-your-first-app': {
+    title: 'Create your first app',
+    description: 'In this chapter, learn how to create a new Expo project.',
+  },
+  '/tutorial/add-navigation': {
+    title: 'Add navigation',
+    description: 'In this chapter, learn how to add navigation to the Expo app.',
+  },
+  '/tutorial/build-a-screen': {
+    title: 'Build a screen',
+    description:
+      "In this tutorial, learn how to use components such as React Native's Pressable and Expo Image to build a screen.",
+  },
+  '/tutorial/image-picker': {
+    title: 'Use an image picker',
+    description: 'In this tutorial, learn how to use Expo Image Picker.',
+  },
+  '/tutorial/create-a-modal': {
+    title: 'Create a modal',
+    description: 'In this tutorial, learn how to create a React Native modal to select an image.',
+  },
+  '/tutorial/gestures': {
+    title: 'Add gestures',
+    description:
+      'In this tutorial, learn how to implement gestures from React Native Gesture Handler and Reanimated libraries.',
+  },
+  '/tutorial/screenshot': {
+    title: 'Take a screenshot',
+    description:
+      'In this tutorial, learn how to capture a screenshot using a third-party library and Expo Media Library.',
+  },
+  '/tutorial/platform-differences': {
+    title: 'Handle platform differences',
+    description:
+      'In this tutorial, learn how to handle platform differences between native and web when creating a universal app.',
+  },
+  '/tutorial/configuration': {
+    title: 'Configure status bar, splash screen and app icon',
+    description:
+      'In this tutorial, learn the basics of how to configure a status bar, app icon, and splash screen.',
+  },
+  '/tutorial/follow-up': {
+    title: 'Learning resources',
+    description: 'Explore a curated list of resources to learn about Expo and React Native.',
+  },
+};
+
+export function getEnglishOgContent(path: string): { title: string; description: string } {
+  const override = EN_OG_OVERRIDES[getCanonicalPath(path)];
+  return {
+    title: override?.title ?? SITE_NAMES.en,
+    description: override?.description ?? BASE_DESCRIPTIONS.en,
+  };
+}
diff --git a/docs/common/routes.ts b/docs/common/routes.ts
index 8f4b23569a6d20..115ee78898b048 100644
--- a/docs/common/routes.ts
+++ b/docs/common/routes.ts
@@ -1,3 +1,11 @@
+import {
+  buildLocalePath,
+  getJapaneseSectionTitle,
+  getCanonicalPath,
+  getJapaneseSidebarTitle,
+  hasJapaneseTranslation,
+  type SupportedLocale,
+} from '~/common/i18n';
 import * as Utilities from '~/common/utilities';
 import { stripVersionFromPath } from '~/common/utilities';
 import { PageApiVersionContextType } from '~/providers/page-api-version';
@@ -16,43 +24,50 @@ export const getRoutes = (
 };
 
 export const isArchivePath = (path: string) => {
-  return Utilities.pathStartsWith('archive', path);
+  return Utilities.pathStartsWith('archive', getCanonicalPath(path));
 };
 
 export const isInternalPath = (path: string) => {
-  return Utilities.pathStartsWith('internal', path);
+  return Utilities.pathStartsWith('internal', getCanonicalPath(path));
 };
 
 export const isVersionedPath = (path: string) => {
-  return Utilities.pathStartsWith('versions', path);
+  return Utilities.pathStartsWith('versions', getCanonicalPath(path));
 };
 
 export const isReferencePath = (path: string) => {
-  return navigation.referenceDirectories.some(name => Utilities.pathStartsWith(name, path));
+  const canonical = getCanonicalPath(path);
+  return navigation.referenceDirectories.some(name => Utilities.pathStartsWith(name, canonical));
 };
 
 export const isHomePath = (path: string) => {
-  return navigation.homeDirectories.some(name => Utilities.pathStartsWith(name, path));
+  const canonical = getCanonicalPath(path);
+  return navigation.homeDirectories.some(name => Utilities.pathStartsWith(name, canonical));
 };
 
 export const isGeneralPath = (path: string) => {
-  return navigation.generalDirectories.some(name => Utilities.pathStartsWith(name, path));
+  const canonical = getCanonicalPath(path);
+  return navigation.generalDirectories.some(name => Utilities.pathStartsWith(name, canonical));
 };
 
 export const isFeaturePreviewPath = (path: string) => {
-  return navigation.featurePreview.some(name => Utilities.pathStartsWith(name, path));
+  const canonical = getCanonicalPath(path);
+  return navigation.featurePreview.some(name => Utilities.pathStartsWith(name, canonical));
 };
 
 export const isPreviewPath = (path: string) => {
-  return navigation.previewDirectories.some(name => Utilities.pathStartsWith(name, path));
+  const canonical = getCanonicalPath(path);
+  return navigation.previewDirectories.some(name => Utilities.pathStartsWith(name, canonical));
 };
 
 export const isLearnPath = (path: string) => {
-  return navigation.learnDirectories.some(name => Utilities.pathStartsWith(name, path));
+  const canonical = getCanonicalPath(path);
+  return navigation.learnDirectories.some(name => Utilities.pathStartsWith(name, canonical));
 };
 
 export const isEasPath = (path: string) => {
-  return navigation.easDirectories.some(name => Utilities.pathStartsWith(name, path));
+  const canonical = getCanonicalPath(path);
+  return navigation.easDirectories.some(name => Utilities.pathStartsWith(name, canonical));
 };
 
 export const getPageSection = (path: string) => {
@@ -183,12 +198,63 @@ export function getBreadcrumbTrail(
     });
 }
 
+function isInternalHref(href?: string) {
+  if (!href) {
+    return false;
+  }
+  if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {
+    return false;
+  }
+  return href.startsWith('/');
+}
+
+export function localizeRoutes<T extends NavigationRoute | NavigationRouteWithSection>(
+  routes: T[],
+  locale: SupportedLocale
+): T[] {
+  if (locale === 'en') {
+    return routes;
+  }
+  return routes.map(route => localizeRoute(route, locale));
+}
+
+function localizeRoute<T extends NavigationRoute | NavigationRouteWithSection>(
+  route: T,
+  locale: SupportedLocale
+): T {
+  const next: T = { ...route };
+  if (isInternalHref(next.href) && hasJapaneseTranslation(next.href)) {
+    next.href = buildLocalePath(next.href, locale);
+  }
+  if (isInternalHref(next.as) && hasJapaneseTranslation(next.as as string)) {
+    next.as = buildLocalePath(next.as as string, locale);
+  }
+  if (locale === 'ja' && next.type === 'page' && route.href) {
+    const translatedTitle = getJapaneseSidebarTitle(route.href);
+    if (translatedTitle) {
+      next.name = translatedTitle;
+      next.sidebarTitle = translatedTitle;
+    }
+  }
+  if (locale === 'ja' && next.type !== 'page' && route.name) {
+    const translatedSection = getJapaneseSectionTitle(route.name);
+    if (translatedSection) {
+      next.sidebarTitle = translatedSection;
+    }
+  }
+  if (next.children) {
+    next.children = next.children.map(child => localizeRoute(child, locale));
+  }
+  return next;
+}
+
 export function appendSectionToRoute(route?: NavigationRouteWithSection) {
   if (route?.children) {
+    const sectionName = route.sidebarTitle ?? route.name;
     return route.children.map((entry: NavigationRouteWithSection) =>
       route.type !== 'page'
         ? Object.assign(entry, {
-            section: route.section ? `${route.section} - ${route.name}` : route.name,
+            section: route.section ? `${route.section} - ${sectionName}` : sectionName,
           })
         : route
     );
diff --git a/docs/components/DocumentationHead.tsx b/docs/components/DocumentationHead.tsx
index 7027c46b61d655..d7391bf77c8e3d 100644
--- a/docs/components/DocumentationHead.tsx
+++ b/docs/components/DocumentationHead.tsx
@@ -1,30 +1,46 @@
 import NextHead from 'next/head';
 import type { PropsWithChildren } from 'react';
 
+import {
+  BASE_DESCRIPTIONS,
+  getEnglishOgContent,
+  OG_LOCALES,
+  SITE_NAMES,
+  type SupportedLocale,
+} from '~/common/i18n';
+
 type HeadProps = PropsWithChildren<{
   title?: string;
   description?: string;
   canonicalUrl?: string;
   markdownPath?: string;
+  locale?: SupportedLocale;
+  pathname?: string;
 }>;
 
 const BASE_OG_URL = 'https://og.expo.dev/?theme=docs';
 
-const BASE_TITLE = 'Expo Documentation';
-const BASE_DESCRIPTION = `Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.`;
-
 const DocumentationHead = ({
   title,
   description,
   canonicalUrl,
   markdownPath,
+  locale = 'en',
+  pathname,
   children,
 }: HeadProps) => {
-  const OGImageURL = `${BASE_OG_URL}&title=${encodeURIComponent(title ?? BASE_TITLE)}&description=${encodeURIComponent(description ?? BASE_DESCRIPTION)}`;
+  const siteName = SITE_NAMES[locale];
+  const baseDescription = BASE_DESCRIPTIONS[locale];
+  const resolvedDescription = description === '' ? baseDescription : description;
+  const ogImageContent =
+    locale === 'ja' && pathname
+      ? getEnglishOgContent(pathname)
+      : { title: title ?? siteName, description: description ?? baseDescription };
+  const OGImageURL = `${BASE_OG_URL}&title=${encodeURIComponent(ogImageContent.title)}&description=${encodeURIComponent(ogImageContent.description)}`;
 
   return (
     <NextHead>
-      <title>{title ? `${title} - ${BASE_TITLE}` : BASE_TITLE}</title>
+      <title>{title ? `${title} - ${siteName}` : siteName}</title>
       <meta charSet="utf-8" />
       <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -32,26 +48,20 @@ const DocumentationHead = ({
       {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
       {markdownPath && <link rel="alternate" type="text/markdown" href={markdownPath} />}
 
-      <meta name="description" content={description === '' ? BASE_DESCRIPTION : description} />
+      <meta name="description" content={resolvedDescription} />
       <meta property="og:title" content={title} />
       <meta property="og:type" content="website" />
       <meta property="og:image" content={OGImageURL} />
       <meta property="og:image:url" content={OGImageURL} />
       <meta property="og:image:secure_url" content={OGImageURL} />
-      <meta property="og:locale" content="en_US" />
-      <meta property="og:site_name" content={BASE_TITLE} />
-      <meta
-        property="og:description"
-        content={description === '' ? BASE_DESCRIPTION : description}
-      />
+      <meta property="og:locale" content={OG_LOCALES[locale]} />
+      <meta property="og:site_name" content={siteName} />
+      <meta property="og:description" content={resolvedDescription} />
 
       <meta name="twitter:site" content="@expo" />
       <meta name="twitter:card" content="summary_large_image" />
       <meta property="twitter:title" content={title} />
-      <meta
-        name="twitter:description"
-        content={description === '' ? BASE_DESCRIPTION : description}
-      />
+      <meta name="twitter:description" content={resolvedDescription} />
       <meta property="twitter:image" content={OGImageURL} />
       <meta name="google-site-verification" content="izrqNurn_EXfYbNIFgVIhEXkkZk9DleELH4UouM8s3k" />
 
diff --git a/docs/components/DocumentationPage.tsx b/docs/components/DocumentationPage.tsx
index f016b7bc6a3106..7fd864d7e8d654 100644
--- a/docs/components/DocumentationPage.tsx
+++ b/docs/components/DocumentationPage.tsx
@@ -3,8 +3,14 @@ import { breakpoints } from '@expo/styleguide-base';
 import { useRouter } from 'next/compat/router';
 import { useEffect, useState, type PropsWithChildren, useRef, useCallback, useMemo } from 'react';
 
+import { getLocaleFromPath } from '~/common/i18n';
 import * as RoutesUtils from '~/common/routes';
-import { appendSectionToRoute, getBreadcrumbTrail, isRouteActive } from '~/common/routes';
+import {
+  appendSectionToRoute,
+  getBreadcrumbTrail,
+  isRouteActive,
+  localizeRoutes,
+} from '~/common/routes';
 import { versionToText, throttle } from '~/common/utilities';
 import * as WindowUtils from '~/common/window';
 import DocumentationHead from '~/components/DocumentationHead';
@@ -61,7 +67,8 @@ export default function DocumentationPage({
   const tableOfContentsRef = useRef<TableOfContentsHandles>(null);
 
   const pathname = router?.pathname ?? '/';
-  const routes = RoutesUtils.getRoutes(pathname, version);
+  const locale = getLocaleFromPath(pathname);
+  const routes = localizeRoutes(RoutesUtils.getRoutes(pathname, version), locale);
   const sidebarActiveGroup = RoutesUtils.getPageSection(pathname);
   const breadcrumbTrail = getBreadcrumbTrail(routes, pathname);
   const breadcrumbSchema = buildBreadcrumbListSchema(breadcrumbTrail);
@@ -329,7 +336,9 @@ export default function DocumentationPage({
           title={title}
           description={description}
           canonicalUrl={canonicalUrl}
-          markdownPath={markdownPath}>
+          markdownPath={markdownPath}
+          locale={locale}
+          pathname={pathname}>
           {hideFromSearch !== true && (
             <meta
               name="docsearch:version"
diff --git a/docs/jest.config.js b/docs/jest.config.js
index 4e5cc103e8c738..c079d482122b1a 100644
--- a/docs/jest.config.js
+++ b/docs/jest.config.js
@@ -9,6 +9,9 @@ const jestConfig = {
   clearMocks: true,
   moduleNameMapper: {
     '^~/(.*)$': '<rootDir>/$1',
+    // Stub react-intl in tests so components that call useIntl() don't
+    // require an <IntlProvider> ancestor. See __mocks__/react-intl.tsx.
+    '^react-intl$': '<rootDir>/__mocks__/react-intl.tsx',
     // note(simek): force Jest to use non ESM bundle
     '^@radix-ui/react-dropdown-menu$':
       '<rootDir>/node_modules/@radix-ui/react-dropdown-menu/dist/index.js',
diff --git a/docs/messages/en.json b/docs/messages/en.json
new file mode 100644
index 00000000000000..78f0a918cb1726
--- /dev/null
+++ b/docs/messages/en.json
@@ -0,0 +1,43 @@
+{
+  "languageSwitcher.label": "Language",
+  "editPage": "Edit page",
+  "copyPage": "Copy page",
+  "onThisPage": "On this page",
+  "navHome": "Home",
+  "navGuides": "Guides",
+  "navEas": "EAS",
+  "navReference": "Reference",
+  "navLearn": "Learn",
+  "headerBlog": "Blog",
+  "headerChangelog": "Changelog",
+  "headerStarOnGitHub": "Star Us on GitHub",
+  "themeAuto": "Auto",
+  "themeLight": "Light",
+  "themeDark": "Dark",
+  "showMore": "Show More",
+  "showLess": "Show Less",
+  "codeCopy": "Copy",
+  "codeCopied": "Copied!",
+  "codeUseDarkTheme": "Use dark theme",
+  "codeWrapLines": "Wrap long lines",
+  "footerPrevious": "Previous",
+  "footerNext": "Next",
+  "footerWasHelpful": "Was this doc helpful?",
+  "footerThankYouForVote": "Thank you for your vote! 💙",
+  "footerShareFeedback": "Share your feedback",
+  "footerAskOnForums": "Ask a question on the forums",
+  "footerEditPage": "Edit this page",
+  "footerLlmsView": "View <llmsLink>llms.txt</llmsLink> and <fullLink>{fullName}</fullLink>",
+  "footerNewsletterTitle": "Sign up for the Expo Newsletter",
+  "footerSignUp": "Sign Up",
+  "footerThankYouSignUp": "Thank you for the sign up! 💙",
+  "footerUnsubscribePrefix": "Unsubscribe at any time. Read our ",
+  "footerPrivacyPolicy": "privacy policy",
+  "footerUnsubscribeSuffix": ".",
+  "progressTrackerMarkAsRead": "Mark this chapter as read",
+  "progressTrackerMarkAsUnread": "Mark this chapter as unread",
+  "progressTrackerNext": "Next: {title}",
+  "prerequisitesHeading": "Prerequisites",
+  "prerequisitesRequirementSingular": "requirement",
+  "prerequisitesRequirementPlural": "requirements"
+}
diff --git a/docs/messages/ja.json b/docs/messages/ja.json
new file mode 100644
index 00000000000000..b036f04ba8682e
--- /dev/null
+++ b/docs/messages/ja.json
@@ -0,0 +1,43 @@
+{
+  "languageSwitcher.label": "言語",
+  "editPage": "ページを編集",
+  "copyPage": "ページをコピー",
+  "onThisPage": "このページの内容",
+  "navHome": "ホーム",
+  "navGuides": "ガイド",
+  "navEas": "EAS",
+  "navReference": "リファレンス",
+  "navLearn": "学習",
+  "headerBlog": "ブログ",
+  "headerChangelog": "変更履歴",
+  "headerStarOnGitHub": "GitHub でスターを付ける",
+  "themeAuto": "自動",
+  "themeLight": "ライト",
+  "themeDark": "ダーク",
+  "showMore": "もっと見る",
+  "showLess": "折りたたむ",
+  "codeCopy": "コピー",
+  "codeCopied": "コピーしました！",
+  "codeUseDarkTheme": "ダークテーマを使用",
+  "codeWrapLines": "長い行を折り返す",
+  "footerPrevious": "前へ",
+  "footerNext": "次へ",
+  "footerWasHelpful": "このドキュメントは役に立ちましたか？",
+  "footerThankYouForVote": "ご投票ありがとうございます！💙",
+  "footerShareFeedback": "フィードバックを共有する",
+  "footerAskOnForums": "フォーラムで質問する",
+  "footerEditPage": "このページを編集する",
+  "footerLlmsView": "<llmsLink>llms.txt</llmsLink> と <fullLink>{fullName}</fullLink> を表示",
+  "footerNewsletterTitle": "Expo ニュースレターに登録する",
+  "footerSignUp": "登録",
+  "footerThankYouSignUp": "ご登録ありがとうございます！💙",
+  "footerUnsubscribePrefix": "いつでも配信停止できます。",
+  "footerPrivacyPolicy": "プライバシーポリシー",
+  "footerUnsubscribeSuffix": "をお読みください。",
+  "progressTrackerMarkAsRead": "この章を読了にする",
+  "progressTrackerMarkAsUnread": "この章を未読に戻す",
+  "progressTrackerNext": "次へ：{title}",
+  "prerequisitesHeading": "前提条件",
+  "prerequisitesRequirementSingular": "件",
+  "prerequisitesRequirementPlural": "件"
+}
diff --git a/docs/package.json b/docs/package.json
index ce1a5123c72e9c..1a707ee3a5e6e3 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -41,6 +41,7 @@
     "@expo/styleguide-cookie-consent": "^2.1.2",
     "@expo/styleguide-icons": "^4.2.4",
     "@expo/styleguide-search-ui": "^9.1.6",
+    "@formatjs/intl-localematcher": "^0.8.5",
     "@kapaai/react-sdk": "^0.9.6",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/mdx": "^3.1.1",
@@ -70,6 +71,7 @@
     "react": "^19.2.6",
     "react-diff-view": "^3.3.3",
     "react-dom": "^19.2.6",
+    "react-intl": "^10.1.4",
     "react-markdown": "^10.1.0",
     "react-player": "^3.4.0",
     "react-qr-code": "^2.0.18",
diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
index b745b6a6ff58ca..3b7541a13d3d65 100644
--- a/docs/pages/_app.tsx
+++ b/docs/pages/_app.tsx
@@ -6,7 +6,10 @@ import * as Sentry from '@sentry/react';
 import { MotionConfig } from 'framer-motion';
 import { AppProps } from 'next/app';
 import { Inter, JetBrains_Mono } from 'next/font/google';
+import { useRouter } from 'next/router';
+import { IntlProvider } from 'react-intl';
 
+import { getLocaleFromPath, messages } from '~/common/i18n';
 import { preprocessSentryError } from '~/common/sentry-utilities';
 import { useNProgress } from '~/common/useNProgress';
 import { DocumentationPageWrapper } from '~/components/DocumentationPageWrapper';
@@ -14,6 +17,7 @@ import { websiteSchema } from '~/constants/structured-data';
 import { useAnalyticsPageTracking } from '~/providers/Analytics';
 import { CodeBlockSettingsProvider } from '~/providers/CodeBlockSettingsProvider';
 import { TutorialChapterCompletionProvider } from '~/providers/TutorialChapterCompletionProvider';
+import { HreflangAlternates } from '~/ui/components/HreflangAlternates';
 import { markdownComponents } from '~/ui/components/Markdown';
 import { StructuredData } from '~/ui/components/StructuredData';
 import * as Tooltip from '~/ui/components/Tooltip';
@@ -62,11 +66,14 @@ const rootMarkdownComponents = {
 export { reportWebVitals } from '~/providers/Analytics';
 
 export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+  const locale = getLocaleFromPath(router.asPath);
   useNProgress();
   useAnalyticsPageTracking();
   return (
     <>
       <StructuredData id="website" data={websiteSchema} />
+      <HreflangAlternates />
       {/* oxlint-disable-next-line react/no-unknown-property */}
       <style jsx global>{`
         html,
@@ -85,23 +92,25 @@ export default function App({ Component, pageProps }: AppProps) {
           font-family: ${monospaceFont.style.fontFamily}, monospace;
         }
       `}</style>
-      <MotionConfig reducedMotion="user">
-        <ThemeProvider>
-          <CookieConsentProvider ga4Id="G-YKNPYCMLWY">
-            <TutorialChapterCompletionProvider>
-              <CodeBlockSettingsProvider>
-                <MDXProvider components={rootMarkdownComponents}>
-                  <Tooltip.Provider>
-                    <KapaProvider integrationId={KAPA_INTEGRATION_ID} callbacks={{}}>
-                      <Component {...pageProps} />
-                    </KapaProvider>
-                  </Tooltip.Provider>
-                </MDXProvider>
-              </CodeBlockSettingsProvider>
-            </TutorialChapterCompletionProvider>
-          </CookieConsentProvider>
-        </ThemeProvider>
-      </MotionConfig>
+      <IntlProvider locale={locale} messages={messages[locale]} defaultLocale="en">
+        <MotionConfig reducedMotion="user">
+          <ThemeProvider>
+            <CookieConsentProvider ga4Id="G-YKNPYCMLWY">
+              <TutorialChapterCompletionProvider>
+                <CodeBlockSettingsProvider>
+                  <MDXProvider components={rootMarkdownComponents}>
+                    <Tooltip.Provider>
+                      <KapaProvider integrationId={KAPA_INTEGRATION_ID} callbacks={{}}>
+                        <Component {...pageProps} />
+                      </KapaProvider>
+                    </Tooltip.Provider>
+                  </MDXProvider>
+                </CodeBlockSettingsProvider>
+              </TutorialChapterCompletionProvider>
+            </CookieConsentProvider>
+          </ThemeProvider>
+        </MotionConfig>
+      </IntlProvider>
     </>
   );
 }
diff --git a/docs/pages/_document.tsx b/docs/pages/_document.tsx
index 6b9bedb5735136..66610710222263 100644
--- a/docs/pages/_document.tsx
+++ b/docs/pages/_document.tsx
@@ -1,6 +1,8 @@
 import { THEME_COOKIE_NAME } from '@expo/styleguide';
 import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
 
+import { getLocaleFromPath, type SupportedLocale } from '~/common/i18n';
+
 const BLOCKING_THEME_SCRIPT = `
 (function() {
   function getCookieTheme() {
@@ -17,19 +19,25 @@ const BLOCKING_THEME_SCRIPT = `
 })();
 `;
 
-export default class DocsDocument extends Document {
+type DocsDocumentProps = {
+  locale: SupportedLocale;
+};
+
+export default class DocsDocument extends Document<DocsDocumentProps> {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
+    const locale = getLocaleFromPath(ctx.pathname || '');
     return {
       ...initialProps,
+      locale,
       styles: <>{initialProps.styles}</>,
     };
   }
 
   render() {
     return (
-      <Html lang="en" data-expo-theme>
+      <Html lang={this.props.locale} data-expo-theme>
         <Head>
           <script dangerouslySetInnerHTML={{ __html: BLOCKING_THEME_SCRIPT }} />
         </Head>
diff --git a/docs/pages/ja/tutorial/add-navigation.mdx b/docs/pages/ja/tutorial/add-navigation.mdx
new file mode 100644
index 00000000000000..d8b6c1342cb912
--- /dev/null
+++ b/docs/pages/ja/tutorial/add-navigation.mdx
@@ -0,0 +1,377 @@
+---
+title: ナビゲーションを追加する
+description: この章では、Expo アプリにナビゲーションを追加する方法を学びます。
+hasVideoLink: true
+---
+
+import { Collapsible } from '~/ui/components/Collapsible';
+import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
+import { FileTree } from '~/ui/components/FileTree';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
+import { Step } from '~/ui/components/Step';
+import { CODE } from '~/ui/components/Text';
+import { VideoBoxLink } from '~/ui/components/VideoBoxLink';
+
+この章では、Expo Router の基本を学び、スタックナビゲーションと 2 つのタブを持つボトムタブバーを作成します。
+
+<VideoBoxLink
+  videoId="8336fcFV_T4"
+  title="視聴：ユニバーサル Expo アプリにナビゲーションを追加する"
+  description="Expo Router でファイルベースルーティングをセットアップし、画面間のスタックナビゲーションを作成して、ボトムタブバーを構築します。"
+/>
+
+## Expo Router の基本
+
+Expo Router は React Native と web アプリ向けのファイルベースのルーティングフレームワークです。画面間のナビゲーションを管理し、複数のプラットフォームで同じコンポーネントを使用できます。始めるにあたって、次の規約を理解しておく必要があります。
+
+- **app ディレクトリ：** ルートとそのレイアウトのみを含む特別なディレクトリです。このディレクトリに追加したファイルは、ネイティブアプリでは画面として、web ではページとして扱われます。
+- **ルートレイアウト：** **app/\_layout.tsx** ファイルです。ヘッダーやタブバーなど、複数のルート間で一貫させたい共有 UI 要素を定義します。
+- **ファイル名の規約：** **index.tsx** などの _Index_ ファイル名は、親ディレクトリと一致し、パスセグメントを追加しません。たとえば、**app** ディレクトリ内の **index.tsx** は `/` ルートと一致します。
+- **ルート** ファイルは React コンポーネントをデフォルト値としてエクスポートします。拡張子は `.js`、`.jsx`、`.ts`、`.tsx` のいずれかを使用できます。
+- Android、iOS、web は統一されたナビゲーション構造を共有します。
+
+> 上記のリストで始めるには十分です。すべての機能の一覧については、[Expo Router 紹介](/router/introduction/) を参照してください。
+
+<Step label="1">
+
+## スタックに新しい画面を追加する
+
+**app** ディレクトリ内に **about.tsx** という名前の新しいファイルを作成しましょう。ユーザーが `/about` ルートに移動したときに、画面名を表示します。
+
+```tsx app/about.tsx|collapseHeight=300
+import { Text, View, StyleSheet } from 'react-native';
+
+export default function AboutScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>About screen</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#fff',
+  },
+});
+```
+
+**app/\_layout.tsx** 内で:
+
+1. `<Stack.Screen />` コンポーネントと `options` プロパティを追加して、`/about` ルートのタイトルを更新します。
+2. `options` プロパティを追加して、`/index` ルートのタイトルを `Home` に更新します。
+
+{/* prettier-ignore */}
+```tsx app/_layout.tsx
+import { Stack } from 'expo-router';
+
+export default function RootLayout() {
+  return (
+    /* @tutinfo <CODE>Stack</CODE> ナビゲーターの内部に画面をラップします。<CODE>/index</CODE> ルートに <CODE>options</CODE> プロパティを追加します。<CODE>/about</CODE> ルートを追加するため、もう一つの <CODE>Stack.Screen</CODE> コンポーネントを追加します。 */
+    <Stack>
+      <Stack.Screen name="index" options={{ title: 'Home' }} />
+      <Stack.Screen name="about" options={{ title: 'About' }} />
+    </Stack>
+    /* @end */
+  );
+}
+```
+
+<Collapsible summary={<><CODE>Stack</CODE> とは何ですか？</>}>
+
+スタックナビゲーターは、アプリ内のさまざまな画面間を移動するための基盤です。Android では、スタックされたルートが現在の画面の上にアニメーションで重なります。iOS では、スタックされたルートが右からアニメーションで表示されます。Expo Router は、新しいルートを追加するためのナビゲーションスタックを作成する `Stack` コンポーネントを提供します。
+
+</Collapsible>
+
+</Step>
+
+<Step label="2">
+
+## 画面間を移動する
+
+Expo Router の `Link` コンポーネントを使用して、`/index` ルートから `/about` ルートに移動します。これは、指定された `href` プロパティを持つ `<Text>` をレンダリングする React コンポーネントです。
+
+1. **index.tsx** 内で、`expo-router` から `Link` コンポーネントをインポートします。
+2. `<Text>` コンポーネントの後に `Link` コンポーネントを追加し、`href` プロパティに `/about` ルートを渡します。
+3. `Link` コンポーネントに `fontSize`、`textDecorationLine`、`color` のスタイルを追加します。`<Text>` コンポーネントと同じプロパティを受け取ります。
+
+{/* prettier-ignore */}
+```tsx app/index.tsx|collapseHeight=300
+import { Text, View, StyleSheet } from 'react-native';
+/* @tutinfo <CODE>expo-router</CODE> から <CODE>Link</CODE> コンポーネントをインポートします。 */ import { Link } from 'expo-router'; /* @end */
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Home screen</Text>
+      /* @tutinfo <CODE>Text</CODE> コンポーネントの後に <CODE>Link</CODE> コンポーネントを追加し、<CODE>href</CODE> プロパティに <CODE>/about</CODE> ルートを渡します。 */
+      <Link href="/about" style={styles.button}>
+        Go to About screen
+      </Link>
+      /* @end */
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '#fff',
+  },
+  /* @tutinfo <CODE>Link</CODE> コンポーネントに <CODE>fontSize</CODE>、<CODE>textDecorationLine</CODE>、<CODE>color</CODE> のスタイルを追加します。 */
+  button: {
+    fontSize: 20,
+    textDecorationLine: 'underline',
+    color: '#fff',
+  },
+  /* @end */
+});
+```
+
+アプリの変更を確認しましょう。`Link` をクリックして `/about` ルートに移動します。
+
+<ContentSpotlight file="tutorial/01-navigating-between-screens.mp4" />
+
+</Step>
+
+<Step label="3">
+
+## not-found ルートを追加する
+
+ルートが存在しない場合、`+not-found` ルートを使用してフォールバック画面を表示できます。これは、モバイルで無効なルートに移動した際にアプリをクラッシュさせず、web で _404_ エラーを表示する代わりにカスタム画面を表示したい場合に役立ちます。Expo Router は、このケースを処理するために特別な **+not-found.tsx** ファイルを使用します。
+
+1. app ディレクトリ内に **+not-found.tsx** という名前の新しいファイルを作成し、`NotFoundScreen` コンポーネントを追加します。
+2. `Stack.Screen` の `options` プロパティを追加して、このルートのカスタム画面タイトルを表示します。
+3. `Link` コンポーネントを追加して、フォールバックルートである `/` ルートに移動します。
+
+{/* prettier-ignore */}
+```tsx app/+not-found.tsx
+import { View, StyleSheet } from 'react-native';
+import { Link, Stack } from 'expo-router';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      /* @tutinfo <CODE>+not-found</CODE> ルートのタイトルを更新するため、<CODE>options</CODE> プロパティを持つ <CODE>Stack.Screen</CODE> コンポーネントを追加します。 */
+      <Stack.Screen options={{ title: 'Oops! Not Found' }} />
+      /* @end */
+      <View style={styles.container}>
+        /* @tutinfo フォールバックルートを追加すると、ユーザーがその画面に遷移できるようになります。ここでは、フォールバックルートは Home 画面です。 */
+        <Link href="/" style={styles.button}>
+          Go back to Home screen!
+        </Link>
+        /* @end */
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  button: {
+    fontSize: 20,
+    textDecorationLine: 'underline',
+    color: '#fff',
+  },
+});
+```
+
+これをテストするには、URL パスを変更しやすい web ブラウザで `http:localhost:8081/123` URL に移動します。アプリには `NotFoundScreen` コンポーネントが表示されるはずです。
+
+<ContentSpotlight file="tutorial/02-not-found-route.mp4" />
+
+</Step>
+
+<Step label="4">
+
+## ボトムタブナビゲーターを追加する
+
+この時点で、**app** ディレクトリのファイル構造は次のようになっています。
+
+<FileTree
+  files={[
+    ['app/_layout.tsx', 'ルートレイアウト'],
+    ['app/index.tsx', "ルート '/' に一致"],
+    ['app/about.tsx', "ルート '/about' に一致"],
+    ['app/+not-found.tsx', 'すべての 404 ルートに一致'],
+  ]}
+/>
+
+アプリにボトムタブナビゲーターを追加し、既存の Home と About 画面を再利用してタブレイアウトを作成します (X や BlueSky など、多くのソーシャルメディアアプリで一般的なナビゲーションパターンです)。また、ルートレイアウトでスタックナビゲーターを使用することで、`+not-found` ルートが他のネストされたナビゲーターの上に表示されるようにします。
+
+1. **app** ディレクトリ内に **(tabs)** サブディレクトリを追加します。この特別なディレクトリは、ルートをグループ化してボトムタブバーに表示するために使われます。
+2. ディレクトリ内に **(tabs)/\_layout.tsx** ファイルを作成します。これは、ルートレイアウトとは別のタブレイアウトを定義するために使用されます。
+3. 既存の **index.tsx** と **about.tsx** ファイルを **(tabs)** ディレクトリ内に移動します。**app** ディレクトリの構造は次のようになります。
+
+<FileTree
+  files={[
+    ['app/_layout.tsx', 'ルートレイアウト'],
+    ['app/+not-found.tsx', 'すべての 404 ルートに一致'],
+    ['app/(tabs)/_layout.tsx', 'タブレイアウト'],
+    ['app/(tabs)/index.tsx', "ルート '/' に一致"],
+    ['app/(tabs)/about.tsx', "ルート '/about' に一致"],
+  ]}
+/>
+
+ルートレイアウトファイルを更新して、`(tabs)` ルートを追加します。
+
+{/* prettier-ignore */}
+```tsx app/_layout.tsx
+import { Stack } from 'expo-router';
+
+export default function RootLayout() {
+  return (
+    <Stack>
+      /* @tutinfo これは、特に Root レイアウトが親のスタックナビゲーターで構成されている場合に、タブナビゲーターをスタックナビゲーターの内部にネストする方法です。また、タブナビゲーターのヘッダーを非表示にするため、<CODE>headerShown</CODE> オプションを <CODE>false</CODE> に設定しています。そうしないと、各画面に 2 つのヘッダーが表示されてしまいます。 */
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      /* @end */
+    </Stack>
+  );
+}
+```
+
+**(tabs)/\_layout.tsx** 内に `Tabs` コンポーネントを追加して、ボトムタブレイアウトを定義します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/_layout.tsx
+import { Tabs } from 'expo-router';
+
+export default function TabLayout() {
+  return (
+    <Tabs>
+      /* @tutinfo <CODE>Tabs.Screen</CODE> コンポーネントは <CODE>Stack.Screen</CODE> コンポーネントと同様に動作し、同じプロパティを受け取ります。唯一の違いは、デバイス上のナビゲーションパターンです。 */
+      <Tabs.Screen name="index" options={{ title: 'Home' }} />
+      <Tabs.Screen name="about" options={{ title: 'About' }} />
+      /* @end */
+    </Tabs>
+  );
+}
+```
+
+新しいボトムタブが表示されたアプリを確認してみましょう。
+
+<ContentSpotlight
+  alt="すべてのプラットフォームで表示されたボトムタブナビゲーター"
+  src="/static/images/tutorial/03-bottom-tab-navigator.webp"
+  className="max-w-[720px]"
+/>
+
+</Step>
+
+<Step label="5">
+
+## ボトムタブナビゲーターの外観を更新する
+
+現時点では、ボトムタブナビゲーターはすべてのプラットフォームで同じ見た目ですが、アプリのスタイルとは合っていません。たとえば、タブバーやヘッダーにカスタムアイコンが表示されず、ボトムタブの背景色がアプリの背景色と一致していません。
+
+**(tabs)/\_layout.tsx** ファイルを修正して、タブバーアイコンを追加します。
+
+1. [`@expo/vector-icons`](/guides/icons/#expovector-icons) &mdash; 人気のアイコンセットを含むライブラリ &mdash; から `Ionicons` アイコンセットをインポートします。
+2. `tabBarIcon` を `index` と `about` の両方のルートに追加します。この関数は `focused` と `color` を引数として受け取り、アイコンコンポーネントをレンダリングします。アイコンセットから、カスタムアイコン名を指定できます。
+3. `Tabs` コンポーネントに `screenOptions.tabBarActiveTintColor` を追加し、値を `#ffd33d` に設定します。これにより、アクティブ時のタブバーのアイコンとラベルの色が変わります。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/_layout.tsx
+import { Tabs } from 'expo-router';
+/* @tutinfo <CODE>Ionicons</CODE> アイコンセットをインポートします。*/
+import Ionicons from '@expo/vector-icons/Ionicons';
+/* @end */
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      /* @tutinfo タブバーをカスタマイズするために使用できる <CODE>screenOptions</CODE> は多数あります。ここではアクティブなタブの色をカスタム値に変更しており、この値はアプリの後の部分でも使用します。 */
+      screenOptions={{
+        tabBarActiveTintColor: '#ffd33d',
+      }}
+      /* @end */
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color, focused }) => (
+            /* @tutinfo <CODE>focused</CODE> パラメーターを使用すると、タブがアクティブまたは非アクティブのときのアイコンとラベルの動作を変更できます。*/
+            <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
+            /* @end */
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="about"
+        options={{
+          title: 'About',
+          tabBarIcon: ({ color, focused }) => (
+            /* @tutinfo */
+            <Ionicons name={focused ? 'information-circle' : 'information-circle-outline'} color={color} size={24}/>
+            /* @end */
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}
+```
+
+`screenOptions` プロパティを使って、タブバーとヘッダーの背景色も変更しましょう。
+
+```tsx app/(tabs)/_layout.tsx
+<Tabs
+  screenOptions={{
+    tabBarActiveTintColor: '#ffd33d',
+    headerStyle: {
+      backgroundColor: '#25292e',
+    },
+    headerShadowVisible: false,
+    headerTintColor: '#fff',
+    tabBarStyle: {
+      backgroundColor: '#25292e',
+    },
+  }}
+>
+```
+
+上記のコードでは:
+
+- `headerStyle` プロパティを使ってヘッダーの背景を `#25292e` に設定しています。また、`headerShadowVisible` を使ってヘッダーの影を無効化しています。
+- `headerTintColor` でヘッダーラベルに `#fff` を適用しています
+- `tabBarStyle.backgroundColor` でタブバーに `#25292e` を適用しています
+
+これでアプリにカスタムボトムタブナビゲーターが追加されました。
+
+<ContentSpotlight
+  alt="カスタムボトムタブナビゲーター"
+  src="/static/images/tutorial/04-tab-navigator-complete.webp"
+  className="max-w-[720px]"
+/>
+
+</Step>
+
+## まとめ
+
+<ProgressTracker
+  currentChapterIndex={1}
+  name="GET_STARTED"
+  chapterTitle="第 2 章：ナビゲーションを追加する"
+  summary="アプリにスタックとタブナビゲーターを追加しました。"
+  nextChapterDescription="次の章では、アプリの最初の画面を構築する方法を学びます。"
+  nextChapterTitle="アプリの最初の画面を構築する"
+  nextChapterLink="/ja/tutorial/build-a-screen"
+/>
diff --git a/docs/pages/ja/tutorial/build-a-screen.mdx b/docs/pages/ja/tutorial/build-a-screen.mdx
new file mode 100644
index 00000000000000..c9d837784804ba
--- /dev/null
+++ b/docs/pages/ja/tutorial/build-a-screen.mdx
@@ -0,0 +1,454 @@
+---
+title: 画面を構築する
+description: このチュートリアルでは、React Native の Pressable や Expo Image などのコンポーネントを使って画面を構築する方法を学びます。
+hasVideoLink: true
+---
+
+import { Collapsible } from '~/ui/components/Collapsible';
+import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
+import { Step } from '~/ui/components/Step';
+import { CODE } from '~/ui/components/Text';
+import { VideoBoxLink } from '~/ui/components/VideoBoxLink';
+
+この章では、StickerSmash アプリの最初の画面を作成します。
+
+<ContentSpotlight
+  alt="初期レイアウト。"
+  src="/static/images/tutorial/initial-layout.webp"
+  className="max-w-[300px]"
+/>
+
+上記の画面には、画像と 2 つのボタンが表示されています。ユーザーはどちらかのボタンを使って画像を選択できます。1 つ目のボタンではデバイスから画像を選択でき、2 つ目のボタンではアプリが用意したデフォルト画像をそのまま使用できます。
+
+ユーザーが画像を選択すると、その画像にステッカーを追加できるようになります。それでは、この画面を作っていきましょう。
+
+<VideoBoxLink
+  videoId="3rcOP8xDwTQ"
+  title="視聴：ユニバーサル Expo アプリで画面を構築する"
+  description="Pressable、Expo Image などのコアコンポーネントを使用して、StickerSmash アプリの最初の画面を構築し、画像選択のレイアウトを作成します。"
+/>
+
+---
+
+<Step label="1">
+
+## 画面を分解する
+
+コードを書いて画面を構築する前に、いくつかの主要な要素に分解してみましょう。
+
+<ContentSpotlight
+  alt="初期レイアウトの分解。"
+  src="/static/images/tutorial/breakdown-of-layout.webp"
+  className="max-w-[300px]"
+/>
+
+主要な要素は 2 つです。
+
+- 画面の中央に大きな画像が表示されています
+- 画面の下半分に 2 つのボタンがあります
+
+1 つ目のボタンは複数のコンポーネントで構成されています。親要素には黄色のボーダーがあり、その内側に行レイアウトでアイコンとテキストコンポーネントが配置されています。
+
+<ContentSpotlight
+  alt="行レイアウトのボタンコンポーネントの分解。"
+  src="/static/images/tutorial/breakdown-of-buttons.webp"
+  className="max-w-[400px]"
+/>
+
+UI を小さな部品に分解できたので、コーディングを始める準備が整いました。
+
+</Step>
+
+<Step label="2">
+
+## 画像を表示する
+
+アプリ内で画像を表示するために `expo-image` ライブラリを使用します。このライブラリは、画像を読み込んで描画するためのクロスプラットフォームな `<Image>` コンポーネントを提供します。使用しているデフォルトのプロジェクトテンプレートにすでに含まれています。
+
+Image コンポーネントは画像のソースを値として受け取ります。ソースには [静的アセット](https://reactnative.dev/docs/images#static-image-resources) または URL を指定できます。たとえば、**assets/images** ディレクトリから読み込むソースは静的アセットです。また、`uri` プロパティを使って [ネットワーク](https://reactnative.dev/docs/images#network-images) から取得することもできます。
+
+<ContentSpotlight
+  alt="チュートリアルでプレースホルダーとして使用する背景画像。"
+  src="/static/images/tutorial/background-image.webp"
+  className="max-w-[250px]"
+/>
+
+**app/(tabs)/index.tsx** ファイルで Image コンポーネントを使うには:
+
+1. `expo-image` ライブラリから `Image` をインポートします。
+2. **assets/images/background-image.png** を `Image` コンポーネントの `source` プロパティとして使用するために、`PlaceholderImage` 変数を作成します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx|collapseHeight=380
+import { View, StyleSheet } from 'react-native';
+/* @tutinfo <CODE>Image</CODE> コンポーネントをインポートします。 */ import { Image } from 'expo-image'; /* @end */
+
+/* @tutinfo "assets/images/" ディレクトリから画像をインポートします。この画像は静的リソースであるため、<CODE>require</CODE> を使用して参照する必要があります。 */
+const PlaceholderImage = require('@/assets/images/background-image.png');
+/* @end */
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      /* @tutinfo <CODE>Image</CODE> コンポーネントをコンテナの内部にラップします。また、プレースホルダー画像を表示するため、画像コンポーネントを追加します。 */
+      <View style={styles.imageContainer}>
+        <Image source={PlaceholderImage} style={styles.image} />
+      </View>
+      /* @end */
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    /* @tutinfo <CODE>justifyContent</CODE> プロパティを削除するため、コンテナのスタイルを変更します。 */
+    alignItems: 'center',
+    /* @end */
+  },
+  /* @tutinfo 画像コンテナと画像のスタイルを追加します。 */
+  imageContainer: {
+    flex: 1,
+  },
+  image: {
+    width: 320,
+    height: 440,
+    borderRadius: 18,
+  },
+  /* @end */
+});
+```
+
+</Step>
+
+<Step label="3">
+
+## コンポーネントをファイルに分割する
+
+この画面にコンポーネントを追加していく中で、コードを複数のファイルに分割しましょう。チュートリアル全体を通して、カスタムコンポーネントの作成には components ディレクトリを使用します。
+
+1. トップレベルの **components** ディレクトリを作成し、その中に **ImageViewer.tsx** ファイルを作成します。
+2. 画像を表示するコードと `image` スタイルをこのファイルに移動します。
+
+{/* prettier-ignore */}
+```tsx components/ImageViewer.tsx|collapseHeight=280
+import { ImageSourcePropType, StyleSheet } from 'react-native';
+import { Image } from 'expo-image';
+
+type Props = {
+  imgSource: ImageSourcePropType;
+};
+
+export default function ImageViewer({ imgSource }: Props) {
+  return <Image source={imgSource} style={styles.image} />;
+}
+
+const styles = StyleSheet.create({
+  image: {
+    width: 320,
+    height: 440,
+    borderRadius: 18,
+  },
+});
+```
+
+> **info** **ImageViewer** はカスタムコンポーネントであるため、**app** ディレクトリではなく別のディレクトリに配置しています。**app** ディレクトリ内のファイルはすべて、レイアウトファイルかルートファイルのいずれかです。詳細については [ナビゲーション以外のコンポーネントは app ディレクトリの外に置く](/router/basics/core-concepts/#5-non-navigation-components-live-outside-of-app-directory) を参照してください。
+
+`ImageViewer` をインポートして、**app/(tabs)/index.tsx** で使用します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx|collapseHeight=320
+import { StyleSheet, View } from 'react-native';
+
+/* @tutinfo */import ImageViewer from '@/components/ImageViewer'; /* @end */
+
+const PlaceholderImage = require('@/assets/images/background-image.png');
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        /* @tutinfo <CODE>Image</CODE> コンポーネントを <CODE>ImageViewer</CODE> に置き換えます。 */
+        <ImageViewer imgSource={PlaceholderImage} />
+        /* @end */
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+});
+```
+
+<Collapsible summary={<>import 文の <CODE>@</CODE> とは何ですか？</>}>
+
+`@` 記号は、相対パスの代わりにカスタムコンポーネントや他のモジュールをインポートするためのカスタム [パスエイリアス](/guides/typescript/#path-aliases-optional) です。Expo CLI が **tsconfig.json** で自動的に設定します。
+
+</Collapsible>
+
+</Step>
+
+<Step label="4">
+
+## Pressable を使ってボタンを作成する
+
+React Native にはタッチイベントを扱うためのコンポーネントがいくつかありますが、柔軟性が高い [`<Pressable>`](https://reactnative.dev/docs/pressable) が推奨されます。シングルタップ、長押し、押下時と解放時で別々のイベントの発火など、さまざまな操作を検出できます。
+
+デザイン上、作成すべきボタンは 2 つあります。それぞれスタイルとラベルが異なります。まずは、これらのボタンの再利用可能なコンポーネントを作成しましょう。**components** ディレクトリ内に **Button.tsx** ファイルを作成し、次のコードを記述します。
+
+{/* prettier-ignore */}
+```tsx components/Button.tsx|collapseHeight=280
+import { StyleSheet, View, Pressable, Text } from 'react-native';
+
+type Props = {
+  label: string;
+};
+
+export default function Button({ label }: Props) {
+  return (
+    <View style={styles.buttonContainer}>
+      <Pressable style={styles.button} onPress={() => alert('You pressed a button.')}>
+        <Text style={styles.buttonLabel}>{label}</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    width: 320,
+    height: 68,
+    marginHorizontal: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 3,
+  },
+  button: {
+    borderRadius: 10,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  buttonLabel: {
+    color: '#fff',
+    fontSize: 16,
+  },
+});
+```
+
+画面上のいずれかのボタンをタップすると、アプリはアラートを表示します。これは、`<Pressable>` が `onPress` プロパティで `alert()` を呼び出しているためです。このコンポーネントを **app/(tabs)/index.tsx** ファイルにインポートし、これらのボタンを囲む `<View>` のスタイルを追加しましょう。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx
+import { View, StyleSheet } from 'react-native';
+
+/* @tutinfo */import Button from '@/components/Button'; /* @end */
+import ImageViewer from '@/components/ImageViewer';
+
+const PlaceholderImage = require("@/assets/images/background-image.png");
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        <ImageViewer imgSource={PlaceholderImage} />
+      </View>
+      /* @tutinfo 再利用可能な <CODE>Button</CODE> コンポーネントを使って 2 つのボタンを作成し、<CODE>View</CODE> コンポーネント内にカプセル化します。 */
+      <View style={styles.footerContainer}>
+        <Button label="Choose a photo" />
+        <Button label="Use this photo" />
+      </View>
+      /* @end */
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+    paddingTop: 28,
+  },
+  /* @tutinfo 以下のスタイルを追加します。 */
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+  /* @end */
+});
+```
+
+Android、iOS、web でアプリを確認してみましょう。
+
+<ContentSpotlight
+  alt="初期レイアウト。"
+  src="/static/images/tutorial/buttons-created.webp"
+  className="max-w-[720px]"
+/>
+
+「Use this photo」のラベルが付いた 2 つ目のボタンは、デザイン通りのボタンに近い見た目になっています。一方、1 つ目のボタンはデザインに合わせるために追加のスタイル設定が必要です。
+
+</Step>
+
+<Step label="5">
+
+## 再利用可能なボタンコンポーネントを強化する
+
+「Choose a photo」ボタンには「Use this photo」ボタンとは異なるスタイルが必要なので、`primary` テーマを適用できるよう新しい `theme` プロパティを追加します。このボタンにはラベルの前にアイコンも表示します。アイコンには `@expo/vector-icons` ライブラリのものを使用します。
+
+ボタンにアイコンを読み込んで表示するために、ライブラリから `FontAwesome` を使いましょう。**components/Button.tsx** を修正して、次のコードスニペットを追加します。
+
+{/* prettier-ignore */}
+```tsx components/Button.tsx
+import { StyleSheet, View, Pressable, Text } from 'react-native';
+/* @tutinfo FontAwesome をインポートします。 */import FontAwesome from '@expo/vector-icons/FontAwesome';/* @end */
+
+type Props = {
+  label: string;
+  /* @tutinfo theme プロパティを追加します。 */theme?: 'primary';/* @end */
+};
+
+export default function Button({ label, /* @tutinfo ボタンのバリアントを判定するため、<CODEtheme</CODE> プロパティを使います。 */theme/* @end */ }: Props) {
+  /* @tutinfo primary テーマのボタンを条件付きでレンダリングします。 */
+  if (theme === 'primary') {
+  /* @end */
+  /* @tutinfo */
+    return (
+      <View
+        style={[
+          styles.buttonContainer,
+          { borderWidth: 4, borderColor: '#ffd33d', borderRadius: 18 },
+        ]}>
+        <Pressable
+          style={[styles.button, { backgroundColor: '#fff' }]}
+          onPress={() => alert('You pressed a button.')}>
+          <FontAwesome name="picture-o" size={18} color="#25292e" style={styles.buttonIcon} />
+          <Text style={[styles.buttonLabel, { color: '#25292e' }]}>{label}</Text>
+        </Pressable>
+      </View>
+    );
+  /* @end */
+  /* @tutinfo */
+  }
+  /* @end */
+
+  return (
+    <View style={styles.buttonContainer}>
+      <Pressable style={styles.button} onPress={() => alert('You pressed a button.')}>
+        <Text style={styles.buttonLabel}>{label}</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    width: 320,
+    height: 68,
+    marginHorizontal: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 3,
+  },
+  button: {
+    borderRadius: 10,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  /* @tutinfo primary テーマのボタンを条件付きでレンダリングします。 */
+  buttonIcon: {
+    paddingRight: 8,
+  },
+  /* @end */
+  buttonLabel: {
+    color: '#fff',
+    fontSize: 16,
+  },
+});
+```
+
+上記のコードが何をしているのか確認しましょう。
+
+- primary テーマのボタンは **インラインスタイル** を使用し、`style` プロパティに直接渡したオブジェクトで `StyleSheet.create()` で定義したスタイルを上書きします。
+- primary テーマの `<Pressable>` コンポーネントは、`backgroundColor` プロパティに値 `#fff` を指定して、ボタンの背景を白に設定しています。このプロパティを `styles.button` に追加すると、primary テーマと未指定のテーマの両方に背景色が適用されてしまいます。
+- インラインスタイルは JavaScript を使用し、特定の値についてデフォルトのスタイルを上書きします。
+
+次に、**app/(tabs)/index.tsx** ファイルを修正して、1 つ目のボタンに `theme="primary"` プロパティを設定します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx
+import { View, StyleSheet } from 'react-native';
+
+import Button from '@/components/Button';
+import ImageViewer from '@/components/ImageViewer';
+
+const PlaceholderImage = require('@/assets/images/background-image.png');
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        <ImageViewer imgSource={PlaceholderImage} />
+      </View>
+      <View style={styles.footerContainer}>
+        /* @tutinfo 最初のボタンに <CODE>"primary"</CODE> テーマを追加します。 */
+        <Button theme="primary" label="Choose a photo" />
+        /* @end */
+        <Button label="Use this photo" />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+});
+```
+
+Android、iOS、web でアプリを確認してみましょう。
+
+<ContentSpotlight file="tutorial/04-complete-layout.mp4" />
+
+</Step>
+
+## まとめ
+
+<ProgressTracker
+  currentChapterIndex={2}
+  name="GET_STARTED"
+  chapterTitle="第 3 章：画面を構築する"
+  summary="アプリの最初の画面の構築に向けて、初期デザインの実装が完了しました。"
+  nextChapterDescription="次の章では、デバイスのメディアライブラリから画像を選択する機能を追加します。"
+  nextChapterTitle="画像ピッカーを使用する"
+  nextChapterLink="/ja/tutorial/image-picker"
+/>
diff --git a/docs/pages/ja/tutorial/configuration.mdx b/docs/pages/ja/tutorial/configuration.mdx
new file mode 100644
index 00000000000000..68856d31ee2457
--- /dev/null
+++ b/docs/pages/ja/tutorial/configuration.mdx
@@ -0,0 +1,129 @@
+---
+title: ステータスバー、スプラッシュスクリーン、アプリアイコンを設定する
+description: このチュートリアルでは、ステータスバー、アプリアイコン、スプラッシュスクリーンを設定する基本を学びます。
+hasVideoLink: true
+---
+
+import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
+import { Step } from '~/ui/components/Step';
+import { VideoBoxLink } from '~/ui/components/VideoBoxLink';
+
+この章では、アプリストアへのデプロイ前に、ステータスバーのテーマ設定、アプリアイコンとスプラッシュスクリーンのカスタマイズなど、アプリの細部を整えていきます。
+
+<VideoBoxLink
+  videoId="OgGCYdElcZo"
+  title="視聴：ユニバーサル Expo アプリの仕上げを行う"
+  description="アプリストアへのデプロイ前に、ステータスバーを設定し、アプリアイコンをカスタマイズし、スプラッシュスクリーンを準備します。"
+/>
+
+---
+
+<Step label="1">
+
+## ステータスバーを設定する
+
+[`expo-status-bar`](/versions/latest/sdk/status-bar/) ライブラリは、`create-expo-app` で作成したすべてのプロジェクトにあらかじめインストールされています。このライブラリは、アプリのステータスバーのスタイルを設定するための `StatusBar` コンポーネントを提供します。
+
+**app/\_layout.tsx** で次の手順を行います。
+
+1. `expo-status-bar` から `StatusBar` をインポートします。
+2. `StatusBar` と既存の `Stack` コンポーネントを [React の Fragment コンポーネント](https://react.dev/reference/react/Fragment) でまとめます。
+
+{/* prettier-ignore */}
+```tsx app/_layout.tsx
+import { Stack } from 'expo-router';
+/* @tutinfo */
+import { StatusBar } from 'expo-status-bar';
+/* @end */
+
+export default function RootLayout() {
+  return (
+    /* @tutinfo `StatusBar` と既存の `Stack` コンポーネントを React の Fragment コンポーネントでまとめます。 */
+    <>
+    /* @end */
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      </Stack>
+      /* @tutinfo */<StatusBar style="light" />
+    </>
+    /* @end */
+  );
+}
+```
+
+それでは、Android と iOS でアプリの様子を見てみましょう。
+
+<ContentSpotlight
+  alt="Android と iOS の両方で表示される、light スタイルの StatusBar。"
+  src="/static/images/tutorial/statusbar-example.webp"
+  className="max-w-[480px]"
+/>
+
+</Step>
+
+<Step label="2">
+
+## アプリアイコン
+
+プロジェクト内の **assets/images** ディレクトリに **icon.png** ファイルがあります。これがアプリアイコンです。1024px × 1024px の画像で、見た目は次のとおりです。
+
+<ContentSpotlight src="/static/images/tutorial/icon.webp" className="max-w-[150px]" />
+
+スプラッシュスクリーン画像と同様に、**app.json** ファイルの `"icon"` プロパティでアプリアイコンのパスを設定します。デフォルトでは、新しい Expo プロジェクトには `"./assets/images/icon.png"` という正しいパスが設定されているため、何も変更する必要はありません。
+
+> アプリストア向けにアプリをビルドする段階になると、[Expo Application Services (EAS)](/eas/) がこの画像を使って、各デバイスに最適化されたアイコンを生成します。
+
+アプリアイコンは Expo Go のさまざまな場所で確認できます。次は Expo Go の開発者メニューに表示されるアプリアイコンの例です。
+
+<ContentSpotlight
+  alt="Expo Go アプリの開発者メニューに表示されるスプラッシュスクリーン。"
+  src="/static/images/tutorial/app-icon-visible.webp"
+  className="max-w-[240px]"
+/>
+
+</Step>
+
+<Step label="3">
+
+## スプラッシュスクリーン
+
+スプラッシュスクリーンは、アプリのコンテンツが読み込まれる前に表示されます。アプリアイコンのような小さな画像を中央に配置し、アプリのコンテンツが表示できる状態になると非表示になります。
+
+[`expo-splash-screen`](/versions/latest/sdk/splash-screen/) プラグインは、`create-expo-app` で作成したすべてのプロジェクトにあらかじめインストールされています。このライブラリは、スプラッシュスクリーンを設定するためのコンフィグプラグインを提供します。
+
+**app.json** では、アプリアイコン ([ダウンロード可能なアセット](/ja/tutorial/create-your-first-app/#download-assets) に含まれます) をスプラッシュスクリーン画像として使用するように、`expo-splash-screen` プラグインが次のスニペットですでに設定されています。何も変更する必要はありません。
+
+```json app.json
+{
+  "plugins": [
+    /* @hide ... */ /* @end */
+    [
+      "expo-splash-screen",
+      {
+        "image": "./assets/images/splash-icon.png"
+        /* @hide ... */ /* @end */
+      }
+    ]
+  ]
+}
+```
+
+ただし、**スプラッシュスクリーンをテストするには、Expo Go や [開発ビルド](/develop/development-builds/introduction/) は使用できません**。テストするには、アプリのプレビュービルドまたはプロダクションビルドを作成する必要があります。スプラッシュスクリーンの設定とテスト方法の詳細については、次のリソースを参照してみてください。
+
+- [スプラッシュスクリーンアイコンの作成](/develop/user-interface/splash-screen-and-app-icon/#splash-screen) ガイドで、スプラッシュスクリーンアイコンの設定方法を確認できます。
+- プレビュービルドの作成方法については、EAS チュートリアルの [内部配布](/tutorial/eas/internal-distribution-builds/) ガイドを参照してください。プロダクションビルドを作成する場合は、[Android](/tutorial/eas/android-production-build/) と [iOS](/tutorial/eas/ios-production-build/) のガイドを参照してください。
+
+</Step>
+
+## まとめ
+
+<ProgressTracker
+  currentChapterIndex={8}
+  name="GET_STARTED"
+  chapterTitle="第 9 章：ステータスバー、スプラッシュスクリーン、アプリアイコンを設定する"
+  summary="おつかれさまでした！同じコードベースから Android、iOS、web で動作するアプリを作り上げました。"
+  nextChapterDescription="次のセクションでは、ここで扱った概念や軽く触れたトピックについて、さらに詳しく学べるリソースを紹介します。"
+  nextChapterTitle="学習リソース"
+  nextChapterLink="/ja/tutorial/follow-up"
+/>
diff --git a/docs/pages/ja/tutorial/create-a-modal.mdx b/docs/pages/ja/tutorial/create-a-modal.mdx
new file mode 100644
index 00000000000000..eab493b2a5920a
--- /dev/null
+++ b/docs/pages/ja/tutorial/create-a-modal.mdx
@@ -0,0 +1,872 @@
+---
+title: モーダルを作成する
+description: このチュートリアルでは、画像を選択するための React Native モーダルを作成する方法を学びます。
+hasVideoLink: true
+---
+
+import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
+import { Step } from '~/ui/components/Step';
+import { VideoBoxLink } from '~/ui/components/VideoBoxLink';
+
+React Native は、アプリの他のコンテンツの上にコンテンツを表示する [`<Modal>` コンポーネント](https://reactnative.dev/docs/modal) を提供します。一般的に、モーダルはユーザーの注意を重要な情報に向けたり、アクションを促したりするために使用されます。たとえば [第 3 章](/ja/tutorial/build-a-screen/#step-7-enhance-the-reusable-button-component) では、ボタンを押した後に `alert()` を使ってプレースホルダーのテキストを表示しました。これがモーダルコンポーネントがオーバーレイを表示する仕組みです。
+
+この章では、絵文字ピッカーのリストを表示するモーダルを作成します。
+
+<VideoBoxLink
+  videoId="HRAMzrBwVeo"
+  title="視聴：ユニバーサル Expo アプリでモーダルを作成する"
+  description="React Native の Modal API を使ってモーダルコンポーネントを構築し、絵文字ピッカーを表示してユーザー操作を処理します。"
+/>
+
+---
+
+<Step label="1">
+
+## ボタンを表示するための状態変数を宣言する
+
+モーダルを実装する前に、新しいボタンを 3 つ追加します。これらのボタンは、ユーザーがメディアライブラリから画像を選択したり、プレースホルダー画像を使ったりした後に表示されます。ボタンのうちの 1 つが絵文字ピッカーのモーダルを開きます。
+
+**app/(tabs)/index.tsx** で:
+
+1. モーダルを開くボタンや他のオプションの表示・非表示を切り替えるために、ブール値の状態変数 `showAppOptions` を宣言します。アプリ画面の読み込み時には `false` にして、画像を選択する前にはオプションを表示しないようにします。ユーザーが画像を選択したり、プレースホルダー画像を使ったりすると、`true` に設定します。
+2. `pickImageAsync()` 関数を更新して、ユーザーが画像を選択した後に `showAppOptions` の値を `true` に設定します。
+3. テーマが設定されていないボタンに、次の値を持つ `onPress` プロパティを追加して更新します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx
+import { View, StyleSheet } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import { useState } from 'react';
+
+import Button from '@/components/Button';
+import ImageViewer from '@/components/ImageViewer';
+
+const PlaceholderImage = require('@/assets/images/background-image.png');
+
+export default function Index() {
+  const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
+  /* @tutinfo <CODE>Index</CODE> コンポーネント内に state 変数を作成します。 */
+  const [showAppOptions, setShowAppOptions] = useState<boolean>(false);
+  /* @end */
+
+  const pickImageAsync = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setSelectedImage(result.assets[0].uri);
+      /* @tutinfo 画像を選択した後、app options を true に設定します。 */
+      setShowAppOptions(true);
+      /* @end */
+    } else {
+      alert('You did not select any image.');
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        <ImageViewer imgSource={PlaceholderImage} selectedImage={selectedImage} />
+      </View>
+      /* @tutinfo <CODE>showAppOptions</CODE> の値に基づいてボタンが表示されます。また、既存のボタンを三項演算子のブロック内に移動します。 */
+      {showAppOptions ? (
+        <View />
+      /* @end */
+      ) : (
+        <View style={styles.footerContainer}>
+          <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
+          /* @tutinfo <CODE>alert()</CODE> を <CODE>onPress</CODE> に置き換えます。*/
+          <Button label="Use this photo" onPress={() => setShowAppOptions(true)} />
+          /* @end */
+        </View>
+      /* @tutinfo */)}/* @end */
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+});
+```
+
+上記のスニペットでは、`showAppOptions` の値に応じて `Button` コンポーネントをレンダリングし、ボタンを三項演算子ブロックの中に移動しています。`showAppOptions` の値が `true` の場合は、空の `<View>` コンポーネントをレンダリングします。この状態については次のステップで対応します。
+
+次に、**components/Button.tsx** で 2 つ目のボタンをレンダリングする際の `Button` コンポーネントから `alert` を削除し、`onPress` プロパティを更新します。
+
+{/* prettier-ignore */}
+```tsx components/Button.tsx
+<Pressable style={styles.button} /* @tutinfo <CODE>alert()</CODE> を <CODE>onPress</CODE> に置き換えます。*/ onPress={onPress}/* @end */>
+```
+
+</Step>
+
+<Step label="2">
+
+## ボタンを追加する
+
+この章で実装するオプションボタンのレイアウトを分解してみましょう。デザインは次のようになっています。
+
+<ContentSpotlight
+  alt="ボタン行のレイアウトの分解。"
+  src="/static/images/tutorial/buttons-layout.jpg"
+  className="max-w-[480px]"
+/>
+
+親の `<View>` の中に、横一列に並んだ 3 つのボタンが含まれています。中央のプラスアイコン (+) のボタンはモーダルを開くもので、他の 2 つとは異なるスタイルになっています。
+
+**components** ディレクトリ内に、次のコードで新しい **CircleButton.tsx** ファイルを作成します。
+
+```tsx components/CircleButton.tsx
+import { View, Pressable, StyleSheet } from 'react-native';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+
+type Props = {
+  onPress: () => void;
+};
+
+export default function CircleButton({ onPress }: Props) {
+  return (
+    <View style={styles.circleButtonContainer}>
+      <Pressable style={styles.circleButton} onPress={onPress}>
+        <MaterialIcons name="add" size={38} color="#25292e" />
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  circleButtonContainer: {
+    width: 84,
+    height: 84,
+    marginHorizontal: 60,
+    borderWidth: 4,
+    borderColor: '#ffd33d',
+    borderRadius: 42,
+    padding: 3,
+  },
+  circleButton: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 42,
+    backgroundColor: '#fff',
+  },
+});
+```
+
+プラスアイコンを描画するために、このボタンは `@expo/vector-icons` ライブラリの `<MaterialIcons>` アイコンセットを使用します。
+
+他の 2 つのボタンも `<MaterialIcons>` を使い、縦に並んだテキストラベルとアイコンを表示します。**components** ディレクトリ内に **IconButton.tsx** という名前のファイルを作成します。このコンポーネントは 3 つのプロパティを受け取ります。
+
+- `icon`: `MaterialIcons` ライブラリのアイコン名に対応します。
+- `label`: ボタンに表示されるテキストラベルです。
+- `onPress`: ユーザーがボタンを押したときに実行される関数です。
+
+```tsx components/IconButton.tsx
+import { Pressable, StyleSheet, Text } from 'react-native';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+
+type Props = {
+  icon: keyof typeof MaterialIcons.glyphMap;
+  label: string;
+  onPress: () => void;
+};
+
+export default function IconButton({ icon, label, onPress }: Props) {
+  return (
+    <Pressable style={styles.iconButton} onPress={onPress}>
+      <MaterialIcons name={icon} size={24} color="#fff" />
+      <Text style={styles.iconButtonLabel}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  iconButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconButtonLabel: {
+    color: '#fff',
+    marginTop: 12,
+  },
+});
+```
+
+**app/(tabs)/index.tsx** 内で:
+
+1. `CircleButton` と `IconButton` コンポーネントをインポートして表示できるようにします。
+2. これらのボタン用に 3 つのプレースホルダー関数を追加します。`onReset()` 関数はユーザーがリセットボタンを押したときに実行され、画像ピッカーのボタンが再度表示されるようにします。残りの 2 つの関数の機能は後で実装します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx
+import { View, StyleSheet } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import { useState } from 'react';
+
+import Button from '@/components/Button';
+import ImageViewer from '@/components/ImageViewer';
+/* @tutinfo <CODE>IconButton</CODE> と <CODE>CircleButton</CODE> コンポーネントをインポートします。*/
+import IconButton from '@/components/IconButton';
+import CircleButton from '@/components/CircleButton';
+/* @end */
+
+const PlaceholderImage = require('@/assets/images/background-image.png');
+
+export default function Index() {
+  const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
+  const [showAppOptions, setShowAppOptions] = useState<boolean>(false);
+
+  const pickImageAsync = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setSelectedImage(result.assets[0].uri);
+      setShowAppOptions(true);
+    } else {
+      alert('You did not select any image.');
+    }
+  };
+
+  /* @tutinfo 次のセクションでロジックを追加するためのプレースホルダー関数を追加します。 */
+  const onReset = () => {
+    setShowAppOptions(false);
+  };
+
+  const onAddSticker = () => {
+    // we will implement this later
+  };
+
+  const onSaveImageAsync = async () => {
+    // we will implement this later
+  };
+  /* @end */
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        <ImageViewer imgSource={PlaceholderImage} selectedImage={selectedImage} />
+      </View>
+      {showAppOptions ? (
+        /* @tutinfo App オプションボタンを表示するため、空の <CODE>View</CODE> コンポーネントをこのスニペットに置き換えます。 */
+        <View style={styles.optionsContainer}>
+          <View style={styles.optionsRow}>
+            <IconButton icon="refresh" label="Reset" onPress={onReset} />
+            <CircleButton onPress={onAddSticker} />
+            <IconButton icon="save-alt" label="Save" onPress={onSaveImageAsync} />
+          </View>
+        </View>
+        /* @end */
+      ) : (
+        <View style={styles.footerContainer}>
+          <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
+          <Button label="Use this photo" onPress={() => setShowAppOptions(true)} />
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+  /* @tutinfo 新しい <CODE>View</CODE> コンポーネントのスタイルを追加します。 */
+  optionsContainer: {
+    position: 'absolute',
+    bottom: 80,
+  },
+  optionsRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  /* @end */
+});
+```
+
+Android、iOS、web でアプリを確認してみましょう。
+
+<ContentSpotlight
+  alt="画像を選択した後に表示されるボタンオプション。"
+  src="/static/images/tutorial/button-options.webp"
+  className="max-w-[720px]"
+/>
+
+</Step>
+
+<Step label="3">
+
+## 絵文字ピッカーのモーダルを作成する
+
+モーダルでは、利用可能な絵文字のリストからユーザーが絵文字を選択できます。**components** ディレクトリ内に **EmojiPicker.tsx** ファイルを作成します。このコンポーネントは 3 つのプロパティを受け取ります。
+
+- `isVisible`: モーダルの表示状態を決定するブール値です。
+- `onClose`: モーダルを閉じる関数です。
+- `children`: 後で絵文字のリストを表示するために使用します。
+
+{/* prettier-ignore */}
+```tsx components/EmojiPicker.tsx|collapseHeight=430
+import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
+import { PropsWithChildren } from 'react';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+
+type Props = PropsWithChildren<{
+  isVisible: boolean;
+  onClose: () => void;
+}>;
+
+export default function EmojiPicker({ isVisible, children, onClose }: Props) {
+  return (
+    <View>
+    <Modal animationType="slide" transparent={true} visible={isVisible}>
+      <View style={styles.modalContent}>
+        <View style={styles.titleContainer}>
+          <Text style={styles.title}>Choose a sticker</Text>
+          <Pressable onPress={onClose}>
+            <MaterialIcons name="close" color="#fff" size={22} />
+          </Pressable>
+        </View>
+        {children}
+      </View>
+    </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalContent: {
+    height: '25%',
+    width: '100%',
+    backgroundColor: '#25292e',
+    borderTopRightRadius: 18,
+    borderTopLeftRadius: 18,
+    position: 'absolute',
+    bottom: 0,
+  },
+  titleContainer: {
+    height: '16%',
+    backgroundColor: '#464C55',
+    borderTopRightRadius: 10,
+    borderTopLeftRadius: 10,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  title: {
+    color: '#fff',
+    fontSize: 16,
+  },
+});
+```
+
+上記のコードが何をしているのか確認しましょう。
+
+- `<Modal>` コンポーネントはタイトルと閉じるボタンを表示します。
+- `visible` プロパティは `isVisible` の値を受け取り、モーダルが開いているか閉じているかを制御します。
+- `transparent` プロパティはブール値で、モーダルがビュー全体を埋めるかどうかを決定します。
+- `animationType` プロパティは、モーダルが画面に表示されるときと消えるときの挙動を決定します。今回は、画面下からスライドして表示されます。
+- 最後に、`<EmojiPicker>` はユーザーが閉じる `<Pressable>` を押したときに `onClose` プロパティを実行します。
+
+それでは、**app/(tabs)/index.tsx** を変更しましょう。
+
+1. `<EmojiPicker>` コンポーネントをインポートします。
+2. `useState` フックで `isModalVisible` 状態変数を作成します。デフォルト値は `false` で、ユーザーがボタンを押すまでモーダルは非表示のままです。
+3. `onAddSticker()` 関数内のコメントを置き換えて、ユーザーがボタンを押したときに `isModalVisible` 変数を `true` に更新します。これで絵文字ピッカーが開きます。
+4. `isModalVisible` 状態変数を更新する `onModalClose()` 関数を作成します。
+5. `Index` コンポーネントの末尾に `<EmojiPicker>` コンポーネントを配置します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx
+import { View, StyleSheet } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import { useState } from 'react';
+
+import Button from '@/components/Button';
+import ImageViewer from '@/components/ImageViewer';
+import IconButton from '@/components/IconButton';
+import CircleButton from '@/components/CircleButton';
+/* @tutinfo <CODE>EmojiPicker</CODE> コンポーネントをインポートします。 */
+import EmojiPicker from '@/components/EmojiPicker';
+/* @end */
+
+const PlaceholderImage = require('@/assets/images/background-image.png');
+
+export default function Index() {
+  const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
+  const [showAppOptions, setShowAppOptions] = useState<boolean>(false);
+  /* @tutinfo state 変数を作成します。 */
+  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+  /* @end */
+
+  const pickImageAsync = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setSelectedImage(result.assets[0].uri);
+      setShowAppOptions(true);
+    } else {
+      alert('You did not select any image.');
+    }
+  };
+
+  const onReset = () => {
+    setShowAppOptions(false);
+  };
+
+  /* @tutinfo モーダルの表示を制御するため、関数を更新します。*/
+  const onAddSticker = () => {
+    setIsModalVisible(true);
+  };
+
+  const onModalClose = () => {
+    setIsModalVisible(false);
+  };
+  /* @end */
+
+  const onSaveImageAsync = async () => {
+    // we will implement this later
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        <ImageViewer imgSource={PlaceholderImage} selectedImage={selectedImage} />
+      </View>
+      {showAppOptions ? (
+        <View style={styles.optionsContainer}>
+          <View style={styles.optionsRow}>
+            <IconButton icon="refresh" label="Reset" onPress={onReset} />
+            <CircleButton onPress={onAddSticker} />
+            <IconButton icon="save-alt" label="Save" onPress={onSaveImageAsync} />
+          </View>
+        </View>
+      ) : (
+        <View style={styles.footerContainer}>
+          <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
+          <Button label="Use this photo" onPress={() => setShowAppOptions(true)} />
+        </View>
+      )}
+      /* @tutinfo <CODE>Index</CODE> コンポーネントの末尾に <CODE>EmojiPicker</CODE> コンポーネントをレンダリングします。 */
+      <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}>
+        {/* Emoji list component will go here */}
+      </EmojiPicker>
+      /* @end */
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+  optionsContainer: {
+    position: 'absolute',
+    bottom: 80,
+  },
+  optionsRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+});
+```
+
+このステップ完了後の結果は次のとおりです。
+
+<ContentSpotlight
+  alt="すべてのプラットフォームで動作するモーダル。"
+  src="/static/images/tutorial/modal-creation.webp"
+  className="max-w-[720px]"
+/>
+
+</Step>
+
+<Step label="4">
+
+## 絵文字のリストを表示する
+
+モーダルのコンテンツ内に絵文字の横リストを追加しましょう。これには React Native の [`<FlatList>`](https://reactnative.dev/docs/flatlist) コンポーネントを使用します。
+
+**components** ディレクトリ内に **EmojiList.tsx** ファイルを作成し、次のコードを追加します。
+
+{/* prettier-ignore */}
+```tsx components/EmojiList.tsx
+import { useState } from 'react';
+import { ImageSourcePropType, StyleSheet, FlatList, Platform, Pressable } from 'react-native';
+import { Image } from 'expo-image';
+
+type Props = {
+  onSelect: (image: ImageSourcePropType) => void;
+  onCloseModal: () => void;
+};
+
+export default function EmojiList({ onSelect, onCloseModal }: Props) {
+  const [emoji] = useState<ImageSourcePropType[]>([
+    require("../assets/images/emoji1.png"),
+    require("../assets/images/emoji2.png"),
+    require("../assets/images/emoji3.png"),
+    require("../assets/images/emoji4.png"),
+    require("../assets/images/emoji5.png"),
+    require("../assets/images/emoji6.png"),
+  ]);
+
+  return (
+    <FlatList
+      horizontal
+      showsHorizontalScrollIndicator={Platform.OS === 'web'}
+      data={emoji}
+      contentContainerStyle={styles.listContainer}
+      renderItem={({ item, index }) => (
+        <Pressable
+          onPress={() => {
+            onSelect(item);
+            onCloseModal();
+          }}>
+          <Image source={item} key={index} style={styles.image} />
+        </Pressable>
+      )}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  listContainer: {
+    borderTopRightRadius: 10,
+    borderTopLeftRadius: 10,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  image: {
+    width: 100,
+    height: 100,
+    marginRight: 20,
+  },
+});
+```
+
+上記のコードが何をしているのか確認しましょう。
+
+- 上記の `<FlatList>` コンポーネントは、`<Pressable>` でラップした `Image` コンポーネントを使ってすべての絵文字画像をレンダリングします。後ほど、画面上の絵文字をタップすると画像にステッカーとして表示されるよう改良します。
+- また、`data` プロパティの値として `emoji` 配列変数のアイテムの配列を受け取ります。`renderItem` プロパティは `data` から各アイテムを受け取り、リスト内のアイテムとして返します。最後に、このアイテムを表示するために `Image` と `<Pressable>` コンポーネントを追加しました。
+- `horizontal` プロパティは、リストを縦ではなく横方向にレンダリングします。`showsHorizontalScrollIndicator` は React Native の `Platform` モジュールで値を判定し、web では横スクロールバーを表示します。
+
+次に、**app/(tabs)/index.tsx** を更新して `<EmojiList>` コンポーネントをインポートし、`<EmojiPicker>` コンポーネント内のコメントを次のコードスニペットに置き換えます。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx|collapseHeight=440
+import { ImageSourcePropType, View, StyleSheet } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import { useState } from 'react';
+
+import Button from '@/components/Button';
+import ImageViewer from '@/components/ImageViewer';
+import IconButton from '@/components/IconButton';
+import CircleButton from '@/components/CircleButton';
+import EmojiPicker from '@/components/EmojiPicker';
+/* @tutinfo <CODE>EmojiList</CODE> コンポーネントをインポートします。 */
+import EmojiList from '@/components/EmojiList';
+/* @end */
+
+const PlaceholderImage = require('@/assets/images/background-image.png');
+
+export default function Index() {
+  const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
+  const [showAppOptions, setShowAppOptions] = useState<boolean>(false);
+  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+  /* @tutinfo state 変数を定義します。 */
+  const [pickedEmoji, setPickedEmoji] = useState<ImageSourcePropType | undefined>(undefined);
+  /* @end */
+
+  const pickImageAsync = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setSelectedImage(result.assets[0].uri);
+      setShowAppOptions(true);
+    } else {
+      alert('You did not select any image.');
+    }
+  };
+
+  const onReset = () => {
+    setShowAppOptions(false);
+  };
+
+  const onAddSticker = () => {
+    setIsModalVisible(true);
+  };
+
+  const onModalClose = () => {
+    setIsModalVisible(false);
+  };
+
+  const onSaveImageAsync = async () => {
+    // we will implement this later
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        <ImageViewer imgSource={PlaceholderImage} selectedImage={selectedImage} />
+      </View>
+      {showAppOptions ? (
+        <View style={styles.optionsContainer}>
+          <View style={styles.optionsRow}>
+            <IconButton icon="refresh" label="Reset" onPress={onReset} />
+            <CircleButton onPress={onAddSticker} />
+            <IconButton icon="save-alt" label="Save" onPress={onSaveImageAsync} />
+          </View>
+        </View>
+      ) : (
+        <View style={styles.footerContainer}>
+          <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
+          <Button label="Use this photo" onPress={() => setShowAppOptions(true)} />
+        </View>
+      )}
+      <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}>
+        /* @tutinfo <CODE>EmojiPicker</CODE> コンポーネント内に <CODE>EmojiList</CODE> コンポーネントをレンダリングします。 */
+        <EmojiList onSelect={setPickedEmoji} onCloseModal={onModalClose} />
+        /* @end */
+      </EmojiPicker>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+  optionsContainer: {
+    position: 'absolute',
+    bottom: 80,
+  },
+  optionsRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+});
+```
+
+`EmojiList` コンポーネントでは、`onSelect` プロパティで絵文字を選択し、選択後に `onCloseModal` でモーダルを閉じます。
+
+Android、iOS、web でアプリを確認してみましょう。
+
+<ContentSpotlight
+  alt="すべてのプラットフォームで表示された絵文字リスト。"
+  src="/static/images/tutorial/emoji-picker.webp"
+  className="max-w-[720px]"
+/>
+
+</Step>
+
+<Step label="5">
+
+## 選択した絵文字を表示する
+
+次に、画像の上に絵文字ステッカーを配置します。**components** ディレクトリに新しいファイルを作成し、**EmojiSticker.tsx** という名前にします。そして次のコードを追加します。
+
+```tsx components/EmojiSticker.tsx|collapseHeight=300
+import { ImageSourcePropType, View } from 'react-native';
+import { Image } from 'expo-image';
+
+type Props = {
+  imageSize: number;
+  stickerSource: ImageSourcePropType;
+};
+
+export default function EmojiSticker({ imageSize, stickerSource }: Props) {
+  return (
+    <View style={{ top: -350 }}>
+      <Image source={stickerSource} style={{ width: imageSize, height: imageSize }} />
+    </View>
+  );
+}
+```
+
+このコンポーネントは 2 つのプロパティを受け取ります。
+
+- `imageSize`: `Index` コンポーネント内で定義された値です。次の章で、タップ時に画像サイズを変更するために使用します。
+- `stickerSource`: 選択された絵文字画像のソースです。
+
+このコンポーネントを **app/(tabs)/index.tsx** ファイルでインポートし、`Index` コンポーネントを更新して画像上に絵文字ステッカーを表示します。`pickedEmoji` 状態が `undefined` でないかをチェックします。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx
+import { ImageSourcePropType, View, StyleSheet } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import { useState } from 'react';
+
+import Button from '@/components/Button';
+import ImageViewer from '@/components/ImageViewer';
+import IconButton from '@/components/IconButton';
+import CircleButton from '@/components/CircleButton';
+import EmojiPicker from '@/components/EmojiPicker';
+import EmojiList from '@/components/EmojiList';
+/* @tutinfo <CODE>EmojiSticker</CODE> コンポーネントをインポートします。 */import EmojiSticker from '@/components/EmojiSticker';/* @end */
+
+const PlaceholderImage = require('@/assets/images/background-image.png');
+
+export default function Index() {
+  const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
+  const [showAppOptions, setShowAppOptions] = useState<boolean>(false);
+  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+  const [pickedEmoji, setPickedEmoji] = useState<ImageSourcePropType | undefined>(undefined);
+
+
+  const pickImageAsync = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setSelectedImage(result.assets[0].uri);
+      setShowAppOptions(true);
+    } else {
+      alert('You did not select any image.');
+    }
+  };
+
+  const onReset = () => {
+    setShowAppOptions(false);
+  };
+
+  const onAddSticker = () => {
+    setIsModalVisible(true);
+  };
+
+  const onModalClose = () => {
+    setIsModalVisible(false);
+  };
+
+  const onSaveImageAsync = async () => {
+    // we will implement this later
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        <ImageViewer imgSource={PlaceholderImage} selectedImage={selectedImage} />
+        /* @tutinfo 画像に絵文字ステッカーを表示するため、この行を追加します。 */
+        {pickedEmoji && <EmojiSticker imageSize={40} stickerSource={pickedEmoji} />}
+        /* @end */
+      </View>
+      {showAppOptions ? (
+        <View style={styles.optionsContainer}>
+          <View style={styles.optionsRow}>
+            <IconButton icon="refresh" label="Reset" onPress={onReset} />
+            <CircleButton onPress={onAddSticker} />
+            <IconButton icon="save-alt" label="Save" onPress={onSaveImageAsync} />
+          </View>
+        </View>
+      ) : (
+        <View style={styles.footerContainer}>
+          <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
+          <Button label="Use this photo" onPress={() => setShowAppOptions(true)} />
+        </View>
+      )}
+      <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}>
+        <EmojiList onSelect={setPickedEmoji} onCloseModal={onModalClose} />
+      </EmojiPicker>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+  optionsContainer: {
+    position: 'absolute',
+    bottom: 80,
+  },
+  optionsRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+});
+```
+
+Android、iOS、web でアプリを確認してみましょう。
+
+<ContentSpotlight file="tutorial/select-emoji.mp4" />
+
+</Step>
+
+## まとめ
+
+<ProgressTracker
+  currentChapterIndex={4}
+  name="GET_STARTED"
+  chapterTitle="第 5 章：モーダルを作成する"
+  summary="絵文字ピッカーのモーダルを作成し、絵文字を選択して画像の上に表示するロジックの実装が完了しました。"
+  nextChapterDescription="次の章では、絵文字をドラッグしたり、タップでサイズを拡大縮小したりする、ジェスチャーを使ったユーザー操作を追加します。"
+  nextChapterTitle="ジェスチャーを追加する"
+  nextChapterLink="/ja/tutorial/gestures"
+/>
diff --git a/docs/pages/ja/tutorial/create-your-first-app.mdx b/docs/pages/ja/tutorial/create-your-first-app.mdx
new file mode 100644
index 00000000000000..801373d53fe563
--- /dev/null
+++ b/docs/pages/ja/tutorial/create-your-first-app.mdx
@@ -0,0 +1,214 @@
+---
+title: 最初のアプリを作成する
+description: この章では、新しい Expo プロジェクトを作成する方法を学びます。
+hasVideoLink: true
+---
+
+import { Download03Icon } from '@expo/styleguide-icons/outline/Download03Icon';
+
+import { BoxLink } from '~/ui/components/BoxLink';
+import { Collapsible } from '~/ui/components/Collapsible';
+import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
+import { Prerequisites, Requirement } from '~/ui/components/Prerequisites';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
+import { Terminal } from '~/ui/components/Snippet';
+import { Step } from '~/ui/components/Step';
+import { CODE } from '~/ui/components/Text';
+import { VideoBoxLink } from '~/ui/components/VideoBoxLink';
+
+この章では、新しい Expo プロジェクトを作成し、実行する方法を学びましょう。
+
+<VideoBoxLink
+  videoId="m1-bc53EGh8"
+  title="視聴：はじめてのユニバーサル Expo アプリを作成する"
+  description="新しい Expo プロジェクトをゼロから作成し、Android、iOS、web で動作させます。"
+/>
+
+---
+
+<Prerequisites>
+  <Requirement title="実機での Expo Go">
+    Android または iOS の実機に [Expo Go](https://expo.dev/go) をインストールします。
+  </Requirement>
+  <Requirement title="Node.js (LTS)">
+    お使いのマシンに [Node.js (LTS バージョン)](https://nodejs.org/en) をインストールします。
+  </Requirement>
+  <Requirement title="コードエディタ">
+    [VS Code](https://code.visualstudio.com/) または好みのコードエディタや IDE
+    をインストールします。
+  </Requirement>
+  <Requirement title="ターミナルが使える開発マシン">
+    macOS、Linux、または Windows (PowerShell および WSL2) でターミナルウィンドウを開けるマシン。
+  </Requirement>
+</Prerequisites>
+
+このチュートリアルは、TypeScript と React に慣れていることを前提としています。慣れていない場合は、[TypeScript ハンドブック](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html) と [React 公式チュートリアル](https://react.dev/learn) を確認してみてください。
+
+<Step label="1">
+
+## 新しい Expo アプリを初期化する
+
+新しい Expo アプリを初期化するために [`create-expo-app`](/more/create-expo/) を使います。これは新しい React Native プロジェクトを作成するためのコマンドラインツールです。それでは、ターミナルで次のコマンドを実行してみましょう。
+
+<Terminal
+  cmd={[
+    '# Create a project named StickerSmash',
+    '$ npx create-expo-app@latest StickerSmash',
+    '',
+    '# Navigate to the project directory',
+    '$ cd StickerSmash',
+  ]}
+  cmdCopy="npx create-expo-app@latest StickerSmash && cd StickerSmash"
+/>
+
+このコマンドは [デフォルト](/more/create-expo/#--template) テンプレートを使用して、StickerSmash という名前の新しいプロジェクトディレクトリを作成します。このテンプレートには、Expo Router を含む、アプリ構築に必要な基本的なボイラープレートコードとライブラリが含まれています。チュートリアルの中で必要に応じてライブラリを追加していきます。
+
+> **info** 現在、`create-expo-app@latest` は SDK 54 のプロジェクトを作成します。このチュートリアルは SDK 54 向けに設計されているため、`--template` フラグは不要です。
+
+<Collapsible summary="デフォルトテンプレートを使用するメリット">
+
+- `expo` パッケージがインストールされた新しい React Native プロジェクトを作成します
+- Expo CLI などの推奨ツールが含まれます
+- 基本的なナビゲーションシステムを提供するために Expo Router のタブナビゲーターが含まれます
+- Android、iOS、web の複数のプラットフォームでプロジェクトを実行できるよう自動的に設定されます
+- TypeScript がデフォルトで設定されます
+
+</Collapsible>
+
+</Step>
+
+<Step label="2">
+
+## アセットをダウンロードする
+
+<BoxLink
+  title="アセットアーカイブをダウンロード"
+  Icon={Download03Icon}
+  description="これらのアセットはチュートリアル全体を通して使用します。"
+  href="/static/images/tutorial/sticker-smash-assets.zip"
+/>
+
+アーカイブをダウンロードしたら:
+
+1. アーカイブを展開し、**your-project-name/assets/images** ディレクトリ内のデフォルトアセットを置き換えます。
+2. コードエディタまたは IDE でプロジェクトディレクトリを開きます。
+
+</Step>
+
+<Step label="3">
+
+{/* vale off */}
+
+## reset-project スクリプトを実行する
+
+{/* vale on */}
+
+このチュートリアルでは、アプリをゼロから構築し、ファイルベースのナビゲーションを追加する基本を理解します。ボイラープレートコードを取り除くために、`reset-project` スクリプトを実行しましょう。
+
+<Terminal cmd={['$ npm run reset-project']} />
+
+上記のコマンドを実行すると、**app** ディレクトリには 2 つのファイル (**index.tsx** と **\_layout.tsx**) が残ります。**app** ディレクトリと他のディレクトリ (**components**、**constants**、**hooks** &mdash; ボイラープレートコードを含む) からの以前のファイルは、スクリプトによって **app-example** ディレクトリに移動されます。進めながら独自のディレクトリやコンポーネントファイルを作成していきます。
+
+<Collapsible summary={<><CODE>reset-project</CODE> スクリプトは何をしますか？</>}>
+
+`reset-project` スクリプトは、プロジェクト内の **app** ディレクトリ構造をリセットし、プロジェクトのルートディレクトリにあった以前のボイラープレートファイルを、**app-example** という別のサブディレクトリにコピーします。これはメインアプリの構造の一部ではないため、削除して構いません。
+
+</Collapsible>
+
+</Step>
+
+<Step label="4">
+
+## モバイルと web でアプリを実行する
+
+プロジェクトディレクトリで、ターミナルから [開発サーバー](/more/glossary-of-terms/#development-server) を起動するために次のコマンドを実行します。
+
+<Terminal cmd={['$ npx expo start']} />
+
+上記のコマンドを実行すると:
+
+1. 開発サーバーが起動し、ターミナルウィンドウ内に QR コードが表示されます。
+2. その QR コードをスキャンしてデバイスでアプリを開きます。Android では Expo Go > **Scan QR code** オプションを使い、iOS ではデフォルトのカメラアプリを使います。
+3. web アプリを実行するには、ターミナルで <kbd>W</kbd> を押します。デフォルトの web ブラウザで web アプリが開きます。
+
+すべてのプラットフォームで動作すると、アプリは次のようになります。
+
+<ContentSpotlight
+  alt="すべてのプラットフォームで動作するアプリ"
+  src="/static/images/tutorial/01-app-running-on-all-platforms.webp"
+  className="max-w-[720px]"
+/>
+
+</Step>
+
+<Step label="5">
+
+{/* vale off */}
+
+## index 画面を編集する
+
+{/* vale on */}
+
+**app/index.tsx** ファイルは、アプリの画面に表示されるテキストを定義します。これはアプリのエントリーポイントであり、開発サーバーが起動したときに実行されます。背景とテキストを表示するために、React Native の `<View>` や `<Text>` などのコアコンポーネントを使用します。
+
+これらのコンポーネントに適用されるスタイルは、web で使われる CSS ではなく JavaScript オブジェクトを使います。ただし、これまでに web で CSS を使ったことがあれば、見覚えのあるプロパティが多いはずです。ほとんどの React Native コンポーネントは、JavaScript オブジェクトを値として受け取る `style` プロパティを受け付けます。詳細については [Styling in React Native](https://reactnative.dev/docs/style) を参照してください。
+
+**app/index.tsx** 画面を変更しましょう。
+
+1. `react-native` から `StyleSheet` をインポートし、カスタムスタイルを定義する `styles` オブジェクトを作成します。
+2. `<View>` に `styles.container.backgroundColor` プロパティを追加し、値を `#25292e` にします。これにより背景色が変わります。
+3. `<Text>` のデフォルト値を「Home screen」に置き換えます。
+4. `<Text>` に `styles.text.color` プロパティを追加し、テキストの色を変えるために値を `#fff` (白) にします。
+
+{/* prettier-ignore */}
+```tsx app/index.tsx|collapseHeight=340
+import { Text, View, /* @tutinfo スタイルを定義するため <CODE>StyleSheet</CODE> をインポートします。 */ StyleSheet/* @end */ } from 'react-native';
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      /* @tutinfo 以前は "Edit app/index.tsx to edit this screen" と表示されていましたが、現在は "Home screen" と表示されます。 */
+      <Text style={styles.text}>Home screen</Text>
+      /* @end */
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    /* @tutinfo <CODE>backgroundColor</CODE> プロパティに <CODE>'#25292e'</CODE> の値を設定します。*/
+    backgroundColor: '#25292e',
+    /* @end */
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '#fff',
+  },
+});
+```
+
+> React Native は web と同じ色フォーマットを使用します。16 進数トリプレット (これが `#fff` の形式)、`rgba`、`hsl`、および `red`、`green`、`blue`、`peru`、`papayawhip` などの名前付きカラーをサポートします。詳細については [Colors in React Native](https://reactnative.dev/docs/colors) を参照してください。
+
+変更を保存すると、開発サーバーに接続している実行中のアプリに変更が送信され、適用されます。
+
+<ContentSpotlight
+  alt="テキストと背景色が更新されたアプリ"
+  src="/static/images/tutorial/02-index-screen-changes.webp"
+  className="max-w-[720px]"
+/>
+
+</Step>
+
+## まとめ
+
+<ProgressTracker
+  currentChapterIndex={0}
+  name="GET_STARTED"
+  chapterTitle="第 1 章：最初のアプリを作成する"
+  summary="新しい Expo プロジェクトを作成し、React Native のコアコンポーネントを使用しました。これで StickerSmash アプリの開発を始める準備が整いました。"
+  nextChapterDescription="次の章では、アプリにスタックとタブナビゲーターを追加する方法を学びます。"
+  nextChapterTitle="ナビゲーションを追加する"
+  nextChapterLink="/ja/tutorial/add-navigation/"
+/>
diff --git a/docs/pages/ja/tutorial/follow-up.mdx b/docs/pages/ja/tutorial/follow-up.mdx
new file mode 100644
index 00000000000000..969b95caeb24f4
--- /dev/null
+++ b/docs/pages/ja/tutorial/follow-up.mdx
@@ -0,0 +1,60 @@
+---
+title: 学習リソース
+description: Expo と React Native について学ぶための、厳選されたリソースを紹介します。
+---
+
+import { A } from '~/ui/components/Text';
+
+サンプルアプリが完成したので、ここからはアプリの構築に使用した技術についてさらに詳しく学んでいきましょう。
+
+## プロジェクトをアプリとして構築する
+
+自分のマシンで新しいアプリの作成を始めるには、`npx create-expo-app@latest --template default@sdk-55` を使い、続けて [開発環境のセットアップ](/get-started/set-up-your-environment/) を行います。
+
+> **注：** SDK 55 への移行期間中は、`--template` フラグを付けずに `create-expo-app@latest` を実行すると SDK 54 のプロジェクトが作成されます。実機で Expo Go を使用する予定がある場合は、SDK 54 のプロジェクトを使用してください。そうでない場合は、`--template default@sdk-55` を指定して SDK 55 のプロジェクトを作成してください。
+
+### おすすめのリソース
+
+新しいプロジェクトを作成したら、アプリ開発を進めるうえで役立つさまざまなツールや概念について学んでいけます。
+
+- [開発ツール](/develop/tools/)：アプリ構築のさまざまな場面で役立つ Expo ツールのリファレンスです。
+- [開発ビルド](/develop/development-builds/introduction/)：開発ビルドを使用すると、アプリのビルドプロセスを完全にコントロールでき、デバイスやシミュレーターでアプリをテストできます。
+- [開発の概要](/workflow/overview/)：Expo でアプリを開発するうえでの重要な概念や、コア開発ループの流れを高レベルで解説しています。
+- [Expo Router](/router/introduction/)：チュートリアルでは Expo Router の基本を扱い、タブナビゲーターを実装しました。ライブラリの詳細についてはドキュメントを参照してみてください。
+- [アプリアイコン](/develop/user-interface/splash-screen-and-app-icon/#app-icon) と [スプラッシュスクリーン](/develop/user-interface/splash-screen-and-app-icon/#splash-screen)：アプリアイコンとスプラッシュスクリーンのカスタマイズについて、ガイドで詳しく学べます。また、**app.json** ファイルで設定できるプロパティについては、[アプリ設定リファレンス](/workflow/configuration) を参照してみてください。
+- アプリストアへの [アプリ配信](/deploy/build-project/) と [提出](/deploy/submit-to-app-stores/)：アプリのリリース準備が整った後、アプリストアへの公開や提出方法について学べるリソースです。
+- [デバッグ](/debugging/runtime-issues/)：問題が発生したときに、デバッグツールを使ってエラーを見つけて修正できます。
+
+## 学習
+
+### React
+
+チュートリアルでは、React のコンポーネントと API を使用しました。Expo でアプリを構築するうえで、React をしっかり理解しておくことは欠かせません。React 公式ドキュメントの [クイックスタート](https://react.dev/learn) と [Hooks](https://react.dev/reference/react/hooks) のセクションを読んでみることをおすすめします。
+
+### React Native
+
+チュートリアルアプリの開発では、React Native を幅広く使用しました。詳しく学ぶには、[React Native 基礎ガイド](https://reactnative.dev/docs/getting-started) から始められます。また、次のドキュメントも参考にしてみてください。
+
+- [View API リファレンス](https://reactnative.dev/docs/view)
+- [Text API リファレンス](https://reactnative.dev/docs/text)
+- [プラットフォーム固有のコード](https://reactnative.dev/docs/platform-specific-code)
+- [リストでデータを表示する](https://reactnative.dev/docs/using-a-listview)
+
+コンポーネントのレイアウトには Flexbox を使用しました。Flexbox についてさらに学ぶには、次のリソースを確認してみてください。
+
+- [Height と Width](https://reactnative.dev/docs/height-and-width)
+- [Flexbox によるレイアウト](https://reactnative.dev/docs/flexbox)
+
+### ジェスチャーとアニメーション
+
+さまざまな種類のジェスチャーやアニメーションの実装について学ぶには、次のドキュメントをおすすめします。
+
+- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/)
+- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started)
+
+## コミュニティに参加する
+
+<A href="https://chat.expo.dev/" shouldLeakReferrer>
+  Discord
+</A>
+のコミュニティに参加して、他の Expo ユーザーとチャットしたり質問を投げかけたりしてみましょう。
diff --git a/docs/pages/ja/tutorial/gestures.mdx b/docs/pages/ja/tutorial/gestures.mdx
new file mode 100644
index 00000000000000..1d21a28f71cfa2
--- /dev/null
+++ b/docs/pages/ja/tutorial/gestures.mdx
@@ -0,0 +1,354 @@
+---
+title: ジェスチャーを追加する
+description: このチュートリアルでは、React Native Gesture Handler と Reanimated ライブラリを使ってジェスチャーを実装する方法を学びます。
+hasVideoLink: true
+---
+
+import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
+import { Step } from '~/ui/components/Step';
+import { VideoBoxLink } from '~/ui/components/VideoBoxLink';
+
+ジェスチャーは、アプリに直感的なユーザー体験をもたらす優れた手段です。[React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) ライブラリは、ジェスチャーを処理できるネイティブコンポーネントを組み込みで提供します。プラットフォームのネイティブなタッチ処理システムを使って、パン、タップ、回転などのジェスチャーを認識します。この章では、このライブラリを使って 2 種類のジェスチャーを追加します。
+
+- ダブルタップで絵文字ステッカーのサイズを拡大し、もう一度ダブルタップすると元のサイズに戻します。
+- パンで絵文字ステッカーを画面上で移動させ、画像のどこにでもステッカーを配置できるようにします。
+
+また、ジェスチャーの状態間をアニメーションさせるために [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/handling-gestures/) ライブラリも使用します。
+
+<VideoBoxLink
+  videoId="0q48LLvTGDU"
+  title="視聴：ユニバーサル Expo アプリにジェスチャーを追加する"
+  description="React Native Gesture Handler と Reanimated を使って、絵文字ステッカーにダブルタップとパンのジェスチャーを追加します。"
+/>
+
+---
+
+<Step label="1">
+
+## GestureHandlerRootView を追加する
+
+アプリ内でジェスチャー操作を機能させるために、`Index` コンポーネントの最上位に `react-native-gesture-handler` の `<GestureHandlerRootView>` をレンダリングします。**app/(tabs)/index.tsx** のルートレベルの `<View>` コンポーネントを `<GestureHandlerRootView>` に置き換えます。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx
+// ... rest of the import statements remain same
+/* @tutinfo <CODE>react-native-gesture-handler-library</CODE> から <CODE>GestureHandlerRootView</CODE> をインポートします。 */import { GestureHandlerRootView } from 'react-native-gesture-handler';/* @end */
+
+export default function Index() {
+  return (
+    /* @tutinfo ルートレベルの <CODE>View</CODE> コンポーネントを <CODE>GestureHandlerRootView</CODE> に置き換えます。 */
+    <GestureHandlerRootView style={styles.container}>
+    /* @end */
+      {/* ...rest of the code remains */}
+    /* @tutinfo */
+    </GestureHandlerRootView>
+    /* @end */
+  )
+}
+```
+
+</Step>
+
+<Step label="2">
+
+## アニメーション対応コンポーネントを使用する
+
+`Animated` コンポーネントは、コンポーネントの `style` プロパティを参照してアニメーションさせる値を判断し、更新を適用してアニメーションを作成します。Reanimated は `<Animated.View>`、`<Animated.Text>`、`<Animated.ScrollView>` などのアニメーション対応コンポーネントをエクスポートしています。ここでは、ダブルタップジェスチャーを動作させるために `<Animated.Image>` コンポーネントにアニメーションを適用します。
+
+1. **components** ディレクトリ内の **EmojiSticker.tsx** ファイルを開きます。アニメーション対応コンポーネントを使うために、`react-native-reanimated` ライブラリから `Animated` をインポートします。
+2. `Image` コンポーネントを `<Animated.Image>` に置き換えます。
+
+{/* prettier-ignore */}
+```tsx components/EmojiSticker.tsx
+import { ImageSourcePropType, View } from 'react-native';
+/* @tutinfo <CODE>react-native-reanimated</CODE> から <CODE>Animated</CODE> をインポートします。 */import Animated from 'react-native-reanimated';/* @end */
+
+type Props = {
+  imageSize: number;
+  stickerSource: ImageSourcePropType;
+};
+
+export default function EmojiSticker({ imageSize, stickerSource }: Props) {
+  return (
+    <View style={{ top: -350 }}>
+      /* @tutinfo <CODE>Image</CODE> コンポーネントを <CODE>Animated.Image</CODE> に置き換えます。 */
+      <Animated.Image
+        source={stickerSource}
+        resizeMode="contain"
+        style={{ width: imageSize, height: imageSize }}
+      />
+      /* @end */
+    </View>
+  );
+}
+```
+
+> アニメーション対応コンポーネント API の完全なリファレンスについては、[React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/core/createAnimatedComponent) のドキュメントを参照してください。
+
+</Step>
+
+<Step label="3">
+
+## タップジェスチャーを追加する
+
+React Native Gesture Handler を使うと、ダブルタップイベントなどのタッチ入力を検出したときの動作を追加できます。
+
+**EmojiSticker.tsx** ファイル内で:
+
+1. `react-native-gesture-handler` から `Gesture` と `GestureDetector` をインポートします。
+2. ステッカーのタップを認識するために、`react-native-reanimated` から `useAnimatedStyle`、`useSharedValue`、`withSpring` をインポートし、`<Animated.Image>` のスタイルをアニメーションさせます。
+3. `EmojiSticker` コンポーネント内で、`useSharedValue()` フックを使って `scaleImage` という参照を作成します。初期値には `imageSize` の値を使用します。
+
+```tsx components/EmojiSticker.tsx
+// ...rest of the import statements remain same
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+
+export default function EmojiSticker({ imageSize, stickerSource }: Props) {
+  const scaleImage = useSharedValue(imageSize);
+
+  return (
+    // ...rest of the code remains same
+  )
+}
+```
+
+`useSharedValue()` フックを使って共有値を作成すると、多くの利点があります。データを変更したり、現在の値に基づいてアニメーションを実行したりするのに役立ちます。共有値には `.value` プロパティでアクセスして変更できます。初期値をスケーリングする `doubleTap` オブジェクトを作成し、`Gesture.Tap()` を使ってステッカー画像をスケーリングしながらアニメーションを実行します。必要なタップ回数を指定するために `numberOfTaps()` を追加します。
+
+`EmojiSticker` コンポーネント内に次のオブジェクトを作成します。
+
+```tsx components/EmojiSticker.tsx
+const doubleTap = Gesture.Tap()
+  .numberOfTaps(2)
+  .onStart(() => {
+    if (scaleImage.value !== imageSize * 2) {
+      scaleImage.value = scaleImage.value * 2;
+    } else {
+      scaleImage.value = Math.round(scaleImage.value / 2);
+    }
+  });
+```
+
+アニメーションさせるために、スプリングベースのアニメーションを使用します。実世界のスプリングの物理に基づいているため、生き生きとした感覚になります。`react-native-reanimated` が提供する `withSpring()` 関数を使用します。
+
+ステッカー画像では、`useAnimatedStyle()` フックを使ってスタイルオブジェクトを作成します。これにより、アニメーション時に共有値を使ってスタイルを更新できます。さらに、`width` と `height` プロパティを操作して画像のサイズをスケーリングします。これらのプロパティの初期値は `imageSize` に設定されています。
+
+`imageStyle` 変数を作成し、`EmojiSticker` コンポーネントに追加します。
+
+```tsx components/EmojiSticker.tsx
+const imageStyle = useAnimatedStyle(() => {
+  return {
+    width: withSpring(scaleImage.value),
+    height: withSpring(scaleImage.value),
+  };
+});
+```
+
+次に、`<Animated.Image>` コンポーネントを `<GestureDetector>` でラップし、`<Animated.Image>` の `style` プロパティを変更して `imageStyle` を渡します。
+
+{/* prettier-ignore */}
+```tsx components/EmojiSticker.tsx
+import { ImageSourcePropType, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+
+type Props = {
+  imageSize: number;
+  stickerSource: ImageSourcePropType;
+};
+
+export default function EmojiSticker({ imageSize, stickerSource }: Props) {
+  const scaleImage = useSharedValue(imageSize);
+
+  const doubleTap = Gesture.Tap()
+    .numberOfTaps(2)
+    .onStart(() => {
+      if (scaleImage.value !== imageSize * 2) {
+        scaleImage.value = scaleImage.value * 2;
+      } else {
+        scaleImage.value = Math.round(scaleImage.value / 2);
+      }
+    });
+
+  const imageStyle = useAnimatedStyle(() => {
+    return {
+      width: withSpring(scaleImage.value),
+      height: withSpring(scaleImage.value),
+    };
+  });
+
+  return (
+    <View style={{ top: -350 }}>
+      /* @tutinfo <CODE>Animated.Image</CODE> コンポーネントを <CODE>GestureDetector</CODE> でラップします。*/ <GestureDetector gesture={doubleTap}>/* @end */
+        <Animated.Image
+          source={stickerSource}
+          resizeMode="contain"
+          style={/* @tutinfo <CODE>imageStyle</CODE> を渡すため、<CODE>Animated.Image</CODE> の <CODE>style</CODE> プロパティを変更します。 */[imageStyle, { width: imageSize, height: imageSize }]/* @end */}
+        />
+      /* @tutinfo */
+      </GestureDetector>
+      /* @end */
+    </View>
+  );
+}
+```
+
+上記のスニペットでは、`gesture` プロパティが `doubleTap` の値を受け取り、ユーザーがステッカー画像をダブルタップしたときにジェスチャーを発動します。
+
+Android、iOS、web でアプリを確認してみましょう。
+
+<ContentSpotlight file="tutorial/tap-gesture.mp4" />
+
+> タップジェスチャー API の完全なリファレンスについては、[React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/2.x/gestures/tap-gesture) のドキュメントを参照してください。
+
+</Step>
+
+<Step label="4">
+
+## パンジェスチャーを追加する
+
+ステッカー上のドラッグジェスチャーを認識し、その動きを追跡するために、パンジェスチャーを使用します。**components/EmojiSticker.tsx** で:
+
+1. 新しい共有値 `translateX` と `translateY` を 2 つ作成します。
+2. `<View>` を `<Animated.View>` コンポーネントに置き換えます。
+
+{/* prettier-ignore */}
+```tsx components/EmojiSticker.tsx
+export default function EmojiSticker({ imageSize, stickerSource }: Props) {
+  const scaleImage = useSharedValue(imageSize);
+  /* @tutinfo <CODE>translateX</CODE> と <CODE>translateY</CODE> の shared values を追加します。*/
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  /* @end */
+  // ...rest of the code remains same
+
+  return (
+    /* @tutinfo <CODE>View</CODE> コンポーネントを <CODE>Animated.View</CODE> に置き換えます。 */<Animated.View style={{ top: -350 }}>/* @end */
+      <GestureDetector gesture={doubleTap}>
+        {/* ...rest of the code remains same */}
+      </GestureDetector>
+    /* @tutinfo */</Animated.View>/* @end */
+  );
+}
+```
+
+上記のコードが何をしているのか確認しましょう。
+
+- 定義した移動量の値で、ステッカーを画面上で移動させます。ステッカーは両軸方向に動くため、X 値と Y 値を追跡する必要があります。
+- `useSharedValue()` フックでは、移動量の変数の初期位置を両方とも `0` に設定しています。これはステッカーの初期位置であり、起点となります。この値は、ジェスチャー開始時のステッカーの初期位置を設定します。
+
+前のステップでは、`Gesture.Tap()` メソッドにチェーンしたタップジェスチャーの `onStart()` コールバックを発動させました。パンジェスチャーでは、ジェスチャーがアクティブで動いている間に実行される `onChange()` コールバックを指定します。
+
+1. パンジェスチャーを処理する `drag` オブジェクトを作成します。`onChange()` コールバックは `event` を引数として受け取ります。`changeX` と `changeY` プロパティは前回のイベントからの位置変化量を保持し、`translateX` と `translateY` に格納された値を更新します。
+2. `useAnimatedStyle()` フックを使って `containerStyle` オブジェクトを定義します。これは変換の配列を返します。`<Animated.View>` コンポーネントでは、`transform` プロパティを `translateX` と `translateY` の値に設定する必要があります。これにより、ジェスチャーがアクティブな間にステッカーの位置が変わります。
+
+```tsx components/EmojiSticker.tsx
+const drag = Gesture.Pan().onChange(event => {
+  translateX.value += event.changeX;
+  translateY.value += event.changeY;
+});
+
+const containerStyle = useAnimatedStyle(() => {
+  return {
+    transform: [
+      {
+        translateX: translateX.value,
+      },
+      {
+        translateY: translateY.value,
+      },
+    ],
+  };
+});
+```
+
+次に、JSX コード内で:
+
+1. `<EmojiSticker>` コンポーネントを更新して、`<GestureDetector>` コンポーネントを最上位のコンポーネントにします。
+2. `<Animated.View>` コンポーネントに `containerStyle` を追加して、変換スタイルを適用します。
+
+{/* prettier-ignore */}
+```tsx components/EmojiSticker.tsx
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { ImageSourcePropType } from 'react-native';
+
+type Props = {
+  imageSize: number;
+  stickerSource: ImageSourcePropType;
+};
+
+export default function EmojiSticker({ imageSize, stickerSource }: Props) {
+  const scaleImage = useSharedValue(imageSize);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  const doubleTap = Gesture.Tap()
+    .numberOfTaps(2)
+    .onStart(() => {
+      if (scaleImage.value !== imageSize * 2) {
+        scaleImage.value = scaleImage.value * 2;
+      } else {
+        scaleImage.value = Math.round(scaleImage.value / 2);
+      }
+    });
+
+  const imageStyle = useAnimatedStyle(() => {
+    return {
+      width: withSpring(scaleImage.value),
+      height: withSpring(scaleImage.value),
+    };
+  });
+
+  const drag = Gesture.Pan().onChange(event => {
+    translateX.value += event.changeX;
+    translateY.value += event.changeY;
+  });
+
+  const containerStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: translateX.value,
+        },
+        {
+          translateY: translateY.value,
+        },
+      ],
+    };
+  });
+
+  return (
+    /* @tutinfo すべてのコンポーネントを <CODE>GestureDetector</CODE> でラップします。 */<GestureDetector gesture={drag}>/* @end */
+      <Animated.View style={/* @tutinfo <CODE>Animated.View</CODE> の style プロパティに <CODE>containerStyle</CODE> を追加します。 */[containerStyle, { top: -350 }]/* @end */}>
+        <GestureDetector gesture={doubleTap}>
+          <Animated.Image
+            source={stickerSource}
+            resizeMode="contain"
+            style={[imageStyle, { width: imageSize, height: imageSize }]}
+          />
+        </GestureDetector>
+      </Animated.View>
+    /* @tutinfo */</GestureDetector>/* @end */
+  );
+}
+```
+
+Android、iOS、web でアプリを確認してみましょう。
+
+<ContentSpotlight file="tutorial/pan-gesture.mp4" />
+
+</Step>
+
+## まとめ
+
+<ProgressTracker
+  currentChapterIndex={5}
+  name="GET_STARTED"
+  chapterTitle="第 6 章：ジェスチャーを追加する"
+  summary="パンとタップのジェスチャーの実装が完了しました。"
+  nextChapterDescription="次の章では、画像とステッカーのスクリーンショットを撮影し、デバイスのライブラリに保存する方法を学びます。"
+  nextChapterTitle="スクリーンショットを撮影する"
+  nextChapterLink="/ja/tutorial/screenshot"
+/>
diff --git a/docs/pages/ja/tutorial/image-picker.mdx b/docs/pages/ja/tutorial/image-picker.mdx
new file mode 100644
index 00000000000000..5d56bbe688a14b
--- /dev/null
+++ b/docs/pages/ja/tutorial/image-picker.mdx
@@ -0,0 +1,427 @@
+---
+title: 画像ピッカーを使用する
+description: このチュートリアルでは、Expo Image Picker の使い方を学びます。
+hasVideoLink: true
+---
+
+import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
+import { Terminal } from '~/ui/components/Snippet';
+import { Step } from '~/ui/components/Step';
+import { Tabs, Tab } from '~/ui/components/Tabs';
+import { VideoBoxLink } from '~/ui/components/VideoBoxLink';
+
+React Native は、`<View>`、`<Text>`、`<Pressable>` などの組み込みコンポーネントを標準的な構成要素として提供しています。ここで作成するのは、デバイスのメディアギャラリーから画像を選択する機能です。これはコアコンポーネントだけでは実現できないため、この機能をアプリに追加するためにライブラリが必要になります。
+
+Expo SDK のライブラリである [`expo-image-picker`](/versions/latest/sdk/imagepicker) を使用します。
+
+> `expo-image-picker` は、端末のライブラリから画像や動画を選択するためのシステム UI へのアクセスを提供します。
+
+<VideoBoxLink
+  videoId="iEQZU58naS8"
+  title="視聴：ユニバーサル Expo アプリで画像ピッカーを使用する"
+  description="expo-image-picker を使ってデバイスのメディアライブラリから画像を選択する方法を学びます。"
+/>
+
+---
+
+<Step label="1">
+
+## expo-image-picker をインストールする
+
+`expo-image-picker` ライブラリをインストールするには、ターミナルで <kbd>Ctrl</kbd> + <kbd>C</kbd> を押して開発サーバーを停止してから、次のコマンドを実行します。
+
+<Terminal cmd={['$ npx expo install expo-image-picker']} />
+
+[`npx expo install`](/more/expo-cli/#installation) コマンドは、ライブラリをインストールし、**package.json** のプロジェクトの依存関係に追加します。
+
+> **info** **ヒント：** プロジェクトに新しいライブラリをインストールするときは、ターミナルで <kbd>Ctrl</kbd> + <kbd>C</kbd> を押して開発サーバーを停止してから、インストールコマンドを実行します。インストールが完了したら、`npx expo start` を実行して開発サーバーを再起動します。
+
+</Step>
+
+<Step label="2">
+
+## デバイスのメディアライブラリから画像を選択する
+
+`expo-image-picker` は、デバイスのメディアライブラリから画像や動画を選択するためのシステム UI を表示する `launchImageLibraryAsync()` メソッドを提供します。前の章で作成した primary テーマのボタンを使ってデバイスのメディアライブラリから画像を選択し、この機能を実装するためにデバイスの画像ライブラリを起動する関数を作成します。
+
+**app/(tabs)/index.tsx** で `expo-image-picker` ライブラリをインポートし、`Index` コンポーネント内に `pickImageAsync()` 関数を作成します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx|collapseHeight=440
+// ...rest of the import statements remain unchanged
+/* @tutinfo <CODE>ImagePicker</CODE> をインポートします。 */ import * as ImagePicker from 'expo-image-picker';/* @end */
+
+export default function Index() {
+  /* @tutinfo <CODE>launchImageLibraryAsync()</CODE> に画像ピッカーのオプションを渡します */
+  const pickImageAsync = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      /* @tutinfo 画像が選択された場合、その情報をターミナルウィンドウに出力します。 */
+      console.log(result);
+      /* @end */
+    } else {
+      /* @tutinfo ユーザーが画像を選択しなかった場合、アラートを表示します。 */
+      alert('You did not select any image.');
+      /* @end */
+    }
+  };
+  /* @end */
+
+  // ...rest of the code remains same
+}
+```
+
+上記のコードが何をしているのか確認しましょう。
+
+- `launchImageLibraryAsync()` は、さまざまなオプションを指定するためのオブジェクトを受け取ります。このオブジェクトは [`ImagePickerOptions`](/versions/latest/sdk/imagepicker/#imagepickeroptions) オブジェクトで、メソッドを呼び出すときに渡します。
+- `allowsEditing` を `true` に設定すると、Android と iOS では選択時に画像をトリミングできます。
+
+</Step>
+
+<Step label="3">
+
+## ボタンコンポーネントを更新する
+
+primary ボタンを押したときに、`Button` コンポーネントから `pickImageAsync()` 関数を呼び出します。**components/Button.tsx** で `Button` コンポーネントの `onPress` プロパティを更新します。
+
+{/* prettier-ignore */}
+```tsx components/Button.tsx
+import { StyleSheet, View, Pressable, Text } from 'react-native';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+
+type Props = {
+  label: string;
+  theme?: 'primary';
+  /* @tutinfo <CODE>onPress</CODE> プロパティの型を定義します。 */
+  onPress?: () => void;
+  /* @end */
+};
+
+export default function Button({ label, theme, /* @tutinfo 親コンポーネントからハンドラーメソッドをトリガーするため、このプロパティを渡します。 */onPress/* @end */ }: Props) {
+  if (theme === 'primary') {
+    return (
+      <View
+        style={[
+          styles.buttonContainer,
+          { borderWidth: 4, borderColor: '#ffd33d', borderRadius: 18 },
+        ]}>
+        <Pressable style={[styles.button, { backgroundColor: '#fff' }]} onPress={/* @tutinfo */onPress/* @end */}>
+          <FontAwesome name="picture-o" size={18} color="#25292e" style={styles.buttonIcon} />
+          <Text style={[styles.buttonLabel, { color: '#25292e' }]}>{label}</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.buttonContainer}>
+      <Pressable style={styles.button} onPress={() => alert('You pressed a button.')}>
+        <Text style={styles.buttonLabel}>{label}</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    width: 320,
+    height: 68,
+    marginHorizontal: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 3,
+  },
+  button: {
+    borderRadius: 10,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  buttonIcon: {
+    paddingRight: 8,
+  },
+  buttonLabel: {
+    color: '#fff',
+    fontSize: 16,
+  },
+});
+```
+
+**app/(tabs)/index.tsx** で、1 つ目の `<Button>` の `onPress` プロパティに `pickImageAsync()` 関数を追加します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx
+import { View, StyleSheet } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+
+import Button from '@/components/Button';
+import ImageViewer from '@/components/ImageViewer';
+
+const PlaceholderImage = require('@/assets/images/background-image.png');
+
+export default function Index() {
+  const pickImageAsync = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      console.log(result);
+    } else {
+      alert('You did not select any image.');
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        <ImageViewer imgSource={PlaceholderImage} />
+      </View>
+      <View style={styles.footerContainer}>
+        <Button theme="primary" label="Choose a photo" onPress={/* @tutinfo これを追加します。 */pickImageAsync/* @end */} />
+        <Button label="Use this photo" />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+});
+```
+
+`pickImageAsync()` 関数は `ImagePicker.launchImageLibraryAsync()` を呼び出し、その結果を処理します。`launchImageLibraryAsync()` メソッドは、選択された画像に関する情報を含むオブジェクトを返します。
+
+`result` オブジェクトとそのプロパティの例を次に示します。
+
+<Tabs>
+
+<Tab label="Android">
+
+```json collapseHeight=280
+{
+  "assets": [
+    {
+      "assetId": null,
+      "base64": null,
+      "duration": null,
+      "exif": null,
+      "fileName": "ea574eaa-f332-44a7-85b7-99704c22b402.jpeg",
+      "fileSize": 4513577,
+      "height": 4570,
+      "mimeType": "image/jpeg",
+      "rotation": null,
+      "type": "image",
+      "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FStickerSmash-13f21121-fc9d-4ec6-bf89-bf7d6165eb69/ImagePicker/ea574eaa-f332-44a7-85b7-99704c22b402.jpeg",
+      "width": 2854
+    }
+  ],
+  "canceled": false
+}
+```
+
+</Tab>
+
+<Tab label="iOS">
+
+```json collapseHeight=280
+{
+  "assets": [
+    {
+      "assetId": "99D53A1F-FEEF-40E1-8BB3-7DD55A43C8B7/L0/001",
+      "base64": null,
+      "duration": null,
+      "exif": null,
+      "fileName": "IMG_0004.JPG",
+      "fileSize": 2548364,
+      "height": 1669,
+      "mimeType": "image/jpeg",
+      "type": "image",
+      "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FStickerSmash-13f21121-fc9d-4ec6-bf89-bf7d6165eb69/ImagePicker/ea574eaa-f332-44a7-85b7-99704c22b402.jpeg",
+      "width": 1668
+    }
+  ],
+  "canceled": false
+}
+```
+
+</Tab>
+
+<Tab label="web">
+
+```json
+{
+  "assets": [
+    {
+      "fileName": "some-image.png",
+      "height": 720,
+      "mimeType": "image/png",
+      "uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAA"
+    }
+  ],
+  "canceled": false
+}
+```
+
+</Tab>
+
+</Tabs>
+
+</Step>
+
+<Step label="4">
+
+## 選択した画像を使用する
+
+`result` オブジェクトには `assets` 配列があり、その中に選択された画像の `uri` が含まれています。この値を画像ピッカーから取得して、選択された画像をアプリに表示します。
+
+**app/(tabs)/index.tsx** ファイルを変更します。
+
+1. React の [`useState`](https://react.dev/learn/state-a-components-memory#adding-a-state-variable) フックを使って、`selectedImage` という状態変数を宣言します。この状態変数は選択された画像の URI を保持するために使います。
+2. `pickImageAsync()` 関数を更新して、画像の URI を `selectedImage` 状態変数に保存します。
+3. `selectedImage` をプロパティとして `ImageViewer` コンポーネントに渡します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx
+import { View, StyleSheet } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+/* @tutinfo <CODE>react<CODE> から <CODE>useState</CODE> フックをインポートします。*/
+import { useState } from 'react';
+/* @end */
+
+import Button from '@/components/Button';
+import ImageViewer from '@/components/ImageViewer';
+
+const PlaceholderImage = require('@/assets/images/background-image.png');
+
+export default function Index() {
+  /* @tutinfo 選択された画像の値を保持する state 変数を作成します。 */
+  const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
+  /* @end */
+
+  const pickImageAsync = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      /* @tutinfo <CODE>assets</CODE> 配列から最初の uri を取得します。また、一度に選択される画像は 1 つだけなので、ここを変更する必要はありません。 */
+      setSelectedImage(result.assets[0].uri);
+      /* @end */
+    } else {
+      alert('You did not select any image.');
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        /* @tutinfo 選択された画像の URI を <CODE>ImageViewer</CODE> コンポーネントに渡します。 */
+        <ImageViewer imgSource={PlaceholderImage} selectedImage={selectedImage} />
+        /* @end */
+      </View>
+      <View style={styles.footerContainer}>
+        <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
+        <Button label="Use this photo" />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+});
+```
+
+プレースホルダー画像の代わりに選択された画像を表示するために、`selectedImage` プロパティを `ImageViewer` コンポーネントに渡します。
+
+1. **components/ImageViewer.tsx** ファイルを変更して、`selectedImage` プロパティを受け取れるようにします。
+2. 画像のソースが長くなっているので、`imageSource` という別の変数に切り出します。
+3. `Image` コンポーネントの `source` プロパティの値として `imageSource` を渡します。
+
+{/* prettier-ignore */}
+```tsx components/ImageViewer.tsx
+import { ImageSourcePropType, StyleSheet } from 'react-native';
+import { Image } from 'expo-image';
+
+type Props = {
+  imgSource: ImageSourcePropType;
+  /* @tutinfo */
+  selectedImage?: string;
+  /* @end */
+};
+
+export default function ImageViewer({ imgSource, /* @tutinfo <CODE>selectedImage</CODE> プロパティを渡します。*/selectedImage/* @end */ }: Props) {
+  /* @tutinfo 選択された画像が null でない場合はデバイスからの画像を表示し、そうでない場合はプレースホルダー画像を表示します。 */
+  const imageSource = selectedImage ? { uri: selectedImage } : imgSource;
+  /* @end */
+
+  /* @tutinfo <CODE>imgSource</CODE> を <CODE>imageSource</CODE> に置き換えます。 */
+  return <Image source={imageSource} style={styles.image} />;
+  /* @end */
+}
+
+const styles = StyleSheet.create({
+  image: {
+    width: 320,
+    height: 440,
+    borderRadius: 18,
+  },
+});
+```
+
+上記のスニペットでは、Image コンポーネントは条件演算子を使って画像のソースを読み込みます。選択された画像は、プレースホルダー画像のようなローカルアセットではなく、[`uri` 文字列](https://reactnative.dev/docs/images#network-images) です。
+
+アプリの状態を確認してみましょう。
+
+<ContentSpotlight file="tutorial/03-image-picker-demo.mp4" />
+
+> このチュートリアルのサンプルアプリで使用されている画像は [Unsplash](https://unsplash.com) から取得しました。
+
+</Step>
+
+## まとめ
+
+<ProgressTracker
+  currentChapterIndex={3}
+  name="GET_STARTED"
+  chapterTitle="第 4 章：画像ピッカーを使用する"
+  summary="デバイスのメディアライブラリから画像を選択する機能の追加が完了しました。"
+  nextChapterDescription="次の章では、絵文字ピッカーのモーダルコンポーネントを作成する方法を学びます。"
+  nextChapterTitle="絵文字ピッカーのモーダルを作成する"
+  nextChapterLink="/ja/tutorial/create-a-modal"
+/>
diff --git a/docs/pages/ja/tutorial/introduction.mdx b/docs/pages/ja/tutorial/introduction.mdx
new file mode 100644
index 00000000000000..2146d1ad37a1ab
--- /dev/null
+++ b/docs/pages/ja/tutorial/introduction.mdx
@@ -0,0 +1,75 @@
+---
+title: 'チュートリアル：React Native と Expo を使う'
+sidebar_title: はじめに
+description: Expo を使って Android、iOS、web で動作するユニバーサルアプリを作るための React Native チュートリアル入門。
+---
+
+import { BookOpen02Icon } from '@expo/styleguide-icons/outline/BookOpen02Icon';
+
+import { BoxLink } from '~/ui/components/BoxLink';
+import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
+
+これからユニバーサルアプリを作る旅に出発しましょう。このチュートリアルでは、Android、iOS、web で動作する Expo アプリを、ひとつのコードベースで作成します。さっそく始めましょう！
+
+## React Native と Expo チュートリアルについて
+
+このチュートリアルの目的は、Expo を始めて Expo SDK に慣れることです。以下のトピックを扱います。
+
+- TypeScript を有効にしたデフォルトテンプレートでアプリを作成する
+- Expo Router で 2 画面のボトムタブレイアウトを実装する
+- アプリのレイアウトを分解して flexbox で実装する
+- 各プラットフォームのシステム UI を使ってメディアライブラリから画像を選択する
+- React Native の `<Modal>` と `<FlatList>` コンポーネントを使ってステッカーモーダルを作成する
+- ステッカーを操作するためのタッチジェスチャーを追加する
+- サードパーティライブラリを使ってスクリーンショットを撮影し、ディスクに保存する
+- Android、iOS、web のプラットフォーム差異に対応する
+- 最後に、ステータスバー、スプラッシュスクリーン、アイコンを設定してアプリを完成させる
+
+これらのトピックは、Expo アプリ作成の基礎を学ぶための土台になります。このチュートリアルは自分のペースで進められ、完了までに最大 2 時間ほどかかります。
+
+初心者にも取り組みやすいように、チュートリアルは 9 章に分けています。続けて進めることも、いったん中断して後で戻ってくることもできます。各章にはステップを完了するために必要なコードスニペットが含まれているため、ゼロからコードを書きながら進めても、スニペットをコピー＆ペーストして進めても構いません。
+
+始める前に、これから作るものを見てみましょう。Android、iOS、web で動作する **StickerSmash** という名前のアプリです。
+
+<ContentSpotlight file="tutorial/final.mp4" />
+
+> **info** このチュートリアルの完全なソースコードは [GitHub](https://github.com/expo/examples/tree/master/stickersmash) で公開されています。
+
+## このチュートリアルの使い方
+
+このチュートリアルは [実践による学習](https://en.wikipedia.org/wiki/Learning-by-doing) を重視しており、説明よりも実際に作ることに重きを置いています。ゼロからアプリを作りながら、アプリ構築の流れを体験できます。
+
+チュートリアル全体を通して、重要なコードや前のサンプルから変更された箇所は <span className="tutorial-code-annotation">緑色でハイライト</span> されます。デスクトップではハイライト部分にマウスを重ねる、モバイルではタップすることで、変更内容の詳細を確認できます。たとえば、以下のスニペットでハイライトされたコードは、その役割を説明しています。
+
+{/* prettier-ignore */}
+```tsx Hello World|collapseHeight=300
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      /* @tutinfo 以前は "Edit app/index.tsx to edit this screen." と表示されていましたが、現在は "Hello world!" と表示されます。 */<Text>Hello world!</Text>/* @end */
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+```
+
+## 次のステップ
+
+アプリの作成を始める準備が整いました。
+
+<BoxLink
+  title="始める"
+  Icon={BookOpen02Icon}
+  description="まずは新しい Expo アプリを作成しましょう。"
+  href="/ja/tutorial/create-your-first-app"
+/>
diff --git a/docs/pages/ja/tutorial/overview.mdx b/docs/pages/ja/tutorial/overview.mdx
new file mode 100644
index 00000000000000..f5273f246fd995
--- /dev/null
+++ b/docs/pages/ja/tutorial/overview.mdx
@@ -0,0 +1,32 @@
+---
+title: Expo と EAS のチュートリアル概要
+sidebar_title: 概要
+hideTOC: true
+---
+
+import { GraduationHat02DuotoneIcon } from '@expo/styleguide-icons/duotone/GraduationHat02DuotoneIcon';
+
+import { BoxLink } from '~/ui/components/BoxLink';
+
+**Learn** セクションは、Expo と Expo Application Services (EAS) について学ぶためのチュートリアルやガイドをまとめたものです。以下の内容を扱います。
+
+<BoxLink
+  title="Expo チュートリアル"
+  description="Expo を初めて使う方には、このチュートリアルから始めることをおすすめします。Android、iOS、web で動作する Expo アプリの作り方をステップごとに解説します。"
+  href="/ja/tutorial/introduction/"
+  Icon={GraduationHat02DuotoneIcon}
+/>
+
+<BoxLink
+  title="Build with AI チュートリアル"
+  description="プログラミング経験がなくても、AI コーディングエージェントに指示しながら初めてのアプリを作成できるチュートリアルです。ツールを一からセットアップする方法から、各ステップでスマートフォンでアプリを確認する方法までを解説します。"
+  href="/tutorial/build-with-ai/introduction/"
+  Icon={GraduationHat02DuotoneIcon}
+/>
+
+<BoxLink
+  title="EAS チュートリアル"
+  description="Expo Application Services (EAS) を使って Android と iOS のアプリをビルドする方法を学びたい方向けに、このチュートリアルでは EAS Build、EAS Update、EAS Submit のワークフローを解説します。"
+  href="/tutorial/eas/introduction/"
+  Icon={GraduationHat02DuotoneIcon}
+/>
diff --git a/docs/pages/ja/tutorial/platform-differences.mdx b/docs/pages/ja/tutorial/platform-differences.mdx
new file mode 100644
index 00000000000000..2f7243e7eb27ef
--- /dev/null
+++ b/docs/pages/ja/tutorial/platform-differences.mdx
@@ -0,0 +1,234 @@
+---
+title: プラットフォームの違いに対応する
+description: このチュートリアルでは、ユニバーサルアプリの作成時にネイティブと web のプラットフォームの違いに対応する方法を学びます。
+hasVideoLink: true
+---
+
+import { Collapsible } from '~/ui/components/Collapsible';
+import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
+import { Terminal } from '~/ui/components/Snippet';
+import { Step } from '~/ui/components/Step';
+import { CODE } from '~/ui/components/Text';
+import { VideoBoxLink } from '~/ui/components/VideoBoxLink';
+
+Android、iOS、web はそれぞれ異なる機能を持っています。今回のケースでは、Android と iOS は `react-native-view-shot` ライブラリでスクリーンショットを撮影できますが、web ブラウザではできません。
+
+この章では、web ブラウザでもスクリーンショットを撮影できるようにし、すべてのプラットフォームで同じ機能をアプリに持たせる方法を学びます。
+
+<VideoBoxLink
+  videoId="mEKQvF4irBM"
+  title="視聴：ユニバーサル Expo アプリでプラットフォームの違いに対応する"
+  description="dom-to-image を使ってプラットフォーム固有のスクリーンショット撮影を実装し、Android、iOS、web 間のプラットフォームの違いに対応します。"
+/>
+
+---
+
+<Step label="1">
+
+{/* vale off */}
+
+## dom-to-image をインストールしてインポートする
+
+{/* vale on */}
+
+web でスクリーンショットを撮影して画像として保存するため、[`dom-to-image`](https://github.com/tsayen/dom-to-image#readme) というサードパーティのライブラリを使用します。このライブラリは任意の DOM ノードのスクリーンショットを撮影し、ベクター画像 (SVG) またはラスター画像 (PNG または JPEG) に変換します。
+
+開発サーバーを停止し、次のコマンドを実行してライブラリをインストールしてみましょう。
+
+<Terminal cmd={['$ npm install dom-to-image']} />
+
+> **注：** ここで使用している `dom-to-image` ライブラリは、説明のためのものです。本番アプリでは、用途に応じてより適した他のソリューションや API も検討してみてください。
+
+インストールが完了したら、開発サーバーを再起動し、ターミナルで <kbd>W</kbd> を押します。
+
+</Step>
+
+<Step label="2">
+
+## プラットフォーム固有のコードを追加する
+
+React Native の `Platform` モジュールを使用すると、プラットフォーム固有の動作を実装できます。**app/(tabs)/index.tsx** で次の手順を行います。
+
+1. `react-native` から `Platform` モジュールをインポートします。
+2. `dom-to-image` から `domtoimage` ライブラリをインポートします。
+3. `Platform.OS` プロパティを使って現在のプラットフォームが `'web'` かどうかを判定するように `onSaveImageAsync()` 関数を更新します。`'web'` の場合は、`domtoimage.toJpeg()` メソッドを使って現在の `<View>` を JPEG 画像として変換・撮影します。それ以外の場合は、ネイティブプラットフォーム用に追加した同じロジックをそのまま使用します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx
+import * as ImagePicker from 'expo-image-picker';
+import * as MediaLibrary from 'expo-media-library';
+import { useEffect, useRef, useState } from 'react';
+import { ImageSourcePropType, View, StyleSheet, /* @tutinfo */Platform/* @end */ } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { captureRef } from 'react-native-view-shot';
+/* @tutinfo <CODE>domtoimage</CODE> ライブラリをインポートします。 */import domtoimage from 'dom-to-image';/* @end */
+
+import Button from '@/components/Button';
+import ImageViewer from '@/components/ImageViewer';
+import IconButton from '@/components/IconButton';
+import CircleButton from '@/components/CircleButton';
+import EmojiPicker from '@/components/EmojiPicker';
+import EmojiList from '@/components/EmojiList';
+import EmojiSticker from '@/components/EmojiSticker';
+
+const PlaceholderImage = require('@/assets/images/background-image.png');
+
+export default function Index() {
+  const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
+  const [showAppOptions, setShowAppOptions] = useState<boolean>(false);
+  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+  const [pickedEmoji, setPickedEmoji] = useState<ImageSourcePropType | undefined>(undefined);
+  const [permissionResponse, requestPermission] = ImagePicker.useMediaLibraryPermissions();
+  const imageRef = useRef<View>(null);
+
+  useEffect(() => {
+    if (!permissionResponse?.granted) {
+      requestPermission();
+    }
+  }, []);
+
+  const pickImageAsync = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setSelectedImage(result.assets[0].uri);
+      setShowAppOptions(true);
+    } else {
+      alert('You did not select any image.');
+    }
+  };
+
+  const onReset = () => {
+    setShowAppOptions(false);
+  };
+
+  const onAddSticker = () => {
+    setIsModalVisible(true);
+  };
+
+  const onModalClose = () => {
+    setIsModalVisible(false);
+  };
+
+  const onSaveImageAsync = async () => {
+    /* @tutinfo 現在のプラットフォームが web かどうかを確認するため、ここに if 条件を追加します。 */
+    if (Platform.OS !== 'web') {
+    /* @end */
+      try {
+        const localUri = await captureRef(imageRef, {
+          height: 440,
+          quality: 1,
+        });
+
+        await MediaLibrary.saveToLibraryAsync(localUri);
+        if (localUri) {
+          alert('Saved!');
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    /* @tutinfo 現在のプラットフォームが web の場合にロジックを実行するため、else 条件を追加します。 */
+    } else {
+      try {
+        const dataUrl = await domtoimage.toJpeg(imageRef.current, {
+          quality: 0.95,
+          width: 320,
+          height: 440,
+        });
+
+        let link = document.createElement('a');
+        link.download = 'sticker-smash.jpeg';
+        link.href = dataUrl;
+        link.click();
+      } catch (e) {
+        console.log(e);
+      }
+    }
+    /* @end */
+  };
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <View style={styles.imageContainer}>
+        <View ref={imageRef} collapsable={false}>
+          <ImageViewer imgSource={PlaceholderImage} selectedImage={selectedImage} />
+          {pickedEmoji && <EmojiSticker imageSize={40} stickerSource={pickedEmoji} />}
+        </View>
+      </View>
+      {showAppOptions ? (
+        <View style={styles.optionsContainer}>
+          <View style={styles.optionsRow}>
+            <IconButton icon="refresh" label="Reset" onPress={onReset} />
+            <CircleButton onPress={onAddSticker} />
+            <IconButton icon="save-alt" label="Save" onPress={onSaveImageAsync} />
+          </View>
+        </View>
+      ) : (
+        <View style={styles.footerContainer}>
+          <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
+          <Button label="Use this photo" onPress={() => setShowAppOptions(true)} />
+        </View>
+      )}
+      <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}>
+        <EmojiList onSelect={setPickedEmoji} onCloseModal={onModalClose} />
+      </EmojiPicker>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+  optionsContainer: {
+    position: 'absolute',
+    bottom: 80,
+  },
+  optionsRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+});
+```
+
+<Collapsible summary={<><CODE>dom-to-image</CODE> の TypeScript モジュールエラーを修正する</>}>
+
+TypeScript を使用しているため、`domtoimage` ライブラリをインポートした後に型定義を追加する必要があります。プロジェクトディレクトリのルートに **types.d.ts** ファイルを作成し、次の宣言文を追加します。
+
+```tsx types.d.ts
+declare module 'dom-to-image';
+```
+
+</Collapsible>
+
+これで、web ブラウザでアプリを実行するとスクリーンショットを保存できます。
+
+<ContentSpotlight file="tutorial/web.mp4" />
+
+</Step>
+
+## まとめ
+
+<ProgressTracker
+  currentChapterIndex={7}
+  name="GET_STARTED"
+  chapterTitle="第 8 章：プラットフォームの違いに対応する"
+  summary="目指していた機能をすべてアプリに実装できました。次は見た目の部分に焦点を移していきましょう。"
+  nextChapterDescription="次の章では、アプリのステータスバー、スプラッシュスクリーン、アプリアイコンをカスタマイズします。"
+  nextChapterTitle="ステータスバー、スプラッシュスクリーン、アプリアイコンを設定する"
+  nextChapterLink="/ja/tutorial/configuration"
+/>
diff --git a/docs/pages/ja/tutorial/screenshot.mdx b/docs/pages/ja/tutorial/screenshot.mdx
new file mode 100644
index 00000000000000..920454ca7ea9c8
--- /dev/null
+++ b/docs/pages/ja/tutorial/screenshot.mdx
@@ -0,0 +1,276 @@
+---
+title: スクリーンショットを撮影する
+description: このチュートリアルでは、サードパーティのライブラリと Expo Media Library を使ってスクリーンショットを撮影する方法を学びます。
+hasVideoLink: true
+---
+
+import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
+import { Terminal } from '~/ui/components/Snippet';
+import { Step } from '~/ui/components/Step';
+import { CODE } from '~/ui/components/Text';
+import { VideoBoxLink } from '~/ui/components/VideoBoxLink';
+
+この章では、サードパーティのライブラリを使ってスクリーンショットを撮影し、デバイスのメディアライブラリに保存する方法を学びます。スクリーンショットの撮影には [`react-native-view-shot`](https://github.com/gre/react-native-view-shot) を、デバイスのメディアライブラリへの画像の保存には [`expo-media-library`](/versions/latest/sdk/media-library/) を使用します。
+
+> **info** ここまで、`react-native-gesture-handler` や `react-native-reanimated` などのサードパーティのライブラリを使用してきました。用途に応じて、[React Native Directory](https://reactnative.directory/) で他にも数百のサードパーティのライブラリを見つけることができます。
+
+<VideoBoxLink
+  videoId="Jft3_Yfr-p4"
+  title="視聴：ユニバーサル Expo アプリでスクリーンショットを撮影する"
+  description="react-native-view-shot でスクリーンショットを撮影し、expo-media-library を使ってデバイスのメディアライブラリに保存します。"
+/>
+
+---
+
+<Step label="1">
+
+## ライブラリをインストールする
+
+`react-native-view-shot` と `expo-media-library` をインストールするには、次のコマンドを実行します。
+
+<Terminal cmd={['$ npx expo install react-native-view-shot expo-media-library']} />
+
+</Step>
+
+<Step label="2">
+
+## 権限を要求する
+
+デバイスのメディアライブラリへのアクセスのような機密性の高い情報を必要とするアプリでは、アクセスを許可または拒否するための権限を要求する必要があります。`expo-image-picker` の `useMediaLibraryPermissions()` フックを使うと、`permissionResponse` と `requestPermission()` メソッドを利用してアクセスを要求できます。このフックは読み取りと書き込みの両方の権限を要求するため、ライブラリからの画像選択とスクリーンショットの保存の両方に対応します。
+
+アプリが初めて起動され、権限のステータスが許可も拒否もされていない場合、`permissionResponse` の値は `null` になります。権限を要求されると、ユーザーは権限を許可するか拒否するかを選択できます。許可されていない場合に判定する条件を追加します。許可されていない場合は、`requestPermission()` メソッドを呼び出します。アクセスが得られると、`permissionResponse` の値は `granted` に変わります。
+
+次のコードスニペットを **src/app/(tabs)/index.tsx** の中に追加します。
+
+{/* prettier-ignore */}
+```tsx src/app/(tabs)/index.tsx
+import { /* @tutinfo */useEffect/* @end */, useState } from 'react';
+import * as ImagePicker from 'expo-image-picker';
+
+// ...rest of the code remains same
+
+export default function Index() {
+  /* @tutinfo フックから権限のレスポンスと <CODE>requestPermission()</CODE> メソッドをインポートするため、この文を追加します。 */const [permissionResponse, requestPermission] = ImagePicker.useMediaLibraryPermissions();/* @end */
+  // ...rest of the code remains same
+
+  /* @tutinfo 権限の状態を確認するため、if 文を追加します。requestPermission() メソッドは、ユーザーが権限を許可または拒否するためのダイアログを表示します。 */
+  useEffect(() => {
+    if (!permissionResponse?.granted) {
+      requestPermission();
+    }
+  }, []);
+  /* @end */
+
+  // ...rest of the code remains same
+}
+```
+
+</Step>
+
+<Step label="3">
+
+## 現在のビューを保存するための ref を作成する
+
+アプリ内でユーザーがスクリーンショットを撮影できるようにするため、`react-native-view-shot` を使用します。このライブラリは、`captureRef()` メソッドを使って `<View>` のスクリーンショットを画像として撮影します。撮影したスクリーンショット画像ファイルの URI が返されます。
+
+1. `react-native-view-shot` から `captureRef` を、React から `useRef` をインポートします。
+2. 撮影したスクリーンショット画像の参照を保持する `imageRef` 参照変数を作成します。
+3. `<ImageViewer>` と `<EmojiSticker>` コンポーネントを `<View>` で囲み、それに参照変数を渡します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx|collapseHeight=440
+import { useState, /* @tutinfo <CODE>react</CODE> から <CODE>useRef</CODE> フックをインポートします。 */useRef/* @end */ } from 'react';
+/* @tutinfo <CODE>react-native-view-shot</CODE> から <CODE>captureRef</CODE> をインポートします。 */import { captureRef } from 'react-native-view-shot';/* @end */
+
+export default function Index() {
+  /* @tutinfo imageRef 変数を作成します。 */ const imageRef = useRef<View>(null);/* @end */
+
+  // ...rest of the code remains same
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <View style={styles.imageContainer}>
+        /* @tutinfo ImageViewer と EmojiSticker をラップする View コンポーネントを追加します。 */<View ref={imageRef} collapsable={false}>/* @end */
+          <ImageViewer imgSource={PlaceholderImage} selectedImage={selectedImage} />
+          {pickedEmoji && <EmojiSticker imageSize={40} stickerSource={pickedEmoji} />}
+        /* @tutinfo */</View>/* @end */
+      </View>
+      {/* ...rest of the code remains same */}
+    </GestureHandlerRootView>
+  );
+}
+```
+
+上のスニペットでは、`collapsable` プロパティを `false` に設定しています。これにより、`<View>` コンポーネントは背景画像と絵文字ステッカーのみをスクリーンショットの対象にできます。
+
+</Step>
+
+<Step label="4">
+
+## スクリーンショットを撮影して保存する
+
+`onSaveImageAsync()` 関数の中で `react-native-view-shot` の `captureRef()` メソッドを呼び出すことで、ビューのスクリーンショットを撮影できます。このメソッドは省略可能な引数を受け取り、スクリーンショットを撮影する領域の `width` と `height` を渡せます。利用可能なオプションの詳細については、[ライブラリのドキュメント](https://github.com/gre/react-native-view-shot#capturerefview-options-lower-level-imperative-api) を参照してください。
+
+また、`captureRef()` メソッドはスクリーンショットの URI で解決される Promise を返します。この URI を [`MediaLibrary.saveToLibraryAsync()`](/versions/latest/sdk/media-library/#medialibrarysavetolibraryasynclocaluri) のパラメータとして渡し、デバイスのメディアライブラリにスクリーンショットを保存します。
+
+**app/(tabs)/index.tsx** の中で、`onSaveImageAsync()` 関数を次のコードに更新します。
+
+{/* prettier-ignore */}
+```tsx app/(tabs)/index.tsx|collapseHeight=440
+import * as ImagePicker from 'expo-image-picker';
+import * as MediaLibrary from 'expo-media-library';
+import { useEffect, useRef, useState } from 'react';
+import { ImageSourcePropType, StyleSheet, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { captureRef } from 'react-native-view-shot';
+
+import Button from '@/components/Button';
+import CircleButton from '@/components/CircleButton';
+import EmojiList from '@/components/EmojiList';
+import EmojiPicker from '@/components/EmojiPicker';
+import IconButton from '@/components/IconButton';
+import ImageViewer from '@/components/ImageViewer';
+
+import EmojiSticker from '@/components/EmojiSticker';
+
+const PlaceholderImage = require('@/assets/images/background-image.png');
+
+export default function Index() {
+  const [selectedImage, setSelectedImage] = useState<string | undefined>(
+    undefined
+  );
+  const [showAppOptions, setShowAppOptions] = useState<boolean>(false);
+  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+  const [pickedEmoji, setPickedEmoji] = useState<
+    ImageSourcePropType | undefined
+  >(undefined);
+  const [permissionResponse, requestPermission] = ImagePicker.useMediaLibraryPermissions();
+  const imageRef = useRef<View>(null);
+
+  useEffect(() => {
+    if (!permissionResponse?.granted) {
+      requestPermission();
+    }
+  }, []);
+
+  const pickImageAsync = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setSelectedImage(result.assets[0].uri);
+      setShowAppOptions(true);
+    } else {
+      alert('You did not select any image.');
+    }
+  };
+
+  const onReset = () => {
+    setShowAppOptions(false);
+  };
+
+  const onAddSticker = () => {
+    setIsModalVisible(true);
+  };
+
+  const onModalClose = () => {
+    setIsModalVisible(false);
+  };
+
+  /* @tutinfo スクリーンショットを撮影して画像を保存するコードに、コメントを置き換えます。 */
+  const onSaveImageAsync = async () => {
+    try {
+      const localUri = await captureRef(imageRef, {
+        height: 440,
+        quality: 1,
+      });
+
+      await MediaLibrary.saveToLibraryAsync(localUri);
+      if (localUri) {
+        alert('Saved!');
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  /* @end */
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <View style={styles.imageContainer}>
+        <View ref={imageRef} collapsable={false}>
+          <ImageViewer imgSource={PlaceholderImage} selectedImage={selectedImage} />
+          {pickedEmoji && <EmojiSticker imageSize={40} stickerSource={pickedEmoji} />}
+        </View>
+      </View>
+      {showAppOptions ? (
+        <View style={styles.optionsContainer}>
+          <View style={styles.optionsRow}>
+            <IconButton icon="refresh" label="Reset" onPress={onReset} />
+            <CircleButton onPress={onAddSticker} />
+            <IconButton icon="save-alt" label="Save" onPress={onSaveImageAsync} />
+          </View>
+        </View>
+      ) : (
+        <View style={styles.footerContainer}>
+          <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
+          <Button label="Use this photo" onPress={() => setShowAppOptions(true)} />
+        </View>
+      )}
+      <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}>
+        <EmojiList onSelect={setPickedEmoji} onCloseModal={onModalClose} />
+      </EmojiPicker>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+  optionsContainer: {
+    position: 'absolute',
+    bottom: 80,
+  },
+  optionsRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+});
+```
+
+それでは、アプリで写真を選び、ステッカーを追加してから「Save」ボタンをタップしてみましょう。Android と iOS で次のような結果が表示されるはずです。
+
+<ContentSpotlight file="tutorial/saving-screenshot.mp4" />
+
+</Step>
+
+## まとめ
+
+<ProgressTracker
+  currentChapterIndex={6}
+  name="GET_STARTED"
+  chapterTitle="第 7 章：スクリーンショットを撮影する"
+  summary={
+    <>
+      <CODE>react-native-view-shot</CODE> と <CODE>expo-media-library</CODE>{' '}
+      を使用して、スクリーンショットを撮影しデバイスのライブラリに保存できました。
+    </>
+  }
+  nextChapterDescription="次の章では、モバイルと web プラットフォームの違いを処理して、web で同じ機能を実装する方法を学びます。"
+  nextChapterTitle="プラットフォームの違いに対応する"
+  nextChapterLink="/ja/tutorial/platform-differences"
+/>
diff --git a/docs/pages/tutorial/overview.mdx b/docs/pages/tutorial/overview.mdx
index dcd3812d00ef22..03ca29399193fc 100644
--- a/docs/pages/tutorial/overview.mdx
+++ b/docs/pages/tutorial/overview.mdx
@@ -1,5 +1,5 @@
 ---
-title: Overview of tutorials and UI guides
+title: Overview of Expo and EAS tutorials
 sidebar_title: Overview
 hideTOC: true
 ---
@@ -8,7 +8,7 @@ import { GraduationHat02DuotoneIcon } from '@expo/styleguide-icons/duotone/Gradu
 
 import { BoxLink } from '~/ui/components/BoxLink';
 
-The **Learn** section is a collection of tutorials and other guides that help you learn about Expo and EAS. It covers the following:
+The **Learn** section is a collection of tutorials and other guides that help you learn about Expo and Expo Application Services (EAS). It covers the following:
 
 <BoxLink
   title="Expo Tutorial"
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index b6d9afafc9923e..de557aa6ed31fb 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -31,6 +31,9 @@ importers:
       '@expo/styleguide-search-ui':
         specifier: ^9.1.6
         version: 9.1.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(next@16.2.6(patch_hash=423eaa79c801dbfda09aef892b3236e0194d49baf618fb3c7a89ec95d486eaeb)(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(tailwindcss@4.2.4)
+      '@formatjs/intl-localematcher':
+        specifier: ^0.8.5
+        version: 0.8.5
       '@kapaai/react-sdk':
         specifier: ^0.9.6
         version: 0.9.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -118,6 +121,9 @@ importers:
       react-dom:
         specifier: ^19.2.6
         version: 19.2.6(react@19.2.6)
+      react-intl:
+        specifier: ^10.1.4
+        version: 10.1.4(@types/react@19.2.14)(react@19.2.6)
       react-markdown:
         specifier: ^10.1.0
         version: 10.1.0(@types/react@19.2.14)(react@19.2.6)
@@ -813,6 +819,21 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@formatjs/fast-memoize@3.1.3':
+    resolution: {integrity: sha512-Ocd1vPuD68rW6BJDuAOtnnc1GPeVepY5kZXML1psGVFQ+1Q8CfkftT3Tnam+Mxx97Pz08jIEDCotl/GV+Naccg==}
+
+  '@formatjs/icu-messageformat-parser@3.5.6':
+    resolution: {integrity: sha512-04ZjRIeQCnR/h32wBP9/S7rkyy1hLAs2fXJcNwc7hseJd//K9TMBqK0ukb4dXqnALKQ9m5ruZeOD2qqEkK9ixg==}
+
+  '@formatjs/icu-skeleton-parser@2.1.6':
+    resolution: {integrity: sha512-9f1VQ2kaaLHK0WPU1OrAmiNKCKJwyoDmwNzQXbUa6XtFBOgHZ4YZURE8sSedHmMr0kvpB75OtplB0hMYkfdwfg==}
+
+  '@formatjs/intl-localematcher@0.8.5':
+    resolution: {integrity: sha512-TEW/NR367c3PcQ2AXfkNig9jC740+qbkM0LgKl7UCE7Xtv7C5Uk1mvlu86MjQZBmscUai8HSWjcEETpwaVvJ6A==}
+
+  '@formatjs/intl@4.1.8':
+    resolution: {integrity: sha512-ikDo41921J++o+fMjl7Qd1QxGiYqnBbMhBbDfzlwlfq0CQIuhF/BU/SZosZEGgpTqOa0VUhLCbOYC7wjtXb1tQ==}
+
   '@hcaptcha/loader@2.3.0':
     resolution: {integrity: sha512-i4lnNxKBe+COf3R1nFZEWaZoHIoJjvDgWqvcNrdZq8ehoSNMN6KVZ56dcQ02qKie2h3+BkbkwlJA9DOIuLlK/g==}
 
@@ -4663,6 +4684,9 @@ packages:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  intl-messageformat@11.2.3:
+    resolution: {integrity: sha512-kZthTU+3WLcoWoRg5j6LOkN1TeUBtmkX0OIwSAbcHVIfQAEbGVdmANM8u6GL3eUDOqLwheYoXMUshAh1UdeXlQ==}
+
   ip-address@10.1.0:
     resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
     engines: {node: '>= 12'}
@@ -6006,6 +6030,12 @@ packages:
     peerDependencies:
       react: ^19.2.6
 
+  react-intl@10.1.4:
+    resolution: {integrity: sha512-SUAHChHUw1VPdyDzndQisCeC4fuYrPa360MDvS+BF+Pb6uUw5hLYd67QaQ8FiYmw+roVvDswxi1kW/8wJPnQ1Q==}
+    peerDependencies:
+      '@types/react': '19'
+      react: '19'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -7611,6 +7641,24 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
+  '@formatjs/fast-memoize@3.1.3': {}
+
+  '@formatjs/icu-messageformat-parser@3.5.6':
+    dependencies:
+      '@formatjs/icu-skeleton-parser': 2.1.6
+
+  '@formatjs/icu-skeleton-parser@2.1.6': {}
+
+  '@formatjs/intl-localematcher@0.8.5':
+    dependencies:
+      '@formatjs/fast-memoize': 3.1.3
+
+  '@formatjs/intl@4.1.8':
+    dependencies:
+      '@formatjs/fast-memoize': 3.1.3
+      '@formatjs/icu-messageformat-parser': 3.5.6
+      intl-messageformat: 11.2.3
+
   '@hcaptcha/loader@2.3.0': {}
 
   '@hcaptcha/react-hcaptcha@1.17.4(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
@@ -11800,6 +11848,11 @@ snapshots:
       hasown: 2.0.3
       side-channel: 1.1.0
 
+  intl-messageformat@11.2.3:
+    dependencies:
+      '@formatjs/fast-memoize': 3.1.3
+      '@formatjs/icu-messageformat-parser': 3.5.6
+
   ip-address@10.1.0: {}
 
   ipaddr.js@1.9.1: {}
@@ -13605,6 +13658,14 @@ snapshots:
       react: 19.2.6
       scheduler: 0.27.0
 
+  react-intl@10.1.4(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      '@formatjs/icu-messageformat-parser': 3.5.6
+      '@formatjs/intl': 4.1.8
+      '@types/react': 19.2.14
+      intl-messageformat: 11.2.3
+      react: 19.2.6
+
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
diff --git a/docs/ui/components/CollapsibleTalksGridWrapper/index.tsx b/docs/ui/components/CollapsibleTalksGridWrapper/index.tsx
index d5004e29feb34e..f09f37e21d152d 100644
--- a/docs/ui/components/CollapsibleTalksGridWrapper/index.tsx
+++ b/docs/ui/components/CollapsibleTalksGridWrapper/index.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@expo/styleguide';
 import { useState } from 'react';
+import { useIntl } from 'react-intl';
 
 import { Talk } from '~/public/static/talks';
 import { TalkGridWrapper, TalkGridCell } from '~/ui/components/Home/sections';
@@ -10,6 +11,7 @@ type CollapsibleGridProps = {
 };
 
 export function CollapsibleTalksGridWrapper({ items }: CollapsibleGridProps) {
+  const intl = useIntl();
   const [showAll, setShowAll] = useState(false);
   const initialRowCount = 3;
   const itemsPerRow = 4;
@@ -30,7 +32,7 @@ export function CollapsibleTalksGridWrapper({ items }: CollapsibleGridProps) {
             onClick={() => {
               setShowAll(!showAll);
             }}>
-            {showAll ? 'Show Less' : 'Show More'}
+            {intl.formatMessage({ id: showAll ? 'showLess' : 'showMore' })}
           </Button>
         </div>
       )}
diff --git a/docs/ui/components/Footer/Footer.tsx b/docs/ui/components/Footer/Footer.tsx
index a8da1f2151c514..54a17012b211d8 100644
--- a/docs/ui/components/Footer/Footer.tsx
+++ b/docs/ui/components/Footer/Footer.tsx
@@ -3,6 +3,7 @@ import { PrivacyChoicesButton } from '@expo/styleguide-cookie-consent';
 import { ArrowLeftIcon } from '@expo/styleguide-icons/outline/ArrowLeftIcon';
 import { ArrowRightIcon } from '@expo/styleguide-icons/outline/ArrowRightIcon';
 import { useRouter } from 'next/compat/router';
+import { useIntl } from 'react-intl';
 
 import { isEasPath } from '~/common/routes';
 import { usePageApiVersion } from '~/providers/page-api-version';
@@ -36,6 +37,7 @@ export const Footer = ({
 }: Props) => {
   const { hasVersion, version } = usePageApiVersion();
   const router = useRouter();
+  const intl = useIntl();
   const isAPIPage = router?.pathname.includes('/sdk/') ?? false;
   const isTutorial = router?.pathname.includes('/tutorial/') ?? false;
   const isExpoPackage = packageName ? packageName.startsWith('expo-') : isAPIPage;
@@ -78,7 +80,8 @@ export const Footer = ({
               <ArrowLeftIcon className="shrink-0 text-icon-secondary" />
               <div>
                 <FOOTNOTE theme="secondary">
-                  Previous{previousPage.section ? ` (${previousPage.section})` : ''}
+                  {intl.formatMessage({ id: 'footerPrevious' })}
+                  {previousPage.section ? ` (${previousPage.section})` : ''}
                 </FOOTNOTE>
                 <P weight="medium">{previousPage.sidebarTitle ?? previousPage.name}</P>
               </div>
@@ -95,7 +98,8 @@ export const Footer = ({
               )}>
               <div>
                 <FOOTNOTE theme="secondary">
-                  Next{nextPage?.section ? ` (${nextPage.section})` : ''}
+                  {intl.formatMessage({ id: 'footerNext' })}
+                  {nextPage?.section ? ` (${nextPage.section})` : ''}
                 </FOOTNOTE>
                 <P weight="medium">{nextPage.sidebarTitle ?? nextPage.name}</P>
               </div>
diff --git a/docs/ui/components/Footer/Links.tsx b/docs/ui/components/Footer/Links.tsx
index d94f6574f68e03..76f8576e1d6365 100644
--- a/docs/ui/components/Footer/Links.tsx
+++ b/docs/ui/components/Footer/Links.tsx
@@ -4,6 +4,8 @@ import { Edit05Icon } from '@expo/styleguide-icons/outline/Edit05Icon';
 import { File02Icon } from '@expo/styleguide-icons/outline/File02Icon';
 import { MessageTextSquare02Icon } from '@expo/styleguide-icons/outline/MessageTextSquare02Icon';
 import * as Dialog from '@radix-ui/react-dialog';
+import type { ReactNode } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import { A, CALLOUT, LI } from '../Text';
 import { FeedbackDialog } from './FeedbackDialog';
@@ -27,8 +29,9 @@ export const IssuesLink = ({ title, repositoryUrl }: { title: string; repository
   </LI>
 );
 
-export const ForumsLink = ({ isAPIPage, title }: { isAPIPage: boolean; title: string }) =>
-  isAPIPage ? (
+export const ForumsLink = ({ isAPIPage, title }: { isAPIPage: boolean; title: string }) => {
+  const intl = useIntl();
+  return isAPIPage ? (
     <LI>
       <A isStyled openInNewTab href="https://chat.expo.dev/" className={LINK_CLASSES}>
         <DiscordIcon className={ICON_CLASSES} />
@@ -44,19 +47,23 @@ export const ForumsLink = ({ isAPIPage, title }: { isAPIPage: boolean; title: st
         className={LINK_CLASSES}
         shouldLeakReferrer>
         <DiscordIcon className={ICON_CLASSES} />
-        <CALLOUT theme="secondary">Ask a question on the forums</CALLOUT>
+        <CALLOUT theme="secondary">{intl.formatMessage({ id: 'footerAskOnForums' })}</CALLOUT>
       </A>
     </LI>
   );
+};
 
-export const EditPageLink = ({ pathname }: { pathname: string }) => (
-  <LI>
-    <A isStyled openInNewTab href={githubUrl(pathname)} className={LINK_CLASSES}>
-      <Edit05Icon className={ICON_CLASSES} />
-      <CALLOUT theme="secondary">Edit this page</CALLOUT>
-    </A>
-  </LI>
-);
+export const EditPageLink = ({ pathname }: { pathname: string }) => {
+  const intl = useIntl();
+  return (
+    <LI>
+      <A isStyled openInNewTab href={githubUrl(pathname)} className={LINK_CLASSES}>
+        <Edit05Icon className={ICON_CLASSES} />
+        <CALLOUT theme="secondary">{intl.formatMessage({ id: 'footerEditPage' })}</CALLOUT>
+      </A>
+    </LI>
+  );
+};
 
 type LlmsTxtLinkProps = {
   fullVersionHref: string;
@@ -67,26 +74,35 @@ export const LlmsTxtLink = ({ fullVersionHref, fullVersionLabel }: LlmsTxtLinkPr
   <LI className="flex items-center">
     <File02Icon className={ICON_CLASSES} />
     <CALLOUT theme="secondary" tag="span">
-      View{' '}
-      <A openInNewTab href="/llms.txt" className="focus-visible:outline-offset-4">
-        llms.txt
-      </A>{' '}
-      and{' '}
-      <A openInNewTab href={fullVersionHref} className="focus-visible:outline-offset-4">
-        {fullVersionLabel}
-      </A>
+      <FormattedMessage
+        id="footerLlmsView"
+        values={{
+          llmsLink: (chunks: ReactNode) => (
+            <A openInNewTab href="/llms.txt" className="focus-visible:outline-offset-4">
+              {chunks}
+            </A>
+          ),
+          fullLink: (chunks: ReactNode) => (
+            <A openInNewTab href={fullVersionHref} className="focus-visible:outline-offset-4">
+              {chunks}
+            </A>
+          ),
+          fullName: fullVersionLabel,
+        }}
+      />
     </CALLOUT>
   </LI>
 );
 
 export const ShareFeedbackLink = ({ pathname }: { pathname?: string }) => {
+  const intl = useIntl();
   return (
     <LI>
       <Dialog.Root>
         <Dialog.Trigger className="h-5.5 focus-visible:outline-offset-4">
           <A isStyled className={LINK_CLASSES}>
             <MessageTextSquare02Icon className={ICON_CLASSES} />
-            <CALLOUT theme="secondary">Share your feedback</CALLOUT>
+            <CALLOUT theme="secondary">{intl.formatMessage({ id: 'footerShareFeedback' })}</CALLOUT>
           </A>
         </Dialog.Trigger>
         <FeedbackDialog pathname={pathname} />
diff --git a/docs/ui/components/Footer/NewsletterSignUp.tsx b/docs/ui/components/Footer/NewsletterSignUp.tsx
index d8d889bca3e4e7..9baf730263350c 100644
--- a/docs/ui/components/Footer/NewsletterSignUp.tsx
+++ b/docs/ui/components/Footer/NewsletterSignUp.tsx
@@ -2,6 +2,7 @@ import { Button, mergeClasses } from '@expo/styleguide';
 import { isMarketingConsented } from '@expo/styleguide-cookie-consent';
 import { Mail01Icon } from '@expo/styleguide-icons/outline/Mail01Icon';
 import { useState } from 'react';
+import { useIntl } from 'react-intl';
 
 import { Input } from '~/ui/components/Form';
 import { A, CALLOUT, FOOTNOTE, LABEL } from '~/ui/components/Text';
@@ -22,6 +23,7 @@ function getHutk() {
 }
 
 export const NewsletterSignUp = () => {
+  const intl = useIntl();
   const [email, setEmail] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [userSignedUp, setUserSignedUp] = useState(false);
@@ -66,7 +68,7 @@ export const NewsletterSignUp = () => {
     <div className="max-w-87.5 flex-1 max-md:max-w-full">
       <CALLOUT className="flex items-center gap-2 font-medium text-secondary" id="newsletter-label">
         <Mail01Icon className="shrink-0 text-icon-tertiary" />
-        Sign up for the Expo Newsletter
+        {intl.formatMessage({ id: 'footerNewsletterTitle' })}
       </CALLOUT>
       <form
         className="relative"
@@ -75,7 +77,9 @@ export const NewsletterSignUp = () => {
           void signUpAsync();
         }}>
         {userSignedUp ? (
-          <LABEL className="my-2.5 flex h-12 items-center">Thank you for the sign up! 💙</LABEL>
+          <LABEL className="my-2.5 flex h-12 items-center">
+            {intl.formatMessage({ id: 'footerThankYouSignUp' })}
+          </LABEL>
         ) : (
           <Input
             onChange={event => {
@@ -98,16 +102,16 @@ export const NewsletterSignUp = () => {
             className="absolute top-2 right-2.5 min-w-17"
             disabled={userSignedUp || email.length === 0}
             onClick={signUpAsync}>
-            {userSignedUp ? 'Done!' : 'Sign Up'}
+            {intl.formatMessage({ id: 'footerSignUp' })}
           </Button>
         ) : null}
       </form>
       <FOOTNOTE theme="tertiary">
-        Unsubscribe at any time. Read our{' '}
+        {intl.formatMessage({ id: 'footerUnsubscribePrefix' })}
         <A href="https://expo.dev/privacy" openInNewTab>
-          privacy policy
+          {intl.formatMessage({ id: 'footerPrivacyPolicy' })}
         </A>
-        .
+        {intl.formatMessage({ id: 'footerUnsubscribeSuffix' })}
       </FOOTNOTE>
     </div>
   );
diff --git a/docs/ui/components/Footer/PageVote.tsx b/docs/ui/components/Footer/PageVote.tsx
index 8e6482223b7f60..ce1250b3e3a29a 100644
--- a/docs/ui/components/Footer/PageVote.tsx
+++ b/docs/ui/components/Footer/PageVote.tsx
@@ -4,11 +4,13 @@ import { ThumbsUpDuotoneIcon } from '@expo/styleguide-icons/duotone/ThumbsUpDuot
 import { ThumbsDownIcon } from '@expo/styleguide-icons/outline/ThumbsDownIcon';
 import { ThumbsUpIcon } from '@expo/styleguide-icons/outline/ThumbsUpIcon';
 import { useState } from 'react';
+import { useIntl } from 'react-intl';
 
 import { reportPageVote } from '~/providers/Analytics';
 import { CALLOUT } from '~/ui/components/Text';
 
 export const PageVote = () => {
+  const intl = useIntl();
   const [userVoted, setUserVoted] = useState(false);
 
   return (
@@ -19,11 +21,11 @@ export const PageVote = () => {
         'max-md:mx-auto max-md:mb-8 max-md:justify-center'
       )}>
       {userVoted ? (
-        <CALLOUT theme="secondary">Thank you for your vote! 💙</CALLOUT>
+        <CALLOUT theme="secondary">{intl.formatMessage({ id: 'footerThankYouForVote' })}</CALLOUT>
       ) : (
         <div className="flex flex-row items-center gap-2 max-md:flex-col">
           <CALLOUT theme="secondary" weight="medium">
-            Was this doc helpful?
+            {intl.formatMessage({ id: 'footerWasHelpful' })}
           </CALLOUT>
           <div>
             <Button
diff --git a/docs/ui/components/Header/Header.tsx b/docs/ui/components/Header/Header.tsx
index 885909554f5ce4..a685ae229eab65 100644
--- a/docs/ui/components/Header/Header.tsx
+++ b/docs/ui/components/Header/Header.tsx
@@ -4,11 +4,13 @@ import { Star01DuotoneIcon } from '@expo/styleguide-icons/duotone/Star01DuotoneI
 import { Menu01Icon } from '@expo/styleguide-icons/outline/Menu01Icon';
 import { Star01Icon } from '@expo/styleguide-icons/outline/Star01Icon';
 import { type ReactNode } from 'react';
+import { useIntl } from 'react-intl';
 
 import { SidebarFooter } from '~/ui/components/Sidebar/SidebarFooter';
 import { SidebarHead } from '~/ui/components/Sidebar/SidebarHead';
 import { DEMI } from '~/ui/components/Text';
 
+import { LanguageSwitcher } from './LanguageSwitcher';
 import { Logo } from './Logo';
 import { ThemeSelector } from './ThemeSelector';
 
@@ -25,12 +27,14 @@ export const Header = ({
   isMobileMenuVisible,
   setMobileMenuVisible,
 }: HeaderProps) => {
+  const intl = useIntl();
   const isArchive = sidebarActiveGroup === 'archive';
   return (
     <>
       <header className="relative z-10 mx-auto flex h-[60px] items-center justify-between gap-2 border-b border-default bg-default p-0 px-4">
         <div className="flex items-center gap-8">
           <Logo subgroup={isArchive ? 'Archive' : undefined} />
+          <LanguageSwitcher />
         </div>
         <div className="flex items-center gap-3">
           <Button
@@ -38,14 +42,14 @@ export const Header = ({
             theme="quaternary"
             className={mergeClasses('px-2 text-secondary', 'max-sm:hidden')}
             href="https://expo.dev/blog">
-            Blog
+            {intl.formatMessage({ id: 'headerBlog' })}
           </Button>
           <Button
             openInNewTab
             theme="quaternary"
             className={mergeClasses('px-2 text-secondary', 'max-sm:hidden')}
             href="https://expo.dev/changelog">
-            Changelog
+            {intl.formatMessage({ id: 'headerChangelog' })}
           </Button>
           <Button
             openInNewTab
@@ -58,7 +62,7 @@ export const Header = ({
               </>
             }
             href="https://github.com/expo/expo">
-            Star Us on GitHub
+            {intl.formatMessage({ id: 'headerStarOnGitHub' })}
           </Button>
           <Button
             openInNewTab
diff --git a/docs/ui/components/Header/LanguageSwitcher.tsx b/docs/ui/components/Header/LanguageSwitcher.tsx
new file mode 100644
index 00000000000000..36a4f58053767e
--- /dev/null
+++ b/docs/ui/components/Header/LanguageSwitcher.tsx
@@ -0,0 +1,44 @@
+import { useRouter } from 'next/router';
+import { useIntl } from 'react-intl';
+
+import {
+  buildLocalePath,
+  getLocaleFromPath,
+  isTranslatableSection,
+  type SupportedLocale,
+} from '~/common/i18n';
+import { Select } from '~/ui/components/Select';
+
+const options = [
+  { id: 'en', label: '🇺🇸 English' },
+  { id: 'ja', label: '🇯🇵 日本語' },
+];
+
+export function LanguageSwitcher() {
+  const router = useRouter();
+  const intl = useIntl();
+  const currentLocale = getLocaleFromPath(router.asPath);
+
+  if (!isTranslatableSection(router.asPath)) {
+    return null;
+  }
+
+  function onLocaleSelect(value: string) {
+    const targetLocale = value as SupportedLocale;
+    if (targetLocale === currentLocale) {
+      return;
+    }
+    void router.push(buildLocalePath(router.asPath, targetLocale));
+  }
+
+  return (
+    <Select
+      className="min-w-35 whitespace-nowrap"
+      value={currentLocale}
+      onValueChange={onLocaleSelect}
+      options={options}
+      optionsLabel={intl.formatMessage({ id: 'languageSwitcher.label' })}
+      ariaLabel={intl.formatMessage({ id: 'languageSwitcher.label' })}
+    />
+  );
+}
diff --git a/docs/ui/components/Header/ThemeSelector.tsx b/docs/ui/components/Header/ThemeSelector.tsx
index db65b589e72af3..d23622f2e015ff 100644
--- a/docs/ui/components/Header/ThemeSelector.tsx
+++ b/docs/ui/components/Header/ThemeSelector.tsx
@@ -2,29 +2,30 @@ import { Themes, useTheme } from '@expo/styleguide';
 import { Contrast02SolidIcon } from '@expo/styleguide-icons/solid/Contrast02SolidIcon';
 import { Moon01SolidIcon } from '@expo/styleguide-icons/solid/Moon01SolidIcon';
 import { SunSolidIcon } from '@expo/styleguide-icons/solid/SunSolidIcon';
+import { useIntl } from 'react-intl';
 
 import { Select } from '~/ui/components/Select';
 
-const options = [
-  {
-    id: Themes.AUTO,
-    label: 'Auto',
-    Icon: Contrast02SolidIcon,
-  },
-  {
-    id: Themes.LIGHT,
-    label: 'Light',
-    Icon: SunSolidIcon,
-  },
-  {
-    id: Themes.DARK,
-    label: 'Dark',
-    Icon: Moon01SolidIcon,
-  },
-];
-
 export function ThemeSelector() {
+  const intl = useIntl();
   const { themeName, setAutoMode, setDarkMode, setLightMode } = useTheme();
+  const options = [
+    {
+      id: Themes.AUTO,
+      label: intl.formatMessage({ id: 'themeAuto' }),
+      Icon: Contrast02SolidIcon,
+    },
+    {
+      id: Themes.LIGHT,
+      label: intl.formatMessage({ id: 'themeLight' }),
+      Icon: SunSolidIcon,
+    },
+    {
+      id: Themes.DARK,
+      label: intl.formatMessage({ id: 'themeDark' }),
+      Icon: Moon01SolidIcon,
+    },
+  ];
 
   function onThemeSelect(value: string) {
     if (value === Themes.AUTO) {
diff --git a/docs/ui/components/HreflangAlternates.tsx b/docs/ui/components/HreflangAlternates.tsx
new file mode 100644
index 00000000000000..44d7b85359e452
--- /dev/null
+++ b/docs/ui/components/HreflangAlternates.tsx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+
+import { getCanonicalPath, hasJapaneseTranslation } from '~/common/i18n';
+
+const BASE_URL = 'https://docs.expo.dev';
+
+export function HreflangAlternates() {
+  const router = useRouter();
+
+  if (!hasJapaneseTranslation(router.asPath)) {
+    return null;
+  }
+
+  const canonicalPath = getCanonicalPath(router.asPath);
+  const enHref = `${BASE_URL}${canonicalPath}`;
+  const jaHref = `${BASE_URL}/ja${canonicalPath === '/' ? '' : canonicalPath}`;
+
+  return (
+    <Head>
+      <link rel="alternate" hrefLang="en" href={enHref} />
+      <link rel="alternate" hrefLang="ja" href={jaHref} />
+      <link rel="alternate" hrefLang="x-default" href={enHref} />
+    </Head>
+  );
+}
diff --git a/docs/ui/components/MarkdownActions/MarkdownActionsDropdown.tsx b/docs/ui/components/MarkdownActions/MarkdownActionsDropdown.tsx
index abf88014701a15..0f67c7da4c0826 100644
--- a/docs/ui/components/MarkdownActions/MarkdownActionsDropdown.tsx
+++ b/docs/ui/components/MarkdownActions/MarkdownActionsDropdown.tsx
@@ -3,6 +3,7 @@ import { ChevronDownIcon } from '@expo/styleguide-icons/outline/ChevronDownIcon'
 import { Copy04Icon } from '@expo/styleguide-icons/outline/Copy04Icon';
 import { useRouter } from 'next/compat/router';
 import { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
 
 import {
   ClaudeCodeLogoIcon,
@@ -20,6 +21,7 @@ const getPrompt = (url: string) =>
 
 export function MarkdownActionsDropdown() {
   const router = useRouter();
+  const intl = useIntl();
 
   const pathname = router?.pathname;
   const asPath = router?.asPath;
@@ -207,7 +209,7 @@ export function MarkdownActionsDropdown() {
       <div className="flex flex-row items-center gap-1.5">
         <Copy04Icon className="icon-xs text-icon-secondary" />
         <FOOTNOTE crawlable={false} theme="secondary" className="whitespace-nowrap">
-          Copy page
+          {intl.formatMessage({ id: 'copyPage' })}
         </FOOTNOTE>
         <ChevronDownIcon className="icon-xs text-icon-secondary" />
       </div>
diff --git a/docs/ui/components/PageHeader/PageTitleButtons.tsx b/docs/ui/components/PageHeader/PageTitleButtons.tsx
index 1bc20a27b95216..63059100b02d04 100644
--- a/docs/ui/components/PageHeader/PageTitleButtons.tsx
+++ b/docs/ui/components/PageHeader/PageTitleButtons.tsx
@@ -4,6 +4,7 @@ import { NpmIcon } from '@expo/styleguide-icons/custom/NpmIcon';
 import { ClockRefreshIcon } from '@expo/styleguide-icons/outline/ClockRefreshIcon';
 import { Edit05Icon } from '@expo/styleguide-icons/outline/Edit05Icon';
 import { useRouter } from 'next/compat/router';
+import { useIntl } from 'react-intl';
 
 import { githubUrl } from '~/ui/components/Footer/utils';
 import { FOOTNOTE } from '~/ui/components/Text';
@@ -17,6 +18,7 @@ type Props = {
 
 export function PageTitleButtons({ packageName, sourceCodeUrl }: Props) {
   const router = useRouter();
+  const intl = useIntl();
   const showEditButton = !sourceCodeUrl && !packageName && router?.pathname;
 
   return (
@@ -31,7 +33,7 @@ export function PageTitleButtons({ packageName, sourceCodeUrl }: Props) {
           <div className="flex flex-row items-center gap-2">
             <Edit05Icon className="icon-sm text-icon-secondary" />
             <FOOTNOTE crawlable={false} theme="secondary">
-              Edit page
+              {intl.formatMessage({ id: 'editPage' })}
             </FOOTNOTE>
           </div>
         </Button>
diff --git a/docs/ui/components/Prerequisites/index.tsx b/docs/ui/components/Prerequisites/index.tsx
index 4c48ec94a58ff9..2da126d480db4e 100644
--- a/docs/ui/components/Prerequisites/index.tsx
+++ b/docs/ui/components/Prerequisites/index.tsx
@@ -12,6 +12,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useIntl } from 'react-intl';
 
 import withHeadingManager, { HeadingManagerProps } from '~/common/withHeadingManager';
 import { PermalinkIcon } from '~/ui/components/Permalink';
@@ -38,6 +39,7 @@ const Prerequisites: ComponentType<PrerequisitesProps> = withHeadingManager(
     );
     const numberOfRequirements = requirementChildren.length;
     const router = useRouter();
+    const intl = useIntl();
     const [isOpen, setIsOpen] = useState(open);
     const detailsRef = useRef<HTMLDetailsElement>(null);
     const anchorId = 'prerequisites';
@@ -100,7 +102,7 @@ const Prerequisites: ComponentType<PrerequisitesProps> = withHeadingManager(
                   'relative inline scroll-m-5',
                   'group-hover:text-secondary group-hover:[&_code]:text-secondary'
                 )}>
-                Prerequisites
+                {intl.formatMessage({ id: 'prerequisitesHeading' })}
               </p>
             </div>
             <LinkBase
@@ -116,7 +118,13 @@ const Prerequisites: ComponentType<PrerequisitesProps> = withHeadingManager(
           </div>
           <div>
             <p className="text-sm text-secondary">
-              {numberOfRequirements} requirement{numberOfRequirements === 1 ? '' : 's'}
+              {numberOfRequirements}{' '}
+              {intl.formatMessage({
+                id:
+                  numberOfRequirements === 1
+                    ? 'prerequisitesRequirementSingular'
+                    : 'prerequisitesRequirementPlural',
+              })}
             </p>
           </div>
         </summary>
diff --git a/docs/ui/components/ProgressTracker/index.tsx b/docs/ui/components/ProgressTracker/index.tsx
index 72728ee1e6f2e4..bafbaa8c5d669e 100644
--- a/docs/ui/components/ProgressTracker/index.tsx
+++ b/docs/ui/components/ProgressTracker/index.tsx
@@ -1,5 +1,6 @@
 import { mergeClasses } from '@expo/styleguide';
 import { BookOpen02Icon } from '@expo/styleguide-icons/outline/BookOpen02Icon';
+import { useIntl } from 'react-intl';
 
 import { useTutorialChapterCompletion } from '~/providers/TutorialChapterCompletionProvider';
 import { BoxLink } from '~/ui/components/BoxLink';
@@ -13,6 +14,7 @@ type ProgressTrackerProps = {
   currentChapterIndex: number;
   name: string;
   summary: string;
+  chapterTitle?: string;
   nextChapterTitle?: string;
   nextChapterDescription?: string;
   nextChapterLink?: string;
@@ -22,10 +24,12 @@ export function ProgressTracker({
   currentChapterIndex,
   name,
   summary,
+  chapterTitle,
   nextChapterTitle,
   nextChapterDescription,
   nextChapterLink,
 }: ProgressTrackerProps) {
+  const intl = useIntl();
   const {
     chapters,
     setChapters,
@@ -66,7 +70,7 @@ export function ProgressTracker({
         <div className="flex flex-col items-center justify-center gap-2">
           <p className="flex items-center text-center heading-lg text-default">
             <BookOpen02Icon className="mr-2 size-6! text-icon-secondary max-md:hidden" />{' '}
-            {currentChapter.title}
+            {chapterTitle ?? currentChapter.title}
           </p>
           <p className="max-w-[60ch] pb-2 text-center leading-normal text-secondary">{summary}</p>
         </div>
@@ -74,16 +78,25 @@ export function ProgressTracker({
           <Checkbox
             id={`chapter-${currentChapterIndex}`}
             checked={currentChapter.completed}
-            label={
-              currentChapter.completed ? 'Mark this chapter as unread' : 'Mark this chapter as read'
-            }
+            label={intl.formatMessage({
+              id: currentChapter.completed
+                ? 'progressTrackerMarkAsUnread'
+                : 'progressTrackerMarkAsRead',
+            })}
             onChange={handleCheckboxChange}
           />
         </div>
       </div>
       <>
         <P className="my-4">{nextChapterDescription}</P>
-        <BoxLink href={nextChapterLink} title={`Next: ${nextChapterTitle}`} Icon={BookOpen02Icon} />
+        <BoxLink
+          href={nextChapterLink}
+          title={intl.formatMessage(
+            { id: 'progressTrackerNext' },
+            { title: nextChapterTitle ?? '' }
+          )}
+          Icon={BookOpen02Icon}
+        />
       </>
     </>
   );
diff --git a/docs/ui/components/Sidebar/SidebarGroup.tsx b/docs/ui/components/Sidebar/SidebarGroup.tsx
index 0539c7bfaf1949..76623e02272c52 100644
--- a/docs/ui/components/Sidebar/SidebarGroup.tsx
+++ b/docs/ui/components/Sidebar/SidebarGroup.tsx
@@ -48,7 +48,7 @@ export const SidebarGroup = ({ route, parentRoute }: SidebarNodeProps) => {
   const router = useRouter();
 
   const title = route.sidebarTitle ?? route.name;
-  const Icon = route.hideIcon ? undefined : getIconElement(title);
+  const Icon = route.hideIcon ? undefined : getIconElement(route.name);
 
   const tutorialTracks: Record<
     string,
diff --git a/docs/ui/components/Sidebar/SidebarHead.tsx b/docs/ui/components/Sidebar/SidebarHead.tsx
index 81c4cc7ddd4413..ecf40eb230ecbf 100644
--- a/docs/ui/components/Sidebar/SidebarHead.tsx
+++ b/docs/ui/components/Sidebar/SidebarHead.tsx
@@ -5,6 +5,7 @@ import { GraduationHat02DuotoneIcon } from '@expo/styleguide-icons/duotone/Gradu
 import { Home02DuotoneIcon } from '@expo/styleguide-icons/duotone/Home02DuotoneIcon';
 import { Stars02DuotoneIcon } from '@expo/styleguide-icons/duotone/Stars02DuotoneIcon';
 import { ArrowLeftIcon } from '@expo/styleguide-icons/outline/ArrowLeftIcon';
+import { useIntl } from 'react-intl';
 
 import { shouldShowFeaturePreviewLink } from '~/constants/FeatureFlags.cjs';
 import { Search } from '~/ui/components/Search';
@@ -17,13 +18,19 @@ type SidebarHeadProps = {
 };
 
 export const SidebarHead = ({ sidebarActiveGroup }: SidebarHeadProps) => {
+  const intl = useIntl();
   const isPreviewVisible = shouldShowFeaturePreviewLink();
+  const homeLabel = intl.formatMessage({ id: 'navHome' });
+  const guidesLabel = intl.formatMessage({ id: 'navGuides' });
+  const easLabel = intl.formatMessage({ id: 'navEas' });
+  const referenceLabel = intl.formatMessage({ id: 'navReference' });
+  const learnLabel = intl.formatMessage({ id: 'navLearn' });
   const mainSectionMap: Record<string, string> = {
-    home: 'Home',
-    general: 'Guides',
+    home: homeLabel,
+    general: guidesLabel,
     eas: 'Expo Application Services',
-    reference: 'Reference',
-    learn: 'Learn',
+    reference: referenceLabel,
+    learn: learnLabel,
   };
   const mainSection = mainSectionMap[sidebarActiveGroup];
 
@@ -52,43 +59,43 @@ export const SidebarHead = ({ sidebarActiveGroup }: SidebarHeadProps) => {
           )}>
           <SidebarSingleEntry
             href="/"
-            title="Home"
+            title={homeLabel}
             Icon={Home02DuotoneIcon}
             isActive={sidebarActiveGroup === 'home'}
             allowCompactDisplay
-            mainSection="Home"
+            mainSection={homeLabel}
           />
           <SidebarSingleEntry
             href="/guides/overview/"
-            title="Guides"
+            title={guidesLabel}
             Icon={BookOpen02DuotoneIcon}
             isActive={sidebarActiveGroup === 'general'}
             allowCompactDisplay
-            mainSection="Guides"
+            mainSection={guidesLabel}
           />
           <SidebarSingleEntry
             href="/eas/"
-            title="EAS"
+            title={easLabel}
             Icon={PlanEnterpriseIcon}
             isActive={sidebarActiveGroup === 'eas'}
             allowCompactDisplay
-            mainSection="EAS"
+            mainSection={easLabel}
           />
           <SidebarSingleEntry
             href="/versions/latest/"
-            title="Reference"
+            title={referenceLabel}
             Icon={DocsLogo}
             isActive={sidebarActiveGroup === 'reference'}
             allowCompactDisplay
-            mainSection="Reference"
+            mainSection={referenceLabel}
           />
           <SidebarSingleEntry
             href="/tutorial/overview/"
-            title="Learn"
+            title={learnLabel}
             Icon={GraduationHat02DuotoneIcon}
             isActive={sidebarActiveGroup === 'learn'}
             allowCompactDisplay
-            mainSection="Learn"
+            mainSection={learnLabel}
           />
           {isPreviewVisible && (
             <SidebarSingleEntry
diff --git a/docs/ui/components/Snippet/SnippetExpandOverlay.tsx b/docs/ui/components/Snippet/SnippetExpandOverlay.tsx
index 16fe607fa1f7cd..c44fa241edb507 100644
--- a/docs/ui/components/Snippet/SnippetExpandOverlay.tsx
+++ b/docs/ui/components/Snippet/SnippetExpandOverlay.tsx
@@ -1,4 +1,5 @@
 import { Button, ButtonProps } from '@expo/styleguide';
+import { FormattedMessage } from 'react-intl';
 
 type Props = {
   onClick?: ButtonProps['onClick'];
@@ -8,7 +9,7 @@ export function SnippetExpandOverlay({ onClick }: Props) {
   return (
     <div className="sticky bottom-0 left-0 flex w-full bg-linear-to-b from-transparent to-default p-6">
       <Button theme="secondary" onClick={onClick} className="mx-auto asset-sm-shadow">
-        Show more
+        <FormattedMessage id="showMore" defaultMessage="Show More" />
       </Button>
     </div>
   );
diff --git a/docs/ui/components/Snippet/actions/CopyAction.tsx b/docs/ui/components/Snippet/actions/CopyAction.tsx
index 97b3533ec68cdb..cfa455af9d3b4f 100644
--- a/docs/ui/components/Snippet/actions/CopyAction.tsx
+++ b/docs/ui/components/Snippet/actions/CopyAction.tsx
@@ -1,5 +1,6 @@
 import { ClipboardIcon } from '@expo/styleguide-icons/outline/ClipboardIcon';
 import { useState } from 'react';
+import { useIntl } from 'react-intl';
 
 import { SnippetAction, SnippetActionProps } from '../SnippetAction';
 
@@ -8,6 +9,7 @@ type CopyActionProps = SnippetActionProps & {
 };
 
 export const CopyAction = ({ text, ...rest }: CopyActionProps) => {
+  const intl = useIntl();
   const [copyDone, setCopyDone] = useState(false);
 
   const onCopyClick = () => {
@@ -26,7 +28,7 @@ export const CopyAction = ({ text, ...rest }: CopyActionProps) => {
       className="max-sm:gap-0 [&_p]:max-sm:hidden"
       aria-label="Copy content"
       {...rest}>
-      {copyDone ? 'Copied!' : 'Copy'}
+      {intl.formatMessage({ id: copyDone ? 'codeCopied' : 'codeCopy' })}
     </SnippetAction>
   );
 };
diff --git a/docs/ui/components/Snippet/actions/SettingsAction.tsx b/docs/ui/components/Snippet/actions/SettingsAction.tsx
index 2ca5f5b8eff9d7..97cc6870bbc26d 100644
--- a/docs/ui/components/Snippet/actions/SettingsAction.tsx
+++ b/docs/ui/components/Snippet/actions/SettingsAction.tsx
@@ -1,5 +1,6 @@
 import { Themes } from '@expo/styleguide';
 import { DotsVerticalIcon } from '@expo/styleguide-icons/outline/DotsVerticalIcon';
+import { useIntl } from 'react-intl';
 
 import { useCodeBlockSettingsContext } from '~/providers/CodeBlockSettingsProvider';
 import * as Dropdown from '~/ui/components/Dropdown';
@@ -8,6 +9,7 @@ import { Checkbox } from '../../Form/Checkbox';
 import { SnippetAction, SnippetActionProps } from '../SnippetAction';
 
 export const SettingsAction = ({ ...rest }: SnippetActionProps) => {
+  const intl = useIntl();
   const { preferredTheme, setPreferredTheme, wordWrap, setWordWrap } =
     useCodeBlockSettingsContext();
 
@@ -35,7 +37,7 @@ export const SettingsAction = ({ ...rest }: SnippetActionProps) => {
       }>
       <Dropdown.Item
         preventAutoClose
-        label="Use dark theme"
+        label={intl.formatMessage({ id: 'codeUseDarkTheme' })}
         onSelect={onThemeChange}
         rightSlot={
           <Checkbox
@@ -47,7 +49,7 @@ export const SettingsAction = ({ ...rest }: SnippetActionProps) => {
       />
       <Dropdown.Item
         preventAutoClose
-        label="Wrap long lines"
+        label={intl.formatMessage({ id: 'codeWrapLines' })}
         onSelect={onWordWrapChange}
         rightSlot={<Checkbox checked={wordWrap} readOnly className="pointer-events-none" />}
       />
diff --git a/docs/ui/components/TableOfContents/TableOfContents.tsx b/docs/ui/components/TableOfContents/TableOfContents.tsx
index 976ed8db4e41d0..9157687c13f20e 100644
--- a/docs/ui/components/TableOfContents/TableOfContents.tsx
+++ b/docs/ui/components/TableOfContents/TableOfContents.tsx
@@ -14,6 +14,7 @@ import {
   useEffect,
   SyntheticEvent,
 } from 'react';
+import { useIntl } from 'react-intl';
 
 import { BASE_HEADING_LEVEL, Heading } from '~/common/headingManager';
 import { isVersionedPath } from '~/common/routes';
@@ -44,6 +45,7 @@ export const TableOfContents = forwardRef<
   HeadingManagerProps & TableOfContentsProps
 >(({ headingManager: { headings }, contentRef, selfRef, maxNestingDepth = 4 }, ref) => {
   const router = useRouter();
+  const intl = useIntl();
   const isVersioned = isVersionedPath(router?.pathname ?? '');
   const [activeSlug, setActiveSlug] = useState<string | null>(null);
   const [activeParentSlug, setActiveParentSlug] = useState<string | null>(null);
@@ -424,7 +426,7 @@ export const TableOfContents = forwardRef<
           'absolute z-100 -mt-13 -ml-6 flex min-h-8 w-68 select-none',
           'items-center gap-2 bg-linear-to-b from-default from-80% to-transparent py-3 pl-6'
         )}>
-        <LayoutAlt03Icon className="icon-sm" /> On this page
+        <LayoutAlt03Icon className="icon-sm" /> {intl.formatMessage({ id: 'onThisPage' })}
         <Button
           theme="quaternary"
           size="xs"
diff --git a/docs/ui/components/TableOfContents/__snapshots__/TableOfContents.test.tsx.snap b/docs/ui/components/TableOfContents/__snapshots__/TableOfContents.test.tsx.snap
index 1c1267523e20d7..585b2d01044c23 100644
--- a/docs/ui/components/TableOfContents/__snapshots__/TableOfContents.test.tsx.snap
+++ b/docs/ui/components/TableOfContents/__snapshots__/TableOfContents.test.tsx.snap
@@ -29,7 +29,8 @@ exports[`TableOfContents correctly matches snapshot 1`] = `
           />
         </g>
       </svg>
-       On this page
+       
+      On this page
       <button
         class="cursor-pointer inline-flex border border-solid rounded-full font-medium items-center whitespace-nowrap gap-1.5 h-8 text-xs border-button-quaternary bg-button-quaternary text-button-quaternary shadow-none hocus:bg-button-quaternary-hover active:scale-98 mr-2 ml-auto px-2 transition-opacity duration-300 pointer-events-none opacity-0"
         type="button"
diff --git a/packages/@expo/router-server/CHANGELOG.md b/packages/@expo/router-server/CHANGELOG.md
index 7f0a6fbffa5577..d26b7c8e78a492 100644
--- a/packages/@expo/router-server/CHANGELOG.md
+++ b/packages/@expo/router-server/CHANGELOG.md
@@ -9,6 +9,7 @@
 ### 🐛 Bug fixes
 
 - Use favicon from app config when SSR is enabled ([#46570](https://github.com/expo/expo/pull/46570) by [@hassankhan](https://github.com/hassankhan))
+- Wrap `getStaticContent` and `getStreamingContent` in `expo-font`'s per-render `withServerContext` scope so concurrent server renders cannot share font registry state. ([#46669](https://github.com/expo/expo/pull/46669) by [@hassankhan](https://github.com/hassankhan))
 
 ### 💡 Others
 
diff --git a/packages/@expo/router-server/build/server/renderStreamingContent.d.ts.map b/packages/@expo/router-server/build/server/renderStreamingContent.d.ts.map
index 114262803222c1..b1f5e965182bb8 100644
--- a/packages/@expo/router-server/build/server/renderStreamingContent.d.ts.map
+++ b/packages/@expo/router-server/build/server/renderStreamingContent.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"renderStreamingContent.d.ts","sourceRoot":"","sources":["../../src/server/renderStreamingContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0B9C,MAAM,MAAM,0BAA0B,GAAG;IACvC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,GAAG,CAAC;QACX,oEAAoE;QACpE,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,SAAS,EAAE,SAAS,EAAE,CAAC;KACxB,GAAG,IAAI,CAAC;IACT,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,MAAM,CAAC,EAAE;QACP,GAAG,EAAE,MAAM,EAAE,CAAC;QACd,4EAA4E;QAC5E,SAAS,CAAC,EAAE;YACV,MAAM,EAAE,MAAM,CAAC;YACf,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,EAAE,CAAC;QACJ,EAAE,EAAE,MAAM,EAAE,CAAC;QACb,+EAA+E;QAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAkDF;;;GAGG;AACH,wBAAsB,mBAAmB,CACvC,QAAQ,EAAE,GAAG,EACb,OAAO,CAAC,EAAE,0BAA0B,GACnC,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CA8CrC;AAED,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC"}
\ No newline at end of file
+{"version":3,"file":"renderStreamingContent.d.ts","sourceRoot":"","sources":["../../src/server/renderStreamingContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0B9C,MAAM,MAAM,0BAA0B,GAAG;IACvC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,GAAG,CAAC;QACX,oEAAoE;QACpE,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,SAAS,EAAE,SAAS,EAAE,CAAC;KACxB,GAAG,IAAI,CAAC;IACT,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,MAAM,CAAC,EAAE;QACP,GAAG,EAAE,MAAM,EAAE,CAAC;QACd,4EAA4E;QAC5E,SAAS,CAAC,EAAE;YACV,MAAM,EAAE,MAAM,CAAC;YACf,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,EAAE,CAAC;QACJ,EAAE,EAAE,MAAM,EAAE,CAAC;QACb,+EAA+E;QAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAgDF;;;GAGG;AACH,wBAAsB,mBAAmB,CACvC,QAAQ,EAAE,GAAG,EACb,OAAO,CAAC,EAAE,0BAA0B,GACnC,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAkDrC;AAED,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC"}
\ No newline at end of file
diff --git a/packages/@expo/router-server/build/server/renderStreamingContent.js b/packages/@expo/router-server/build/server/renderStreamingContent.js
index ec6f7f698359c7..a7a079776f3d76 100644
--- a/packages/@expo/router-server/build/server/renderStreamingContent.js
+++ b/packages/@expo/router-server/build/server/renderStreamingContent.js
@@ -81,9 +81,6 @@ function prepareRenderContext(location, options) {
         context: _ctx_1.ctx,
         wrapper: ({ children }) => ((0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsx)("div", { id: "root", children: children }) })),
     });
-    // Clear any existing static resources from the global scope to attempt to prevent leaking between pages.
-    // This could break if pages are rendered in parallel or if fonts are loaded outside of the React tree
-    Font.resetServerContext();
     // This MUST be run before `ReactDOMServer.renderToString` to prevent
     // "Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported."
     resetReactNavigationContexts();
@@ -96,6 +93,8 @@ function prepareRenderContext(location, options) {
     return { headContext, element, getStyleElement, loadedData };
 }
 function FontResources() {
+    // NOTE(@hassankhan): runs once during the shell pass; fonts loaded inside late-resolving
+    // Suspense boundaries register after this and won't be emitted.
     const descriptors = Font.getServerResourceDescriptors();
     debug(`Pushing fonts: (count: ${descriptors.length})`, descriptors);
     return (0, react_1.createInjectedFontsAsNodes)(descriptors);
@@ -105,35 +104,37 @@ function FontResources() {
  * that emits the full HTML document with head injections applied.
  */
 async function getStreamingContent(location, options) {
-    const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(location, options);
-    const { headNodes: headCssNodes } = (0, react_1.createInjectedCssAsNodes)(options?.assets?.css ?? []);
-    const { headNodes: inlineCssNodes } = (0, react_1.createInjectedInlineCssAsNodes)(options?.assets?.inlineCss);
-    const faviconNode = options?.assets?.favicon
-        ? (0, react_1.createFaviconAsNode)(options?.assets?.favicon)
-        : undefined;
-    const serverDocumentData = {
-        headNodes: [
-            ...(options?.metadata?.headNodes ?? []),
-            faviconNode,
-            getStyleElement({ key: 'rnw-style-element' }),
-            ...(headCssNodes ?? []),
-            ...(inlineCssNodes ?? []),
-        ].filter(Boolean),
-        bodyNodes: [(0, jsx_runtime_1.jsx)(FontResources, {}, "font-resources")],
-    };
-    return await server_2.default.renderToReadableStream((0, jsx_runtime_1.jsx)(server_1.ServerDocument, { data: serverDocumentData, children: (0, jsx_runtime_1.jsx)(head_1.default.Provider, { context: headContext, children: (0, jsx_runtime_1.jsx)(static_1.InnerRoot, { loadedData: loadedData, children: element }) }) }), {
-        // TODO(@hassankhan): Experiment and see if we can calculate a better default
-        // We're doubling the default here so non-JavaScript renders show some content
-        progressiveChunkSize: 12800 * 2,
-        bootstrapScriptContent: (0, react_1.getBootstrapContents)({ hydrate: true, loadedData }),
-        bootstrapScripts: options?.assets?.js,
-        signal: options?.request?.signal,
-        onError(error) {
-            if (options?.request?.signal.aborted) {
-                return;
-            }
-            console.error('SSR streaming render error:', error);
-        },
+    return Font.withServerContext(() => {
+        const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(location, options);
+        const { headNodes: headCssNodes } = (0, react_1.createInjectedCssAsNodes)(options?.assets?.css ?? []);
+        const { headNodes: inlineCssNodes } = (0, react_1.createInjectedInlineCssAsNodes)(options?.assets?.inlineCss);
+        const faviconNode = options?.assets?.favicon
+            ? (0, react_1.createFaviconAsNode)(options?.assets?.favicon)
+            : undefined;
+        const serverDocumentData = {
+            headNodes: [
+                ...(options?.metadata?.headNodes ?? []),
+                faviconNode,
+                getStyleElement({ key: 'rnw-style-element' }),
+                ...(headCssNodes ?? []),
+                ...(inlineCssNodes ?? []),
+            ].filter(Boolean),
+            bodyNodes: [(0, jsx_runtime_1.jsx)(FontResources, {}, "font-resources")],
+        };
+        return server_2.default.renderToReadableStream((0, jsx_runtime_1.jsx)(server_1.ServerDocument, { data: serverDocumentData, children: (0, jsx_runtime_1.jsx)(head_1.default.Provider, { context: headContext, children: (0, jsx_runtime_1.jsx)(static_1.InnerRoot, { loadedData: loadedData, children: element }) }) }), {
+            // TODO(@hassankhan): Experiment and see if we can calculate a better default
+            // We're doubling the default here so non-JavaScript renders show some content
+            progressiveChunkSize: 12800 * 2,
+            bootstrapScriptContent: (0, react_1.getBootstrapContents)({ hydrate: true, loadedData }),
+            bootstrapScripts: options?.assets?.js,
+            signal: options?.request?.signal,
+            onError(error) {
+                if (options?.request?.signal.aborted) {
+                    return;
+                }
+                console.error('SSR streaming render error:', error);
+            },
+        });
     });
 }
 var metadata_1 = require("./metadata");
diff --git a/packages/@expo/router-server/build/server/renderStreamingContent.js.map b/packages/@expo/router-server/build/server/renderStreamingContent.js.map
index f84251298fc040..5a916e62cbddc6 100644
--- a/packages/@expo/router-server/build/server/renderStreamingContent.js.map
+++ b/packages/@expo/router-server/build/server/renderStreamingContent.js.map
@@ -1 +1 @@
-{"version":3,"file":"renderStreamingContent.js","sourceRoot":"","sources":["../../src/server/renderStreamingContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqHA,kDAiDC;;AAtKD;;;;;GAKG;AACH,kEAAkE;AAClE,gCAAgC;AAEhC,6DAA+C;AAC/C,6CAAuC;AACvC,2CAAuC;AACvC,4DAAoC;AACpC,wDAA6D;AAC7D,wDAAqF;AAErF,8DAA8C;AAE9C,iEAA8D;AAC9D,0CAA6C;AAC7C,0CAMwB;AAExB,MAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,2CAA2C,CAAC,CAAC;AAEvE,SAAS,4BAA4B;IACnC,iDAAiD;IACjD,0JAA0J;IAE1J,8FAA8F;IAC9F,yJAAyJ;IACzJ,MAAM,QAAQ,GAAG,uCAAuC,CAAC;IACxD,UAAkB,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,EAA8B,CAAC;AACxE,CAAC;AA2BD;;;GAGG;AACH,SAAS,oBAAoB,CAAC,QAAa,EAAE,OAAoC;IAC/E,MAAM,WAAW,GAAqB,EAAE,CAAC;IACzC,MAAM,IAAI,GAAG,IAAA,mCAAgB,GAAE,CAAC;IAEhC,MAAM;IACJ,+DAA+D;IAC/D,kDAAkD;IAClD,OAAO,EACP,eAAe,GAChB,GAAG,IAAA,oCAA2B,EAAC,sBAAQ,EAAE;QACxC,QAAQ;QACR,OAAO,EAAE,UAAG;QACZ,OAAO,EAAE,CAAC,EAAE,QAAQ,EAA6B,EAAE,EAAE,CAAC,CACpD,uBAAC,IAAI,cACH,gCAAK,EAAE,EAAC,MAAM,YAAE,QAAQ,GAAO,GAC1B,CACR;KACF,CAAC,CAAC;IAEH,yGAAyG;IACzG,sGAAsG;IACtG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAE1B,qEAAqE;IACrE,0HAA0H;IAC1H,4BAA4B,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhF,MAAM,UAAU,GAAG,SAAS;QAC1B,CAAC,CAAC;YACE,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,IAAI,IAAI;SAC3C;QACH,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC;AAC/D,CAAC;AAED,SAAS,aAAa;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACxD,KAAK,CAAC,0BAA0B,WAAW,CAAC,MAAM,GAAG,EAAE,WAAW,CAAC,CAAC;IACpE,OAAO,IAAA,kCAA0B,EAAC,WAAW,CAAC,CAAC;AACjD,CAAC;AAED;;;GAGG;AACI,KAAK,UAAU,mBAAmB,CACvC,QAAa,EACb,OAAoC;IAEpC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,oBAAoB,CAChF,QAAQ,EACR,OAAO,CACR,CAAC;IAEF,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,IAAA,gCAAwB,EAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;IACzF,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,IAAA,sCAA8B,EAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IACjG,MAAM,WAAW,GAAG,OAAO,EAAE,MAAM,EAAE,OAAO;QAC1C,CAAC,CAAC,IAAA,2BAAmB,EAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC;QAC/C,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,kBAAkB,GAAG;QACzB,SAAS,EAAE;YACT,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,IAAI,EAAE,CAAC;YACvC,WAAW;YACX,eAAe,CAAC,EAAE,GAAG,EAAE,mBAAmB,EAAE,CAAC;YAC7C,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC;YACvB,GAAG,CAAC,cAAc,IAAI,EAAE,CAAC;SAC1B,CAAC,MAAM,CAAC,OAAO,CAAC;QACjB,SAAS,EAAE,CAAC,uBAAC,aAAa,MAAK,gBAAgB,CAAG,CAAC;KACpD,CAAC;IAEF,OAAO,MAAM,gBAAc,CAAC,sBAAsB,CAChD,uBAAC,uBAAc,IAAC,IAAI,EAAE,kBAAkB,YAEtC,uBAAC,cAAI,CAAC,QAAQ,IAAC,OAAO,EAAE,WAAW,YACjC,uBAAC,kBAAS,IAAC,UAAU,EAAE,UAAU,YAAG,OAAO,GAAa,GAC1C,GACD,EACjB;QACE,6EAA6E;QAC7E,8EAA8E;QAC9E,oBAAoB,EAAE,KAAK,GAAG,CAAC;QAC/B,sBAAsB,EAAE,IAAA,4BAAoB,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;QAC3E,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM;QAChC,OAAO,CAAC,KAAK;YACX,IAAI,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;gBACrC,OAAO;YACT,CAAC;YAED,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;QACtD,CAAC;KACF,CACF,CAAC;AACJ,CAAC;AAED,uCAA6C;AAApC,2GAAA,eAAe,OAAA","sourcesContent":["/**\n * Copyright © 2026 650 Industries.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n// NOTE(@hassankhan): disable when this file is its own entrypoint\n// import '@expo/metro-runtime';\n\nimport * as Font from 'expo-font/build/server';\nimport { ExpoRoot } from 'expo-router';\nimport { ctx } from 'expo-router/_ctx';\nimport Head from 'expo-router/head';\nimport { ServerDocument } from 'expo-router/internal/server';\nimport { InnerRoot, registerStaticRootComponent } from 'expo-router/internal/static';\nimport React, { type ReactNode } from 'react';\nimport ReactDOMServer from 'react-dom/server';\n\nimport { getRootComponent } from '../static/getRootComponent';\nimport { createDebug } from '../utils/debug';\nimport {\n  createFaviconAsNode,\n  createInjectedCssAsNodes,\n  createInjectedFontsAsNodes,\n  createInjectedInlineCssAsNodes,\n  getBootstrapContents,\n} from '../utils/react';\n\nconst debug = createDebug('expo:router:server:renderStreamingContent');\n\nfunction resetReactNavigationContexts() {\n  // https://github.com/expo/router/discussions/588\n  // https://github.com/react-navigation/react-navigation/blob/9fe34b445fcb86e5666f61e144007d7540f014fa/packages/elements/src/getNamedContext.tsx#LL3C1-L4C1\n\n  // React Navigation is storing providers in a global, this is fine for the first static render\n  // but subsequent static renders of Stack or Tabs will cause React to throw a warning. To prevent this warning, we'll reset the globals before rendering.\n  const contexts = '__react_navigation__elements_contexts';\n  (globalThis as any)[contexts] = new Map<string, React.Context<any>>();\n}\n\n// NOTE(@hassankhan): Keep in sync with `expo-server/src/manifest.ts`\nexport type GetStreamingContentOptions = {\n  loader?: {\n    data?: any;\n    /** Unique key for the route. Derived from the route's contextKey */\n    key: string;\n  };\n  metadata?: {\n    headNodes: ReactNode[];\n  } | null;\n  request?: Request;\n  /** Assets for hydration bundles and development-only inline CSS. */\n  assets?: {\n    css: string[];\n    /** CSS source to inline into the document head, used by development SSR. */\n    inlineCss?: {\n      source: string;\n      hmrId?: string;\n    }[];\n    js: string[];\n    /** Public href of a favicon generated from `web.favicon` in the app config. */\n    favicon?: string;\n  };\n};\n\n/**\n * Shared setup for both `getStaticContent()` and `getStreamingContent()`. Creates the React element\n * tree, resets server contexts, and computes loader data.\n */\nfunction prepareRenderContext(location: URL, options?: GetStreamingContentOptions) {\n  const headContext: { helmet?: any } = {};\n  const Root = getRootComponent();\n\n  const {\n    // NOTE: The `element` that's returned adds two extra Views and\n    // the seemingly unused `RootTagContext.Provider`.\n    element,\n    getStyleElement,\n  } = registerStaticRootComponent(ExpoRoot, {\n    location,\n    context: ctx,\n    wrapper: ({ children }: React.ComponentProps<any>) => (\n      <Root>\n        <div id=\"root\">{children}</div>\n      </Root>\n    ),\n  });\n\n  // Clear any existing static resources from the global scope to attempt to prevent leaking between pages.\n  // This could break if pages are rendered in parallel or if fonts are loaded outside of the React tree\n  Font.resetServerContext();\n\n  // This MUST be run before `ReactDOMServer.renderToString` to prevent\n  // \"Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.\"\n  resetReactNavigationContexts();\n\n  const loaderKey = options?.loader ? options.loader.key + location.search : null;\n\n  const loadedData = loaderKey\n    ? {\n        [loaderKey]: options?.loader?.data ?? null,\n      }\n    : null;\n\n  return { headContext, element, getStyleElement, loadedData };\n}\n\nfunction FontResources() {\n  const descriptors = Font.getServerResourceDescriptors();\n  debug(`Pushing fonts: (count: ${descriptors.length})`, descriptors);\n  return createInjectedFontsAsNodes(descriptors);\n}\n\n/**\n * Streaming SSR renderer using `renderToReadableStream`. Returns a web `ReadableStream`\n * that emits the full HTML document with head injections applied.\n */\nexport async function getStreamingContent(\n  location: URL,\n  options?: GetStreamingContentOptions\n): Promise<ReadableStream<Uint8Array>> {\n  const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(\n    location,\n    options\n  );\n\n  const { headNodes: headCssNodes } = createInjectedCssAsNodes(options?.assets?.css ?? []);\n  const { headNodes: inlineCssNodes } = createInjectedInlineCssAsNodes(options?.assets?.inlineCss);\n  const faviconNode = options?.assets?.favicon\n    ? createFaviconAsNode(options?.assets?.favicon)\n    : undefined;\n\n  const serverDocumentData = {\n    headNodes: [\n      ...(options?.metadata?.headNodes ?? []),\n      faviconNode,\n      getStyleElement({ key: 'rnw-style-element' }),\n      ...(headCssNodes ?? []),\n      ...(inlineCssNodes ?? []),\n    ].filter(Boolean),\n    bodyNodes: [<FontResources key=\"font-resources\" />],\n  };\n\n  return await ReactDOMServer.renderToReadableStream(\n    <ServerDocument data={serverDocumentData}>\n      {/* TODO(@hassankhan): Remove `<Head.Provider>` when `unstable_useServerRendering` is stabilized */}\n      <Head.Provider context={headContext}>\n        <InnerRoot loadedData={loadedData}>{element}</InnerRoot>\n      </Head.Provider>\n    </ServerDocument>,\n    {\n      // TODO(@hassankhan): Experiment and see if we can calculate a better default\n      // We're doubling the default here so non-JavaScript renders show some content\n      progressiveChunkSize: 12800 * 2,\n      bootstrapScriptContent: getBootstrapContents({ hydrate: true, loadedData }),\n      bootstrapScripts: options?.assets?.js,\n      signal: options?.request?.signal,\n      onError(error) {\n        if (options?.request?.signal.aborted) {\n          return;\n        }\n\n        console.error('SSR streaming render error:', error);\n      },\n    }\n  );\n}\n\nexport { resolveMetadata } from './metadata';\n"]}
\ No newline at end of file
+{"version":3,"file":"renderStreamingContent.js","sourceRoot":"","sources":["../../src/server/renderStreamingContent.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright © 2026 650 Industries.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n// NOTE(@hassankhan): disable when this file is its own entrypoint\n// import '@expo/metro-runtime';\n\nimport * as Font from 'expo-font/build/server';\nimport { ExpoRoot } from 'expo-router';\nimport { ctx } from 'expo-router/_ctx';\nimport Head from 'expo-router/head';\nimport { ServerDocument } from 'expo-router/internal/server';\nimport { InnerRoot, registerStaticRootComponent } from 'expo-router/internal/static';\nimport React, { type ReactNode } from 'react';\nimport ReactDOMServer from 'react-dom/server';\n\nimport { getRootComponent } from '../static/getRootComponent';\nimport { createDebug } from '../utils/debug';\nimport {\n  createFaviconAsNode,\n  createInjectedCssAsNodes,\n  createInjectedFontsAsNodes,\n  createInjectedInlineCssAsNodes,\n  getBootstrapContents,\n} from '../utils/react';\n\nconst debug = createDebug('expo:router:server:renderStreamingContent');\n\nfunction resetReactNavigationContexts() {\n  // https://github.com/expo/router/discussions/588\n  // https://github.com/react-navigation/react-navigation/blob/9fe34b445fcb86e5666f61e144007d7540f014fa/packages/elements/src/getNamedContext.tsx#LL3C1-L4C1\n\n  // React Navigation is storing providers in a global, this is fine for the first static render\n  // but subsequent static renders of Stack or Tabs will cause React to throw a warning. To prevent this warning, we'll reset the globals before rendering.\n  const contexts = '__react_navigation__elements_contexts';\n  (globalThis as any)[contexts] = new Map<string, React.Context<any>>();\n}\n\n// NOTE(@hassankhan): Keep in sync with `expo-server/src/manifest.ts`\nexport type GetStreamingContentOptions = {\n  loader?: {\n    data?: any;\n    /** Unique key for the route. Derived from the route's contextKey */\n    key: string;\n  };\n  metadata?: {\n    headNodes: ReactNode[];\n  } | null;\n  request?: Request;\n  /** Assets for hydration bundles and development-only inline CSS. */\n  assets?: {\n    css: string[];\n    /** CSS source to inline into the document head, used by development SSR. */\n    inlineCss?: {\n      source: string;\n      hmrId?: string;\n    }[];\n    js: string[];\n    /** Public href of a favicon generated from `web.favicon` in the app config. */\n    favicon?: string;\n  };\n};\n\n/**\n * Shared setup for both `getStaticContent()` and `getStreamingContent()`. Creates the React element\n * tree, resets server contexts, and computes loader data.\n */\nfunction prepareRenderContext(location: URL, options?: GetStreamingContentOptions) {\n  const headContext: { helmet?: any } = {};\n  const Root = getRootComponent();\n\n  const {\n    // NOTE: The `element` that's returned adds two extra Views and\n    // the seemingly unused `RootTagContext.Provider`.\n    element,\n    getStyleElement,\n  } = registerStaticRootComponent(ExpoRoot, {\n    location,\n    context: ctx,\n    wrapper: ({ children }: React.ComponentProps<any>) => (\n      <Root>\n        <div id=\"root\">{children}</div>\n      </Root>\n    ),\n  });\n\n  // This MUST be run before `ReactDOMServer.renderToString` to prevent\n  // \"Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.\"\n  resetReactNavigationContexts();\n\n  const loaderKey = options?.loader ? options.loader.key + location.search : null;\n\n  const loadedData = loaderKey\n    ? {\n        [loaderKey]: options?.loader?.data ?? null,\n      }\n    : null;\n\n  return { headContext, element, getStyleElement, loadedData };\n}\n\nfunction FontResources() {\n  // NOTE(@hassankhan): runs once during the shell pass; fonts loaded inside late-resolving\n  // Suspense boundaries register after this and won't be emitted.\n  const descriptors = Font.getServerResourceDescriptors();\n  debug(`Pushing fonts: (count: ${descriptors.length})`, descriptors);\n  return createInjectedFontsAsNodes(descriptors);\n}\n\n/**\n * Streaming SSR renderer using `renderToReadableStream`. Returns a web `ReadableStream`\n * that emits the full HTML document with head injections applied.\n */\nexport async function getStreamingContent(\n  location: URL,\n  options?: GetStreamingContentOptions\n): Promise<ReadableStream<Uint8Array>> {\n  return Font.withServerContext(() => {\n    const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(\n      location,\n      options\n    );\n\n    const { headNodes: headCssNodes } = createInjectedCssAsNodes(options?.assets?.css ?? []);\n    const { headNodes: inlineCssNodes } = createInjectedInlineCssAsNodes(\n      options?.assets?.inlineCss\n    );\n    const faviconNode = options?.assets?.favicon\n      ? createFaviconAsNode(options?.assets?.favicon)\n      : undefined;\n\n    const serverDocumentData = {\n      headNodes: [\n        ...(options?.metadata?.headNodes ?? []),\n        faviconNode,\n        getStyleElement({ key: 'rnw-style-element' }),\n        ...(headCssNodes ?? []),\n        ...(inlineCssNodes ?? []),\n      ].filter(Boolean),\n      bodyNodes: [<FontResources key=\"font-resources\" />],\n    };\n\n    return ReactDOMServer.renderToReadableStream(\n      <ServerDocument data={serverDocumentData}>\n        {/* TODO(@hassankhan): Remove `<Head.Provider>` when `unstable_useServerRendering` is stabilized */}\n        <Head.Provider context={headContext}>\n          <InnerRoot loadedData={loadedData}>{element}</InnerRoot>\n        </Head.Provider>\n      </ServerDocument>,\n      {\n        // TODO(@hassankhan): Experiment and see if we can calculate a better default\n        // We're doubling the default here so non-JavaScript renders show some content\n        progressiveChunkSize: 12800 * 2,\n        bootstrapScriptContent: getBootstrapContents({ hydrate: true, loadedData }),\n        bootstrapScripts: options?.assets?.js,\n        signal: options?.request?.signal,\n        onError(error) {\n          if (options?.request?.signal.aborted) {\n            return;\n          }\n\n          console.error('SSR streaming render error:', error);\n        },\n      }\n    );\n  });\n}\n\nexport { resolveMetadata } from './metadata';\n"]}
\ No newline at end of file
diff --git a/packages/@expo/router-server/build/static/renderStaticContent.d.ts.map b/packages/@expo/router-server/build/static/renderStaticContent.d.ts.map
index de977a3d4ad9d9..71acb61991bf94 100644
--- a/packages/@expo/router-server/build/static/renderStaticContent.d.ts.map
+++ b/packages/@expo/router-server/build/static/renderStaticContent.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"renderStaticContent.d.ts","sourceRoot":"","sources":["../../src/static/renderStaticContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,qBAAqB,CAAC;AAgC7B,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,GAAG,CAAC;QACX,oEAAoE;QACpE,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,MAAM,CAAC,EAAE;QACP,GAAG,EAAE,MAAM,EAAE,CAAC;QACd,EAAE,EAAE,MAAM,EAAE,CAAC;QACb,+EAA+E;QAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AA4CF,wBAAsB,gBAAgB,CACpC,QAAQ,EAAE,GAAG,EACb,OAAO,CAAC,EAAE,uBAAuB,GAChC,OAAO,CAAC,MAAM,CAAC,CAiDjB;AAiBD,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAE,+BAA+B,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}
\ No newline at end of file
+{"version":3,"file":"renderStaticContent.d.ts","sourceRoot":"","sources":["../../src/static/renderStaticContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,qBAAqB,CAAC;AAgC7B,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,GAAG,CAAC;QACX,oEAAoE;QACpE,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,MAAM,CAAC,EAAE;QACP,GAAG,EAAE,MAAM,EAAE,CAAC;QACd,EAAE,EAAE,MAAM,EAAE,CAAC;QACb,+EAA+E;QAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAwCF,wBAAsB,gBAAgB,CACpC,QAAQ,EAAE,GAAG,EACb,OAAO,CAAC,EAAE,uBAAuB,GAChC,OAAO,CAAC,MAAM,CAAC,CAmDjB;AAiBD,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAE,+BAA+B,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}
\ No newline at end of file
diff --git a/packages/@expo/router-server/build/static/renderStaticContent.js b/packages/@expo/router-server/build/static/renderStaticContent.js
index 4c4294bdf4f92f..748a99e971118d 100644
--- a/packages/@expo/router-server/build/static/renderStaticContent.js
+++ b/packages/@expo/router-server/build/static/renderStaticContent.js
@@ -79,9 +79,6 @@ function prepareRenderContext(location, options) {
         context: _ctx_1.ctx,
         wrapper: ({ children }) => ((0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsx)("div", { id: "root", children: children }) })),
     });
-    // Clear any existing static resources from the global scope to attempt to prevent leaking between pages.
-    // This could break if pages are rendered in parallel or if fonts are loaded outside of the React tree
-    Font.resetServerContext();
     // This MUST be run before `ReactDOMServer.renderToString` to prevent
     // "Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported."
     resetReactNavigationContexts();
@@ -94,35 +91,37 @@ function prepareRenderContext(location, options) {
     return { headContext, element, getStyleElement, loadedData };
 }
 async function getStaticContent(location, options) {
-    const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(location, options);
-    const html = server_1.default.renderToString((0, jsx_runtime_1.jsx)(head_1.default.Provider, { context: headContext, children: (0, jsx_runtime_1.jsx)(static_1.InnerRoot, { loadedData: loadedData, children: element }) }));
-    // Eval the CSS after the HTML is rendered so that the CSS is in the same order
-    const css = server_1.default.renderToStaticMarkup(getStyleElement());
-    let output = mixHeadComponentsWithStaticResults(headContext.helmet, html);
-    output = output.replace('</head>', `${css}</head>`);
-    const fonts = Font.getServerResources();
-    debug(`Pushing static fonts: (count: ${fonts.length})`, fonts);
-    // Inject static fonts loaded with expo-font
-    output = output.replace('</head>', `${fonts.join('')}</head>`);
-    if (loadedData) {
-        output = output.replace('</head>', `${(0, html_1.createLoaderDataScriptAsString)(loadedData)}</head>`);
-    }
-    // Inject favicon link tag. Mirrors `assets.favicon` handling in `getStreamingContent`.
-    if (options?.assets?.favicon) {
-        output = output.replace('</head>', `${(0, html_1.createFaviconAsString)(options.assets.favicon)}</head>`);
-    }
-    // Inject hydration assets (JS/CSS bundles). Used in SSR mode
-    if (options?.assets) {
-        if (options.assets.css.length > 0) {
-            const injectedCSS = (0, html_1.createInjectedCssAsString)(options.assets.css);
-            output = output.replace('</head>', `${injectedCSS}\n</head>`);
+    return Font.withServerContext(() => {
+        const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(location, options);
+        const html = server_1.default.renderToString((0, jsx_runtime_1.jsx)(head_1.default.Provider, { context: headContext, children: (0, jsx_runtime_1.jsx)(static_1.InnerRoot, { loadedData: loadedData, children: element }) }));
+        // Eval the CSS after the HTML is rendered so that the CSS is in the same order
+        const css = server_1.default.renderToStaticMarkup(getStyleElement());
+        let output = mixHeadComponentsWithStaticResults(headContext.helmet, html);
+        output = output.replace('</head>', `${css}</head>`);
+        const fonts = Font.getServerResources();
+        debug(`Pushing static fonts: (count: ${fonts.length})`, fonts);
+        // Inject static fonts loaded with expo-font
+        output = output.replace('</head>', `${fonts.join('')}</head>`);
+        if (loadedData) {
+            output = output.replace('</head>', `${(0, html_1.createLoaderDataScriptAsString)(loadedData)}</head>`);
         }
-        if (options.assets.js.length > 0) {
-            // In non-streaming mode, use deferred scripts in the body
-            output = output.replace('</body>', `${(0, html_1.createInjectedScriptsAsString)(options.assets.js)}\n</body>`);
+        // Inject favicon link tag. Mirrors `assets.favicon` handling in `getStreamingContent`.
+        if (options?.assets?.favicon) {
+            output = output.replace('</head>', `${(0, html_1.createFaviconAsString)(options.assets.favicon)}</head>`);
         }
-    }
-    return '<!DOCTYPE html>' + output;
+        // Inject hydration assets (JS/CSS bundles). Used in SSR mode
+        if (options?.assets) {
+            if (options.assets.css.length > 0) {
+                const injectedCSS = (0, html_1.createInjectedCssAsString)(options.assets.css);
+                output = output.replace('</head>', `${injectedCSS}\n</head>`);
+            }
+            if (options.assets.js.length > 0) {
+                // In non-streaming mode, use deferred scripts in the body
+                output = output.replace('</body>', `${(0, html_1.createInjectedScriptsAsString)(options.assets.js)}\n</body>`);
+            }
+        }
+        return '<!DOCTYPE html>' + output;
+    });
 }
 function mixHeadComponentsWithStaticResults(helmet, html) {
     const { headTags, htmlAttributes, bodyAttributes } = (0, html_1.serializeHelmetToHtml)(helmet);
diff --git a/packages/@expo/router-server/build/static/renderStaticContent.js.map b/packages/@expo/router-server/build/static/renderStaticContent.js.map
index f1216a34721744..7fd20612a2209d 100644
--- a/packages/@expo/router-server/build/static/renderStaticContent.js.map
+++ b/packages/@expo/router-server/build/static/renderStaticContent.js.map
@@ -1 +1 @@
-{"version":3,"file":"renderStaticContent.js","sourceRoot":"","sources":["../../src/static/renderStaticContent.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright © 2026 650 Industries.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport '@expo/metro-runtime';\n\nimport * as Font from 'expo-font/build/server';\nimport { ExpoRoot } from 'expo-router';\nimport { ctx } from 'expo-router/_ctx';\nimport Head from 'expo-router/head';\nimport { InnerRoot, registerStaticRootComponent } from 'expo-router/internal/static';\nimport React from 'react';\nimport ReactDOMServer from 'react-dom/server';\n\nimport { getRootComponent } from './getRootComponent';\nimport { createDebug } from '../utils/debug';\nimport {\n  createFaviconAsString,\n  createInjectedCssAsString,\n  createInjectedScriptsAsString,\n  createLoaderDataScriptAsString,\n  serializeHelmetToHtml,\n} from '../utils/html';\n\nconst debug = createDebug('expo:router:server:renderStaticContent');\n\nfunction resetReactNavigationContexts() {\n  // https://github.com/expo/router/discussions/588\n  // https://github.com/react-navigation/react-navigation/blob/9fe34b445fcb86e5666f61e144007d7540f014fa/packages/elements/src/getNamedContext.tsx#LL3C1-L4C1\n\n  // React Navigation is storing providers in a global, this is fine for the first static render\n  // but subsequent static renders of Stack or Tabs will cause React to throw a warning. To prevent this warning, we'll reset the globals before rendering.\n  const contexts = '__react_navigation__elements_contexts';\n  (globalThis as any)[contexts] = new Map<string, React.Context<any>>();\n}\n\nexport type GetStaticContentOptions = {\n  loader?: {\n    data?: any;\n    /** Unique key for the route. Derived from the route's contextKey */\n    key: string;\n  };\n  request?: Request;\n  /** Asset manifest for hydration bundles (JS/CSS). Used in SSR. */\n  assets?: {\n    css: string[];\n    js: string[];\n    /** Public href of a favicon generated from `web.favicon` in the app config. */\n    favicon?: string;\n  };\n};\n\n/**\n * Shared setup for both `getStaticContent()` and `getStreamingContent()`. Creates the React element\n * tree, resets server contexts, and computes loader data.\n */\nfunction prepareRenderContext(location: URL, options?: GetStaticContentOptions) {\n  const headContext: { helmet?: any } = {};\n  const Root = getRootComponent();\n\n  const {\n    // NOTE: The `element` that's returned adds two extra Views and\n    // the seemingly unused `RootTagContext.Provider`.\n    element,\n    getStyleElement,\n  } = registerStaticRootComponent(ExpoRoot, {\n    location,\n    context: ctx,\n    wrapper: ({ children }: React.ComponentProps<any>) => (\n      <Root>\n        <div id=\"root\">{children}</div>\n      </Root>\n    ),\n  });\n\n  // Clear any existing static resources from the global scope to attempt to prevent leaking between pages.\n  // This could break if pages are rendered in parallel or if fonts are loaded outside of the React tree\n  Font.resetServerContext();\n\n  // This MUST be run before `ReactDOMServer.renderToString` to prevent\n  // \"Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.\"\n  resetReactNavigationContexts();\n\n  const loaderKey = options?.loader ? options.loader.key + location.search : null;\n\n  const loadedData = loaderKey\n    ? {\n        [loaderKey]: options?.loader?.data ?? null,\n      }\n    : null;\n\n  return { headContext, element, getStyleElement, loadedData };\n}\n\nexport async function getStaticContent(\n  location: URL,\n  options?: GetStaticContentOptions\n): Promise<string> {\n  const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(\n    location,\n    options\n  );\n\n  const html = ReactDOMServer.renderToString(\n    <Head.Provider context={headContext}>\n      <InnerRoot loadedData={loadedData}>{element}</InnerRoot>\n    </Head.Provider>\n  );\n\n  // Eval the CSS after the HTML is rendered so that the CSS is in the same order\n  const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());\n\n  let output = mixHeadComponentsWithStaticResults(headContext.helmet, html);\n\n  output = output.replace('</head>', `${css}</head>`);\n\n  const fonts = Font.getServerResources();\n  debug(`Pushing static fonts: (count: ${fonts.length})`, fonts);\n  // Inject static fonts loaded with expo-font\n  output = output.replace('</head>', `${fonts.join('')}</head>`);\n  if (loadedData) {\n    output = output.replace('</head>', `${createLoaderDataScriptAsString(loadedData)}</head>`);\n  }\n\n  // Inject favicon link tag. Mirrors `assets.favicon` handling in `getStreamingContent`.\n  if (options?.assets?.favicon) {\n    output = output.replace('</head>', `${createFaviconAsString(options.assets.favicon)}</head>`);\n  }\n\n  // Inject hydration assets (JS/CSS bundles). Used in SSR mode\n  if (options?.assets) {\n    if (options.assets.css.length > 0) {\n      const injectedCSS = createInjectedCssAsString(options.assets.css);\n      output = output.replace('</head>', `${injectedCSS}\\n</head>`);\n    }\n\n    if (options.assets.js.length > 0) {\n      // In non-streaming mode, use deferred scripts in the body\n      output = output.replace(\n        '</body>',\n        `${createInjectedScriptsAsString(options.assets.js)}\\n</body>`\n      );\n    }\n  }\n\n  return '<!DOCTYPE html>' + output;\n}\n\nfunction mixHeadComponentsWithStaticResults(helmet: any, html: string) {\n  const { headTags, htmlAttributes, bodyAttributes } = serializeHelmetToHtml(helmet);\n\n  if (headTags) {\n    html = html.replace('<head>', `<head>${headTags}`);\n  }\n\n  // attributes\n  html = html.replace('<html ', `<html ${htmlAttributes} `);\n  html = html.replace('<body ', `<body ${bodyAttributes} `);\n\n  return html;\n}\n\n// Re-export for use in server\nexport { getStreamingContent, resolveMetadata } from '../server/renderStreamingContent';\nexport { getBuildTimeServerManifestAsync, getManifest } from './getServerManifest';\n"]}
\ No newline at end of file
+{"version":3,"file":"renderStaticContent.js","sourceRoot":"","sources":["../../src/static/renderStaticContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA,4CAsDC;;AAlJD;;;;;GAKG;AACH,+BAA6B;AAE7B,6DAA+C;AAC/C,6CAAuC;AACvC,2CAAuC;AACvC,4DAAoC;AACpC,wDAAqF;AAErF,8DAA8C;AAE9C,yDAAsD;AACtD,0CAA6C;AAC7C,wCAMuB;AAEvB,MAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,wCAAwC,CAAC,CAAC;AAEpE,SAAS,4BAA4B;IACnC,iDAAiD;IACjD,0JAA0J;IAE1J,8FAA8F;IAC9F,yJAAyJ;IACzJ,MAAM,QAAQ,GAAG,uCAAuC,CAAC;IACxD,UAAkB,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,EAA8B,CAAC;AACxE,CAAC;AAkBD;;;GAGG;AACH,SAAS,oBAAoB,CAAC,QAAa,EAAE,OAAiC;IAC5E,MAAM,WAAW,GAAqB,EAAE,CAAC;IACzC,MAAM,IAAI,GAAG,IAAA,mCAAgB,GAAE,CAAC;IAEhC,MAAM;IACJ,+DAA+D;IAC/D,kDAAkD;IAClD,OAAO,EACP,eAAe,GAChB,GAAG,IAAA,oCAA2B,EAAC,sBAAQ,EAAE;QACxC,QAAQ;QACR,OAAO,EAAE,UAAG;QACZ,OAAO,EAAE,CAAC,EAAE,QAAQ,EAA6B,EAAE,EAAE,CAAC,CACpD,uBAAC,IAAI,cACH,gCAAK,EAAE,EAAC,MAAM,YAAE,QAAQ,GAAO,GAC1B,CACR;KACF,CAAC,CAAC;IAEH,qEAAqE;IACrE,0HAA0H;IAC1H,4BAA4B,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhF,MAAM,UAAU,GAAG,SAAS;QAC1B,CAAC,CAAC;YACE,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,IAAI,IAAI;SAC3C;QACH,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC;AAC/D,CAAC;AAEM,KAAK,UAAU,gBAAgB,CACpC,QAAa,EACb,OAAiC;IAEjC,OAAO,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE;QACjC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,oBAAoB,CAChF,QAAQ,EACR,OAAO,CACR,CAAC;QAEF,MAAM,IAAI,GAAG,gBAAc,CAAC,cAAc,CACxC,uBAAC,cAAI,CAAC,QAAQ,IAAC,OAAO,EAAE,WAAW,YACjC,uBAAC,kBAAS,IAAC,UAAU,EAAE,UAAU,YAAG,OAAO,GAAa,GAC1C,CACjB,CAAC;QAEF,+EAA+E;QAC/E,MAAM,GAAG,GAAG,gBAAc,CAAC,oBAAoB,CAAC,eAAe,EAAE,CAAC,CAAC;QAEnE,IAAI,MAAM,GAAG,kCAAkC,CAAC,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAE1E,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,GAAG,SAAS,CAAC,CAAC;QAEpD,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxC,KAAK,CAAC,iCAAiC,KAAK,CAAC,MAAM,GAAG,EAAE,KAAK,CAAC,CAAC;QAC/D,4CAA4C;QAC5C,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;QAC/D,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,IAAA,qCAA8B,EAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAC7F,CAAC;QAED,uFAAuF;QACvF,IAAI,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YAC7B,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,IAAA,4BAAqB,EAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAChG,CAAC;QAED,6DAA6D;QAC7D,IAAI,OAAO,EAAE,MAAM,EAAE,CAAC;YACpB,IAAI,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAClC,MAAM,WAAW,GAAG,IAAA,gCAAyB,EAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAClE,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,WAAW,WAAW,CAAC,CAAC;YAChE,CAAC;YAED,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACjC,0DAA0D;gBAC1D,MAAM,GAAG,MAAM,CAAC,OAAO,CACrB,SAAS,EACT,GAAG,IAAA,oCAA6B,EAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,WAAW,CAC/D,CAAC;YACJ,CAAC;QACH,CAAC;QAED,OAAO,iBAAiB,GAAG,MAAM,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,kCAAkC,CAAC,MAAW,EAAE,IAAY;IACnE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,IAAA,4BAAqB,EAAC,MAAM,CAAC,CAAC;IAEnF,IAAI,QAAQ,EAAE,CAAC;QACb,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,SAAS,QAAQ,EAAE,CAAC,CAAC;IACrD,CAAC;IAED,aAAa;IACb,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,SAAS,cAAc,GAAG,CAAC,CAAC;IAC1D,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,SAAS,cAAc,GAAG,CAAC,CAAC;IAE1D,OAAO,IAAI,CAAC;AACd,CAAC;AAED,8BAA8B;AAC9B,2EAAwF;AAA/E,6HAAA,mBAAmB,OAAA;AAAE,yHAAA,eAAe,OAAA;AAC7C,yDAAmF;AAA1E,oIAAA,+BAA+B,OAAA;AAAE,gHAAA,WAAW,OAAA","sourcesContent":["/**\n * Copyright © 2026 650 Industries.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport '@expo/metro-runtime';\n\nimport * as Font from 'expo-font/build/server';\nimport { ExpoRoot } from 'expo-router';\nimport { ctx } from 'expo-router/_ctx';\nimport Head from 'expo-router/head';\nimport { InnerRoot, registerStaticRootComponent } from 'expo-router/internal/static';\nimport React from 'react';\nimport ReactDOMServer from 'react-dom/server';\n\nimport { getRootComponent } from './getRootComponent';\nimport { createDebug } from '../utils/debug';\nimport {\n  createFaviconAsString,\n  createInjectedCssAsString,\n  createInjectedScriptsAsString,\n  createLoaderDataScriptAsString,\n  serializeHelmetToHtml,\n} from '../utils/html';\n\nconst debug = createDebug('expo:router:server:renderStaticContent');\n\nfunction resetReactNavigationContexts() {\n  // https://github.com/expo/router/discussions/588\n  // https://github.com/react-navigation/react-navigation/blob/9fe34b445fcb86e5666f61e144007d7540f014fa/packages/elements/src/getNamedContext.tsx#LL3C1-L4C1\n\n  // React Navigation is storing providers in a global, this is fine for the first static render\n  // but subsequent static renders of Stack or Tabs will cause React to throw a warning. To prevent this warning, we'll reset the globals before rendering.\n  const contexts = '__react_navigation__elements_contexts';\n  (globalThis as any)[contexts] = new Map<string, React.Context<any>>();\n}\n\nexport type GetStaticContentOptions = {\n  loader?: {\n    data?: any;\n    /** Unique key for the route. Derived from the route's contextKey */\n    key: string;\n  };\n  request?: Request;\n  /** Asset manifest for hydration bundles (JS/CSS). Used in SSR. */\n  assets?: {\n    css: string[];\n    js: string[];\n    /** Public href of a favicon generated from `web.favicon` in the app config. */\n    favicon?: string;\n  };\n};\n\n/**\n * Shared setup for both `getStaticContent()` and `getStreamingContent()`. Creates the React element\n * tree, resets server contexts, and computes loader data.\n */\nfunction prepareRenderContext(location: URL, options?: GetStaticContentOptions) {\n  const headContext: { helmet?: any } = {};\n  const Root = getRootComponent();\n\n  const {\n    // NOTE: The `element` that's returned adds two extra Views and\n    // the seemingly unused `RootTagContext.Provider`.\n    element,\n    getStyleElement,\n  } = registerStaticRootComponent(ExpoRoot, {\n    location,\n    context: ctx,\n    wrapper: ({ children }: React.ComponentProps<any>) => (\n      <Root>\n        <div id=\"root\">{children}</div>\n      </Root>\n    ),\n  });\n\n  // This MUST be run before `ReactDOMServer.renderToString` to prevent\n  // \"Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.\"\n  resetReactNavigationContexts();\n\n  const loaderKey = options?.loader ? options.loader.key + location.search : null;\n\n  const loadedData = loaderKey\n    ? {\n        [loaderKey]: options?.loader?.data ?? null,\n      }\n    : null;\n\n  return { headContext, element, getStyleElement, loadedData };\n}\n\nexport async function getStaticContent(\n  location: URL,\n  options?: GetStaticContentOptions\n): Promise<string> {\n  return Font.withServerContext(() => {\n    const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(\n      location,\n      options\n    );\n\n    const html = ReactDOMServer.renderToString(\n      <Head.Provider context={headContext}>\n        <InnerRoot loadedData={loadedData}>{element}</InnerRoot>\n      </Head.Provider>\n    );\n\n    // Eval the CSS after the HTML is rendered so that the CSS is in the same order\n    const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());\n\n    let output = mixHeadComponentsWithStaticResults(headContext.helmet, html);\n\n    output = output.replace('</head>', `${css}</head>`);\n\n    const fonts = Font.getServerResources();\n    debug(`Pushing static fonts: (count: ${fonts.length})`, fonts);\n    // Inject static fonts loaded with expo-font\n    output = output.replace('</head>', `${fonts.join('')}</head>`);\n    if (loadedData) {\n      output = output.replace('</head>', `${createLoaderDataScriptAsString(loadedData)}</head>`);\n    }\n\n    // Inject favicon link tag. Mirrors `assets.favicon` handling in `getStreamingContent`.\n    if (options?.assets?.favicon) {\n      output = output.replace('</head>', `${createFaviconAsString(options.assets.favicon)}</head>`);\n    }\n\n    // Inject hydration assets (JS/CSS bundles). Used in SSR mode\n    if (options?.assets) {\n      if (options.assets.css.length > 0) {\n        const injectedCSS = createInjectedCssAsString(options.assets.css);\n        output = output.replace('</head>', `${injectedCSS}\\n</head>`);\n      }\n\n      if (options.assets.js.length > 0) {\n        // In non-streaming mode, use deferred scripts in the body\n        output = output.replace(\n          '</body>',\n          `${createInjectedScriptsAsString(options.assets.js)}\\n</body>`\n        );\n      }\n    }\n\n    return '<!DOCTYPE html>' + output;\n  });\n}\n\nfunction mixHeadComponentsWithStaticResults(helmet: any, html: string) {\n  const { headTags, htmlAttributes, bodyAttributes } = serializeHelmetToHtml(helmet);\n\n  if (headTags) {\n    html = html.replace('<head>', `<head>${headTags}`);\n  }\n\n  // attributes\n  html = html.replace('<html ', `<html ${htmlAttributes} `);\n  html = html.replace('<body ', `<body ${bodyAttributes} `);\n\n  return html;\n}\n\n// Re-export for use in server\nexport { getStreamingContent, resolveMetadata } from '../server/renderStreamingContent';\nexport { getBuildTimeServerManifestAsync, getManifest } from './getServerManifest';\n"]}
\ No newline at end of file
diff --git a/packages/@expo/router-server/src/server/renderStreamingContent.tsx b/packages/@expo/router-server/src/server/renderStreamingContent.tsx
index 0239940b598c35..78ac9cf82556ac 100644
--- a/packages/@expo/router-server/src/server/renderStreamingContent.tsx
+++ b/packages/@expo/router-server/src/server/renderStreamingContent.tsx
@@ -86,10 +86,6 @@ function prepareRenderContext(location: URL, options?: GetStreamingContentOption
     ),
   });
 
-  // Clear any existing static resources from the global scope to attempt to prevent leaking between pages.
-  // This could break if pages are rendered in parallel or if fonts are loaded outside of the React tree
-  Font.resetServerContext();
-
   // This MUST be run before `ReactDOMServer.renderToString` to prevent
   // "Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported."
   resetReactNavigationContexts();
@@ -106,6 +102,8 @@ function prepareRenderContext(location: URL, options?: GetStreamingContentOption
 }
 
 function FontResources() {
+  // NOTE(@hassankhan): runs once during the shell pass; fonts loaded inside late-resolving
+  // Suspense boundaries register after this and won't be emitted.
   const descriptors = Font.getServerResourceDescriptors();
   debug(`Pushing fonts: (count: ${descriptors.length})`, descriptors);
   return createInjectedFontsAsNodes(descriptors);
@@ -119,51 +117,55 @@ export async function getStreamingContent(
   location: URL,
   options?: GetStreamingContentOptions
 ): Promise<ReadableStream<Uint8Array>> {
-  const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(
-    location,
-    options
-  );
-
-  const { headNodes: headCssNodes } = createInjectedCssAsNodes(options?.assets?.css ?? []);
-  const { headNodes: inlineCssNodes } = createInjectedInlineCssAsNodes(options?.assets?.inlineCss);
-  const faviconNode = options?.assets?.favicon
-    ? createFaviconAsNode(options?.assets?.favicon)
-    : undefined;
-
-  const serverDocumentData = {
-    headNodes: [
-      ...(options?.metadata?.headNodes ?? []),
-      faviconNode,
-      getStyleElement({ key: 'rnw-style-element' }),
-      ...(headCssNodes ?? []),
-      ...(inlineCssNodes ?? []),
-    ].filter(Boolean),
-    bodyNodes: [<FontResources key="font-resources" />],
-  };
-
-  return await ReactDOMServer.renderToReadableStream(
-    <ServerDocument data={serverDocumentData}>
-      {/* TODO(@hassankhan): Remove `<Head.Provider>` when `unstable_useServerRendering` is stabilized */}
-      <Head.Provider context={headContext}>
-        <InnerRoot loadedData={loadedData}>{element}</InnerRoot>
-      </Head.Provider>
-    </ServerDocument>,
-    {
-      // TODO(@hassankhan): Experiment and see if we can calculate a better default
-      // We're doubling the default here so non-JavaScript renders show some content
-      progressiveChunkSize: 12800 * 2,
-      bootstrapScriptContent: getBootstrapContents({ hydrate: true, loadedData }),
-      bootstrapScripts: options?.assets?.js,
-      signal: options?.request?.signal,
-      onError(error) {
-        if (options?.request?.signal.aborted) {
-          return;
-        }
-
-        console.error('SSR streaming render error:', error);
-      },
-    }
-  );
+  return Font.withServerContext(() => {
+    const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(
+      location,
+      options
+    );
+
+    const { headNodes: headCssNodes } = createInjectedCssAsNodes(options?.assets?.css ?? []);
+    const { headNodes: inlineCssNodes } = createInjectedInlineCssAsNodes(
+      options?.assets?.inlineCss
+    );
+    const faviconNode = options?.assets?.favicon
+      ? createFaviconAsNode(options?.assets?.favicon)
+      : undefined;
+
+    const serverDocumentData = {
+      headNodes: [
+        ...(options?.metadata?.headNodes ?? []),
+        faviconNode,
+        getStyleElement({ key: 'rnw-style-element' }),
+        ...(headCssNodes ?? []),
+        ...(inlineCssNodes ?? []),
+      ].filter(Boolean),
+      bodyNodes: [<FontResources key="font-resources" />],
+    };
+
+    return ReactDOMServer.renderToReadableStream(
+      <ServerDocument data={serverDocumentData}>
+        {/* TODO(@hassankhan): Remove `<Head.Provider>` when `unstable_useServerRendering` is stabilized */}
+        <Head.Provider context={headContext}>
+          <InnerRoot loadedData={loadedData}>{element}</InnerRoot>
+        </Head.Provider>
+      </ServerDocument>,
+      {
+        // TODO(@hassankhan): Experiment and see if we can calculate a better default
+        // We're doubling the default here so non-JavaScript renders show some content
+        progressiveChunkSize: 12800 * 2,
+        bootstrapScriptContent: getBootstrapContents({ hydrate: true, loadedData }),
+        bootstrapScripts: options?.assets?.js,
+        signal: options?.request?.signal,
+        onError(error) {
+          if (options?.request?.signal.aborted) {
+            return;
+          }
+
+          console.error('SSR streaming render error:', error);
+        },
+      }
+    );
+  });
 }
 
 export { resolveMetadata } from './metadata';
diff --git a/packages/@expo/router-server/src/static/renderStaticContent.tsx b/packages/@expo/router-server/src/static/renderStaticContent.tsx
index 4bc88e2dc1041c..0b58de25a29d40 100644
--- a/packages/@expo/router-server/src/static/renderStaticContent.tsx
+++ b/packages/@expo/router-server/src/static/renderStaticContent.tsx
@@ -75,10 +75,6 @@ function prepareRenderContext(location: URL, options?: GetStaticContentOptions)
     ),
   });
 
-  // Clear any existing static resources from the global scope to attempt to prevent leaking between pages.
-  // This could break if pages are rendered in parallel or if fonts are loaded outside of the React tree
-  Font.resetServerContext();
-
   // This MUST be run before `ReactDOMServer.renderToString` to prevent
   // "Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported."
   resetReactNavigationContexts();
@@ -98,54 +94,56 @@ export async function getStaticContent(
   location: URL,
   options?: GetStaticContentOptions
 ): Promise<string> {
-  const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(
-    location,
-    options
-  );
-
-  const html = ReactDOMServer.renderToString(
-    <Head.Provider context={headContext}>
-      <InnerRoot loadedData={loadedData}>{element}</InnerRoot>
-    </Head.Provider>
-  );
-
-  // Eval the CSS after the HTML is rendered so that the CSS is in the same order
-  const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());
-
-  let output = mixHeadComponentsWithStaticResults(headContext.helmet, html);
-
-  output = output.replace('</head>', `${css}</head>`);
-
-  const fonts = Font.getServerResources();
-  debug(`Pushing static fonts: (count: ${fonts.length})`, fonts);
-  // Inject static fonts loaded with expo-font
-  output = output.replace('</head>', `${fonts.join('')}</head>`);
-  if (loadedData) {
-    output = output.replace('</head>', `${createLoaderDataScriptAsString(loadedData)}</head>`);
-  }
-
-  // Inject favicon link tag. Mirrors `assets.favicon` handling in `getStreamingContent`.
-  if (options?.assets?.favicon) {
-    output = output.replace('</head>', `${createFaviconAsString(options.assets.favicon)}</head>`);
-  }
+  return Font.withServerContext(() => {
+    const { headContext, element, getStyleElement, loadedData } = prepareRenderContext(
+      location,
+      options
+    );
+
+    const html = ReactDOMServer.renderToString(
+      <Head.Provider context={headContext}>
+        <InnerRoot loadedData={loadedData}>{element}</InnerRoot>
+      </Head.Provider>
+    );
+
+    // Eval the CSS after the HTML is rendered so that the CSS is in the same order
+    const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());
+
+    let output = mixHeadComponentsWithStaticResults(headContext.helmet, html);
+
+    output = output.replace('</head>', `${css}</head>`);
+
+    const fonts = Font.getServerResources();
+    debug(`Pushing static fonts: (count: ${fonts.length})`, fonts);
+    // Inject static fonts loaded with expo-font
+    output = output.replace('</head>', `${fonts.join('')}</head>`);
+    if (loadedData) {
+      output = output.replace('</head>', `${createLoaderDataScriptAsString(loadedData)}</head>`);
+    }
 
-  // Inject hydration assets (JS/CSS bundles). Used in SSR mode
-  if (options?.assets) {
-    if (options.assets.css.length > 0) {
-      const injectedCSS = createInjectedCssAsString(options.assets.css);
-      output = output.replace('</head>', `${injectedCSS}\n</head>`);
+    // Inject favicon link tag. Mirrors `assets.favicon` handling in `getStreamingContent`.
+    if (options?.assets?.favicon) {
+      output = output.replace('</head>', `${createFaviconAsString(options.assets.favicon)}</head>`);
     }
 
-    if (options.assets.js.length > 0) {
-      // In non-streaming mode, use deferred scripts in the body
-      output = output.replace(
-        '</body>',
-        `${createInjectedScriptsAsString(options.assets.js)}\n</body>`
-      );
+    // Inject hydration assets (JS/CSS bundles). Used in SSR mode
+    if (options?.assets) {
+      if (options.assets.css.length > 0) {
+        const injectedCSS = createInjectedCssAsString(options.assets.css);
+        output = output.replace('</head>', `${injectedCSS}\n</head>`);
+      }
+
+      if (options.assets.js.length > 0) {
+        // In non-streaming mode, use deferred scripts in the body
+        output = output.replace(
+          '</body>',
+          `${createInjectedScriptsAsString(options.assets.js)}\n</body>`
+        );
+      }
     }
-  }
 
-  return '<!DOCTYPE html>' + output;
+    return '<!DOCTYPE html>' + output;
+  });
 }
 
 function mixHeadComponentsWithStaticResults(helmet: any, html: string) {
diff --git a/packages/expo-font/CHANGELOG.md b/packages/expo-font/CHANGELOG.md
index 74b9309a0fb8b6..154b8db03eac57 100644
--- a/packages/expo-font/CHANGELOG.md
+++ b/packages/expo-font/CHANGELOG.md
@@ -4,8 +4,12 @@
 
 ### 🛠 Breaking changes
 
+- [web] Removed `Server.resetServerContext()`. Server-side font state is now scoped per-render via `AsyncLocalStorage`. ([#46669](https://github.com/expo/expo/pull/46669) by [@hassankhan](https://github.com/hassankhan))
+
 ### 🎉 New features
 
+- [web] Added `Server.withServerContext(callback)` which scopes server-side font loads per render. ([#46669](https://github.com/expo/expo/pull/46669) by [@hassankhan](https://github.com/hassankhan))
+
 ### 🐛 Bug fixes
 
 ### 💡 Others
diff --git a/packages/expo-font/build/ExpoFontLoader.d.ts b/packages/expo-font/build/ExpoFontLoader.d.ts
index 604b603845e1ea..333edac74bc06c 100644
--- a/packages/expo-font/build/ExpoFontLoader.d.ts
+++ b/packages/expo-font/build/ExpoFontLoader.d.ts
@@ -7,7 +7,6 @@ export type ExpoFontLoaderModule = {
     isLoaded?: (fontFamilyName: string, options?: UnloadFontOptions) => boolean;
     getServerResources?: () => string[];
     getServerResourceDescriptors?: () => ServerFontResourceDescriptor[];
-    resetServerContext?: () => void;
 };
 declare const m: ExpoFontLoaderModule;
 export default m;
diff --git a/packages/expo-font/build/ExpoFontLoader.d.ts.map b/packages/expo-font/build/ExpoFontLoader.d.ts.map
index c13412ebd7f27c..6774923035d222 100644
--- a/packages/expo-font/build/ExpoFontLoader.d.ts.map
+++ b/packages/expo-font/build/ExpoFontLoader.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"ExpoFontLoader.d.ts","sourceRoot":"","sources":["../src/ExpoFontLoader.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,4BAA4B,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEpF,MAAM,MAAM,oBAAoB,GAAG;IACjC,cAAc,EAAE,MAAM,MAAM,EAAE,CAAC;IAC/B,SAAS,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9E,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrF,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,iBAAiB,KAAK,OAAO,CAAC;IAC5E,kBAAkB,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IACpC,4BAA4B,CAAC,EAAE,MAAM,4BAA4B,EAAE,CAAC;IACpE,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,CAAC,EAAE,oBAWkC,CAAC;AAC5C,eAAe,CAAC,CAAC"}
\ No newline at end of file
+{"version":3,"file":"ExpoFontLoader.d.ts","sourceRoot":"","sources":["../src/ExpoFontLoader.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,4BAA4B,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEpF,MAAM,MAAM,oBAAoB,GAAG;IACjC,cAAc,EAAE,MAAM,MAAM,EAAE,CAAC;IAC/B,SAAS,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9E,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrF,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,iBAAiB,KAAK,OAAO,CAAC;IAC5E,kBAAkB,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IACpC,4BAA4B,CAAC,EAAE,MAAM,4BAA4B,EAAE,CAAC;CACrE,CAAC;AAEF,QAAA,MAAM,CAAC,EAAE,oBAWkC,CAAC;AAC5C,eAAe,CAAC,CAAC"}
\ No newline at end of file
diff --git a/packages/expo-font/build/ExpoFontLoader.js.map b/packages/expo-font/build/ExpoFontLoader.js.map
index a4fdb3e217b3e1..0b12c1023c0012 100644
--- a/packages/expo-font/build/ExpoFontLoader.js.map
+++ b/packages/expo-font/build/ExpoFontLoader.js.map
@@ -1 +1 @@
-{"version":3,"file":"ExpoFontLoader.js","sourceRoot":"","sources":["../src/ExpoFontLoader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAgBxD,MAAM,CAAC,GACL,OAAO,MAAM,KAAK,WAAW;IAC3B,CAAC,CAAC,oBAAoB;QACpB;YACE,cAAc;gBACZ,OAAO,EAAE,CAAC;YACZ,CAAC;YACD,SAAS;gBACP,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;YAC3B,CAAC;SACF;IACH,CAAC,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAC5C,eAAe,CAAC,CAAC","sourcesContent":["import { requireNativeModule } from 'expo-modules-core';\n\nimport type { ServerFontResourceDescriptor, UnloadFontOptions } from './Font.types';\n\nexport type ExpoFontLoaderModule = {\n  getLoadedFonts: () => string[];\n  loadAsync: (fontFamilyName: string, localUriOrWebAsset: any) => Promise<void>;\n  // the following methods are only available on web\n  unloadAllAsync?: () => Promise<void>;\n  unloadAsync?: (fontFamilyName: string, options?: UnloadFontOptions) => Promise<void>;\n  isLoaded?: (fontFamilyName: string, options?: UnloadFontOptions) => boolean;\n  getServerResources?: () => string[];\n  getServerResourceDescriptors?: () => ServerFontResourceDescriptor[];\n  resetServerContext?: () => void;\n};\n\nconst m: ExpoFontLoaderModule =\n  typeof window === 'undefined'\n    ? // React server mock\n      {\n        getLoadedFonts() {\n          return [];\n        },\n        loadAsync() {\n          return Promise.resolve();\n        },\n      }\n    : requireNativeModule('ExpoFontLoader');\nexport default m;\n"]}
\ No newline at end of file
+{"version":3,"file":"ExpoFontLoader.js","sourceRoot":"","sources":["../src/ExpoFontLoader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAexD,MAAM,CAAC,GACL,OAAO,MAAM,KAAK,WAAW;IAC3B,CAAC,CAAC,oBAAoB;QACpB;YACE,cAAc;gBACZ,OAAO,EAAE,CAAC;YACZ,CAAC;YACD,SAAS;gBACP,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;YAC3B,CAAC;SACF;IACH,CAAC,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAC5C,eAAe,CAAC,CAAC","sourcesContent":["import { requireNativeModule } from 'expo-modules-core';\n\nimport type { ServerFontResourceDescriptor, UnloadFontOptions } from './Font.types';\n\nexport type ExpoFontLoaderModule = {\n  getLoadedFonts: () => string[];\n  loadAsync: (fontFamilyName: string, localUriOrWebAsset: any) => Promise<void>;\n  // the following methods are only available on web\n  unloadAllAsync?: () => Promise<void>;\n  unloadAsync?: (fontFamilyName: string, options?: UnloadFontOptions) => Promise<void>;\n  isLoaded?: (fontFamilyName: string, options?: UnloadFontOptions) => boolean;\n  getServerResources?: () => string[];\n  getServerResourceDescriptors?: () => ServerFontResourceDescriptor[];\n};\n\nconst m: ExpoFontLoaderModule =\n  typeof window === 'undefined'\n    ? // React server mock\n      {\n        getLoadedFonts() {\n          return [];\n        },\n        loadAsync() {\n          return Promise.resolve();\n        },\n      }\n    : requireNativeModule('ExpoFontLoader');\nexport default m;\n"]}
\ No newline at end of file
diff --git a/packages/expo-font/build/ExpoFontLoader.web.d.ts.map b/packages/expo-font/build/ExpoFontLoader.web.d.ts.map
index 6e943d1ada61ff..444892bb1eb3a0 100644
--- a/packages/expo-font/build/ExpoFontLoader.web.d.ts.map
+++ b/packages/expo-font/build/ExpoFontLoader.web.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"ExpoFontLoader.web.d.ts","sourceRoot":"","sources":["../src/ExpoFontLoader.web.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAe,KAAK,YAAY,EAAqC,MAAM,cAAc,CAAC;AAsEjG,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,oBAAoB,CA0GlD,CAAC;wBAcyB,OAAO,cAAc;AAAhD,wBAAiD;AAiBjD,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,GAAG,MAAM,CAQzF"}
\ No newline at end of file
+{"version":3,"file":"ExpoFontLoader.web.d.ts","sourceRoot":"","sources":["../src/ExpoFontLoader.web.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAe,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAkD9D,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,oBAAoB,CAoGlD,CAAC;wBAcyB,OAAO,cAAc;AAAhD,wBAAiD;AAiBjD,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,GAAG,MAAM,CAQzF"}
\ No newline at end of file
diff --git a/packages/expo-font/build/ExpoFontLoader.web.js b/packages/expo-font/build/ExpoFontLoader.web.js
index b3919590212d2d..942042d410f956 100644
--- a/packages/expo-font/build/ExpoFontLoader.web.js
+++ b/packages/expo-font/build/ExpoFontLoader.web.js
@@ -1,6 +1,7 @@
 import { CodedError, registerWebModule } from 'expo-modules-core';
 import FontObserver from 'fontfaceobserver';
 import { FontDisplay } from './Font.types';
+import { addServerFont, getLoadedServerFonts, getServerResourceDescriptors as readServerResourceDescriptors, isServerFontLoaded, } from './serverContext';
 function getFontFaceStyleSheet() {
     if (typeof window === 'undefined') {
         return null;
@@ -31,30 +32,6 @@ function getFontFaceRulesMatchingResource(fontFamilyName, options) {
             (options && options.display ? options.display === rule.style.fontDisplay : true));
     });
 }
-const serverContext = new Set();
-function getServerResourceDescriptors() {
-    const entries = [...serverContext.entries()];
-    if (!entries.length) {
-        return [];
-    }
-    const css = entries.map(([{ css }]) => css).join('\n');
-    const links = entries.map(([{ resourceId }]) => resourceId);
-    // TODO: Maybe return nothing if no fonts were loaded.
-    return [
-        {
-            css,
-            id: ID,
-            type: 'style',
-        },
-        ...links.map((resourceId) => ({
-            as: 'font',
-            crossOrigin: '',
-            href: resourceId,
-            rel: 'preload',
-            type: 'link',
-        })),
-    ];
-}
 const ExpoFontLoader = {
     async unloadAllAsync() {
         if (typeof window === 'undefined')
@@ -74,7 +51,7 @@ const ExpoFontLoader = {
         }
     },
     getServerResources() {
-        const elements = getServerResourceDescriptors();
+        const elements = readServerResourceDescriptors();
         return elements
             .map((element) => {
             switch (element.type) {
@@ -89,23 +66,18 @@ const ExpoFontLoader = {
             .filter(Boolean);
     },
     getServerResourceDescriptors() {
-        return getServerResourceDescriptors();
-    },
-    resetServerContext() {
-        serverContext.clear();
+        return readServerResourceDescriptors();
     },
     getLoadedFonts() {
         if (typeof window === 'undefined') {
-            return [...serverContext.values()].map(({ name }) => name);
+            return getLoadedServerFonts();
         }
         const rules = getFontFaceRules();
         return rules.map(({ rule }) => rule.style.fontFamily);
     },
     isLoaded(fontFamilyName, resource = {}) {
         if (typeof window === 'undefined') {
-            return !![...serverContext.values()].find((asset) => {
-                return asset.name === fontFamilyName;
-            });
+            return isServerFontLoaded(fontFamilyName);
         }
         return getFontFaceRulesMatchingResource(fontFamilyName, resource)?.length > 0;
     },
@@ -117,7 +89,7 @@ const ExpoFontLoader = {
             throw new CodedError('ERR_FONT_SOURCE', `Expected font resource of type \`object\` instead got: ${typeof resource}`);
         }
         if (typeof window === 'undefined') {
-            serverContext.add({
+            addServerFont({
                 name: fontFamilyName,
                 css: _createWebFontTemplate(fontFamilyName, resource),
                 // @ts-expect-error: typeof string
diff --git a/packages/expo-font/build/ExpoFontLoader.web.js.map b/packages/expo-font/build/ExpoFontLoader.web.js.map
index 750d4ecade9263..b4b338617c8e3c 100644
--- a/packages/expo-font/build/ExpoFontLoader.web.js.map
+++ b/packages/expo-font/build/ExpoFontLoader.web.js.map
@@ -1 +1 @@
-{"version":3,"file":"ExpoFontLoader.web.js","sourceRoot":"","sources":["../src/ExpoFontLoader.web.ts"],"names":[],"mappings":"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","sourcesContent":["import { CodedError, registerWebModule } from 'expo-modules-core';\nimport FontObserver from 'fontfaceobserver';\n\nimport type { ExpoFontLoaderModule } from './ExpoFontLoader';\nimport type { UnloadFontOptions } from './Font';\nimport { FontDisplay, type FontResource, type ServerFontResourceDescriptor } from './Font.types';\n\nfunction getFontFaceStyleSheet(): CSSStyleSheet | null {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n  const styleSheet = getStyleElement();\n  return styleSheet.sheet ? (styleSheet.sheet as CSSStyleSheet) : null;\n}\n\ntype RuleItem = { rule: CSSFontFaceRule; index: number };\n\nfunction getFontFaceRules(): RuleItem[] {\n  const sheet = getFontFaceStyleSheet();\n  if (sheet) {\n    // @ts-ignore: rule iterator\n    const rules = [...sheet.cssRules];\n\n    const items: RuleItem[] = [];\n\n    for (let i = 0; i < rules.length; i++) {\n      const rule = rules[i];\n      if (rule instanceof CSSFontFaceRule) {\n        items.push({ rule, index: i });\n      }\n    }\n    return items;\n  }\n  return [];\n}\n\nfunction getFontFaceRulesMatchingResource(\n  fontFamilyName: string,\n  options?: UnloadFontOptions\n): RuleItem[] {\n  const rules = getFontFaceRules();\n  return rules.filter(({ rule }) => {\n    return (\n      rule.style.fontFamily === fontFamilyName &&\n      (options && options.display ? options.display === (rule.style as any).fontDisplay : true)\n    );\n  });\n}\n\nconst serverContext: Set<{ name: string; css: string; resourceId: string }> = new Set();\n\nfunction getServerResourceDescriptors(): ServerFontResourceDescriptor[] {\n  const entries = [...serverContext.entries()];\n  if (!entries.length) {\n    return [];\n  }\n  const css = entries.map(([{ css }]) => css).join('\\n');\n  const links = entries.map(([{ resourceId }]) => resourceId);\n  // TODO: Maybe return nothing if no fonts were loaded.\n  return [\n    {\n      css,\n      id: ID,\n      type: 'style' as const,\n    },\n    ...links.map((resourceId) => ({\n      as: 'font' as const,\n      crossOrigin: '' as const,\n      href: resourceId,\n      rel: 'preload' as const,\n      type: 'link' as const,\n    })),\n  ];\n}\n\nconst ExpoFontLoader: Required<ExpoFontLoaderModule> = {\n  async unloadAllAsync(): Promise<void> {\n    if (typeof window === 'undefined') return;\n\n    const element = document.getElementById(ID);\n    if (element && element instanceof HTMLStyleElement) {\n      document.removeChild(element);\n    }\n  },\n\n  async unloadAsync(fontFamilyName: string, options?: UnloadFontOptions): Promise<void> {\n    const sheet = getFontFaceStyleSheet();\n    if (!sheet) return;\n    const items = getFontFaceRulesMatchingResource(fontFamilyName, options);\n    for (const item of items) {\n      sheet.deleteRule(item.index);\n    }\n  },\n\n  getServerResources(): string[] {\n    const elements = getServerResourceDescriptors();\n\n    return elements\n      .map((element) => {\n        switch (element.type) {\n          case 'style':\n            return `<style id=\"${element.id}\">${element.css}</style>`;\n          case 'link':\n            return `<link rel=\"${element.rel}\" href=\"${element.href}\" as=\"${element.as}\" crossorigin=\"${element.crossOrigin}\" />`;\n          default:\n            return '';\n        }\n      })\n      .filter(Boolean);\n  },\n\n  getServerResourceDescriptors() {\n    return getServerResourceDescriptors();\n  },\n\n  resetServerContext() {\n    serverContext.clear();\n  },\n\n  getLoadedFonts(): string[] {\n    if (typeof window === 'undefined') {\n      return [...serverContext.values()].map(({ name }) => name);\n    }\n    const rules = getFontFaceRules();\n    return rules.map(({ rule }) => rule.style.fontFamily);\n  },\n\n  isLoaded(fontFamilyName: string, resource: UnloadFontOptions = {}): boolean {\n    if (typeof window === 'undefined') {\n      return !![...serverContext.values()].find((asset) => {\n        return asset.name === fontFamilyName;\n      });\n    }\n    return getFontFaceRulesMatchingResource(fontFamilyName, resource)?.length > 0;\n  },\n\n  // NOTE(vonovak): This is used in RN vector-icons to load fonts dynamically on web. Changing the signature is breaking.\n  // NOTE(EvanBacon): No async keyword! This cannot return a promise in Node environments.\n  loadAsync(fontFamilyName: string, resource: FontResource): Promise<void> {\n    if (__DEV__ && typeof resource !== 'object') {\n      // to help devving on web, where loadAsync interface is different from native\n      throw new CodedError(\n        'ERR_FONT_SOURCE',\n        `Expected font resource of type \\`object\\` instead got: ${typeof resource}`\n      );\n    }\n    if (typeof window === 'undefined') {\n      serverContext.add({\n        name: fontFamilyName,\n        css: _createWebFontTemplate(fontFamilyName, resource),\n        // @ts-expect-error: typeof string\n        resourceId: resource.uri!,\n      });\n      return Promise.resolve();\n    }\n\n    const canInjectStyle = document.head && typeof document.head.appendChild === 'function';\n    if (!canInjectStyle) {\n      throw new CodedError(\n        'ERR_WEB_ENVIRONMENT',\n        `The browser's \\`document.head\\` element doesn't support injecting fonts.`\n      );\n    }\n\n    const style = getStyleElement();\n    document.head!.appendChild(style);\n\n    const res = getFontFaceRulesMatchingResource(fontFamilyName, resource);\n    if (!res.length) {\n      _createWebStyle(fontFamilyName, resource);\n    }\n\n    if (!isFontLoadingListenerSupported()) {\n      return Promise.resolve();\n    }\n\n    return new FontObserver(fontFamilyName, {\n      // @ts-expect-error: TODO(@kitten): Typings indicate that the polyfill may not support this?\n      display: resource.display,\n    }).load(resource.testString ?? null, 12000);\n  },\n};\n\nconst isServer = process.env.EXPO_OS === 'web' && typeof window === 'undefined';\n\nfunction createExpoFontLoader() {\n  return ExpoFontLoader;\n}\nconst toExport = isServer\n  ? ExpoFontLoader\n  : // @ts-expect-error: registerWebModule calls `new` on the module implementation.\n    // Normally that'd be a class but that doesn't work on server, so we use a function instead.\n    // TS doesn't like that but we don't need it to be a class.\n    registerWebModule(createExpoFontLoader, 'ExpoFontLoader');\n\nexport default toExport as typeof ExpoFontLoader;\n\nconst ID = 'expo-generated-fonts';\n\nfunction getStyleElement(): HTMLStyleElement {\n  const element = document.getElementById(ID);\n  if (element && element instanceof HTMLStyleElement) {\n    return element;\n  }\n  const styleElement = document.createElement('style');\n  styleElement.id = ID;\n\n  return styleElement;\n}\n\nconst CSS_IDENT_RE = /^[a-zA-Z_-][\\w-]*$/;\n\nexport function _createWebFontTemplate(fontFamily: string, resource: FontResource): string {\n  const display =\n    typeof resource.display === 'string' && CSS_IDENT_RE.test(resource.display)\n      ? resource.display\n      : FontDisplay.AUTO;\n  return `@font-face{font-family:${JSON.stringify(fontFamily)};src:url(${JSON.stringify(\n    resource.uri\n  )});font-display:${display}}`;\n}\n\nfunction _createWebStyle(fontFamily: string, resource: FontResource): HTMLStyleElement {\n  const fontStyle = _createWebFontTemplate(fontFamily, resource);\n\n  const styleElement = getStyleElement();\n  // @ts-ignore: TypeScript does not define HTMLStyleElement::styleSheet. This is just for IE and\n  // possibly can be removed if it's unnecessary on IE 11.\n  if (styleElement.styleSheet) {\n    const styleElementIE = styleElement as any;\n    styleElementIE.styleSheet.cssText = styleElementIE.styleSheet.cssText\n      ? styleElementIE.styleSheet.cssText + fontStyle\n      : fontStyle;\n  } else {\n    const textNode = document.createTextNode(fontStyle);\n    styleElement.appendChild(textNode);\n  }\n  return styleElement;\n}\n\nfunction isFontLoadingListenerSupported(): boolean {\n  const { userAgent } = window.navigator;\n  // WebKit is broken https://github.com/bramstein/fontfaceobserver/issues/95\n  const isIOS = !!userAgent.match(/iPad|iPhone/i);\n  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n  // Edge is broken https://github.com/bramstein/fontfaceobserver/issues/109#issuecomment-333356795\n  const isEdge = userAgent.includes('Edge');\n  // Internet Explorer\n  const isIE = userAgent.includes('Trident');\n  return !isSafari && !isIOS && !isEdge && !isIE;\n}\n"]}
\ No newline at end of file
+{"version":3,"file":"ExpoFontLoader.web.js","sourceRoot":"","sources":["../src/ExpoFontLoader.web.ts"],"names":[],"mappings":"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","sourcesContent":["import { CodedError, registerWebModule } from 'expo-modules-core';\nimport FontObserver from 'fontfaceobserver';\n\nimport type { ExpoFontLoaderModule } from './ExpoFontLoader';\nimport type { UnloadFontOptions } from './Font';\nimport { FontDisplay, type FontResource } from './Font.types';\nimport {\n  addServerFont,\n  getLoadedServerFonts,\n  getServerResourceDescriptors as readServerResourceDescriptors,\n  isServerFontLoaded,\n} from './serverContext';\n\nfunction getFontFaceStyleSheet(): CSSStyleSheet | null {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n  const styleSheet = getStyleElement();\n  return styleSheet.sheet ? (styleSheet.sheet as CSSStyleSheet) : null;\n}\n\ntype RuleItem = { rule: CSSFontFaceRule; index: number };\n\nfunction getFontFaceRules(): RuleItem[] {\n  const sheet = getFontFaceStyleSheet();\n  if (sheet) {\n    // @ts-ignore: rule iterator\n    const rules = [...sheet.cssRules];\n\n    const items: RuleItem[] = [];\n\n    for (let i = 0; i < rules.length; i++) {\n      const rule = rules[i];\n      if (rule instanceof CSSFontFaceRule) {\n        items.push({ rule, index: i });\n      }\n    }\n    return items;\n  }\n  return [];\n}\n\nfunction getFontFaceRulesMatchingResource(\n  fontFamilyName: string,\n  options?: UnloadFontOptions\n): RuleItem[] {\n  const rules = getFontFaceRules();\n  return rules.filter(({ rule }) => {\n    return (\n      rule.style.fontFamily === fontFamilyName &&\n      (options && options.display ? options.display === (rule.style as any).fontDisplay : true)\n    );\n  });\n}\n\nconst ExpoFontLoader: Required<ExpoFontLoaderModule> = {\n  async unloadAllAsync(): Promise<void> {\n    if (typeof window === 'undefined') return;\n\n    const element = document.getElementById(ID);\n    if (element && element instanceof HTMLStyleElement) {\n      document.removeChild(element);\n    }\n  },\n\n  async unloadAsync(fontFamilyName: string, options?: UnloadFontOptions): Promise<void> {\n    const sheet = getFontFaceStyleSheet();\n    if (!sheet) return;\n    const items = getFontFaceRulesMatchingResource(fontFamilyName, options);\n    for (const item of items) {\n      sheet.deleteRule(item.index);\n    }\n  },\n\n  getServerResources(): string[] {\n    const elements = readServerResourceDescriptors();\n\n    return elements\n      .map((element) => {\n        switch (element.type) {\n          case 'style':\n            return `<style id=\"${element.id}\">${element.css}</style>`;\n          case 'link':\n            return `<link rel=\"${element.rel}\" href=\"${element.href}\" as=\"${element.as}\" crossorigin=\"${element.crossOrigin}\" />`;\n          default:\n            return '';\n        }\n      })\n      .filter(Boolean);\n  },\n\n  getServerResourceDescriptors() {\n    return readServerResourceDescriptors();\n  },\n\n  getLoadedFonts(): string[] {\n    if (typeof window === 'undefined') {\n      return getLoadedServerFonts();\n    }\n    const rules = getFontFaceRules();\n    return rules.map(({ rule }) => rule.style.fontFamily);\n  },\n\n  isLoaded(fontFamilyName: string, resource: UnloadFontOptions = {}): boolean {\n    if (typeof window === 'undefined') {\n      return isServerFontLoaded(fontFamilyName);\n    }\n    return getFontFaceRulesMatchingResource(fontFamilyName, resource)?.length > 0;\n  },\n\n  // NOTE(vonovak): This is used in RN vector-icons to load fonts dynamically on web. Changing the signature is breaking.\n  // NOTE(EvanBacon): No async keyword! This cannot return a promise in Node environments.\n  loadAsync(fontFamilyName: string, resource: FontResource): Promise<void> {\n    if (__DEV__ && typeof resource !== 'object') {\n      // to help devving on web, where loadAsync interface is different from native\n      throw new CodedError(\n        'ERR_FONT_SOURCE',\n        `Expected font resource of type \\`object\\` instead got: ${typeof resource}`\n      );\n    }\n    if (typeof window === 'undefined') {\n      addServerFont({\n        name: fontFamilyName,\n        css: _createWebFontTemplate(fontFamilyName, resource),\n        // @ts-expect-error: typeof string\n        resourceId: resource.uri!,\n      });\n      return Promise.resolve();\n    }\n\n    const canInjectStyle = document.head && typeof document.head.appendChild === 'function';\n    if (!canInjectStyle) {\n      throw new CodedError(\n        'ERR_WEB_ENVIRONMENT',\n        `The browser's \\`document.head\\` element doesn't support injecting fonts.`\n      );\n    }\n\n    const style = getStyleElement();\n    document.head!.appendChild(style);\n\n    const res = getFontFaceRulesMatchingResource(fontFamilyName, resource);\n    if (!res.length) {\n      _createWebStyle(fontFamilyName, resource);\n    }\n\n    if (!isFontLoadingListenerSupported()) {\n      return Promise.resolve();\n    }\n\n    return new FontObserver(fontFamilyName, {\n      // @ts-expect-error: TODO(@kitten): Typings indicate that the polyfill may not support this?\n      display: resource.display,\n    }).load(resource.testString ?? null, 12000);\n  },\n};\n\nconst isServer = process.env.EXPO_OS === 'web' && typeof window === 'undefined';\n\nfunction createExpoFontLoader() {\n  return ExpoFontLoader;\n}\nconst toExport = isServer\n  ? ExpoFontLoader\n  : // @ts-expect-error: registerWebModule calls `new` on the module implementation.\n    // Normally that'd be a class but that doesn't work on server, so we use a function instead.\n    // TS doesn't like that but we don't need it to be a class.\n    registerWebModule(createExpoFontLoader, 'ExpoFontLoader');\n\nexport default toExport as typeof ExpoFontLoader;\n\nconst ID = 'expo-generated-fonts';\n\nfunction getStyleElement(): HTMLStyleElement {\n  const element = document.getElementById(ID);\n  if (element && element instanceof HTMLStyleElement) {\n    return element;\n  }\n  const styleElement = document.createElement('style');\n  styleElement.id = ID;\n\n  return styleElement;\n}\n\nconst CSS_IDENT_RE = /^[a-zA-Z_-][\\w-]*$/;\n\nexport function _createWebFontTemplate(fontFamily: string, resource: FontResource): string {\n  const display =\n    typeof resource.display === 'string' && CSS_IDENT_RE.test(resource.display)\n      ? resource.display\n      : FontDisplay.AUTO;\n  return `@font-face{font-family:${JSON.stringify(fontFamily)};src:url(${JSON.stringify(\n    resource.uri\n  )});font-display:${display}}`;\n}\n\nfunction _createWebStyle(fontFamily: string, resource: FontResource): HTMLStyleElement {\n  const fontStyle = _createWebFontTemplate(fontFamily, resource);\n\n  const styleElement = getStyleElement();\n  // @ts-ignore: TypeScript does not define HTMLStyleElement::styleSheet. This is just for IE and\n  // possibly can be removed if it's unnecessary on IE 11.\n  if (styleElement.styleSheet) {\n    const styleElementIE = styleElement as any;\n    styleElementIE.styleSheet.cssText = styleElementIE.styleSheet.cssText\n      ? styleElementIE.styleSheet.cssText + fontStyle\n      : fontStyle;\n  } else {\n    const textNode = document.createTextNode(fontStyle);\n    styleElement.appendChild(textNode);\n  }\n  return styleElement;\n}\n\nfunction isFontLoadingListenerSupported(): boolean {\n  const { userAgent } = window.navigator;\n  // WebKit is broken https://github.com/bramstein/fontfaceobserver/issues/95\n  const isIOS = !!userAgent.match(/iPad|iPhone/i);\n  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n  // Edge is broken https://github.com/bramstein/fontfaceobserver/issues/109#issuecomment-333356795\n  const isEdge = userAgent.includes('Edge');\n  // Internet Explorer\n  const isIE = userAgent.includes('Trident');\n  return !isSafari && !isIOS && !isEdge && !isIE;\n}\n"]}
\ No newline at end of file
diff --git a/packages/expo-font/build/FontLoader.web.d.ts.map b/packages/expo-font/build/FontLoader.web.d.ts.map
index 52fa74d4f95564..104819596d41e2 100644
--- a/packages/expo-font/build/FontLoader.web.d.ts.map
+++ b/packages/expo-font/build/FontLoader.web.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"FontLoader.web.d.ts","sourceRoot":"","sources":["../src/FontLoader.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAiC7D,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,UAAU,GAAG,KAAK,GAAG,YAAY,CAa1E;AAYD,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAY5F"}
\ No newline at end of file
+{"version":3,"file":"FontLoader.web.d.ts","sourceRoot":"","sources":["../src/FontLoader.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAiC7D,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,UAAU,GAAG,KAAK,GAAG,YAAY,CAa1E;AAYD,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAqB5F"}
\ No newline at end of file
diff --git a/packages/expo-font/build/FontLoader.web.js b/packages/expo-font/build/FontLoader.web.js
index c94c957b25b2f2..4051bf328d559e 100644
--- a/packages/expo-font/build/FontLoader.web.js
+++ b/packages/expo-font/build/FontLoader.web.js
@@ -53,11 +53,19 @@ export function loadSingleFontAsync(name, input) {
     if (typeof input !== 'object' || typeof input.uri !== 'string' || input.downloadAsync) {
         throwInvalidSourceError(input);
     }
+    // On the server, scope-misuse throws must propagate; a silent missing font is worse.
+    if (typeof window === 'undefined') {
+        return ExpoFontLoader.loadAsync(name, input);
+    }
+    // NOTE(@hassankhan): This seems broken for async calls; we should investigate removing
+    // `fontfaceobserver` altogether
     try {
         return ExpoFontLoader.loadAsync(name, input);
     }
     catch {
-        // No-op.
+        // `FontObserver` rejects on unsupported browsers/network timeouts (see #22954). The font
+        // still renders via the injected stylesheet; swallow the verification failure rather than
+        // surface it as an unhandled promise rejection.
     }
     return Promise.resolve();
 }
diff --git a/packages/expo-font/build/FontLoader.web.js.map b/packages/expo-font/build/FontLoader.web.js.map
index d749bed0b5d8bd..2b64e130a48a47 100644
--- a/packages/expo-font/build/FontLoader.web.js.map
+++ b/packages/expo-font/build/FontLoader.web.js.map
@@ -1 +1 @@
-{"version":3,"file":"FontLoader.web.js","sourceRoot":"","sources":["../src/FontLoader.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,SAAS,iBAAiB,CAAC,KAAiB;IAC1C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAK,IAAI,IAAI,CAAC;IACvB,CAAC;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QACrC,OAAO,iBAAiB,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IACpD,CAAC;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;QACtE,OAAO,iBAAiB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QACrC,OAAO,KAAK,CAAC,GAAG,IAAK,KAAe,CAAC,QAAQ,IAAK,KAAsB,CAAC,OAAO,IAAI,IAAI,CAAC;IAC3F,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAiB;IAC9C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,SAAS,IAAI,KAAK,EAAE,CAAC;QACpD,OAAO,KAAK,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC;IAC3C,CAAC;IAED,OAAO,WAAW,CAAC,IAAI,CAAC;AAC1B,CAAC;AAED,SAAS,wBAAwB,CAAC,KAAiB;IACjD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,YAAY,IAAI,KAAK,EAAE,CAAC;QACvD,OAAO,KAAK,CAAC,UAAU,IAAI,SAAS,CAAC;IACvC,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,MAAkB;IAClD,MAAM,GAAG,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACpD,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QACpC,uBAAuB,CAAC,GAAG,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO;QACL,GAAG;QACH,OAAO;QACP,UAAU;KACX,CAAC;AACJ,CAAC;AAED,SAAS,uBAAuB,CAAC,MAAW;IAC1C,IAAI,IAAI,GAAW,OAAO,MAAM,CAAC;IACjC,IAAI,IAAI,KAAK,QAAQ;QAAE,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC9D,MAAM,IAAI,UAAU,CAClB,iBAAiB,EACjB,8EAA8E,IAAI,EAAE,CACrF,CAAC;AACJ,CAAC;AAED,qCAAqC;AACrC,MAAM,UAAU,mBAAmB,CAAC,IAAY,EAAE,KAA2B;IAC3E,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAK,KAAa,CAAC,aAAa,EAAE,CAAC;QAC/F,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,IAAI,CAAC;QACH,OAAO,cAAc,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/C,CAAC;IAAC,MAAM,CAAC;QACP,SAAS;IACX,CAAC;IAED,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;AAC3B,CAAC","sourcesContent":["import { Asset } from 'expo-asset';\nimport { CodedError } from 'expo-modules-core';\n\nimport ExpoFontLoader from './ExpoFontLoader';\nimport type { FontResource, FontSource } from './Font.types';\nimport { FontDisplay } from './Font.types';\n\nfunction uriFromFontSource(asset: FontSource): string | number | null {\n  if (typeof asset === 'string') {\n    return asset || null;\n  } else if (typeof asset === 'number') {\n    return uriFromFontSource(Asset.fromModule(asset));\n  } else if (typeof asset === 'object' && typeof asset.uri === 'number') {\n    return uriFromFontSource(asset.uri);\n  } else if (typeof asset === 'object') {\n    return asset.uri || (asset as Asset).localUri || (asset as FontResource).default || null;\n  }\n\n  return null;\n}\n\nfunction displayFromFontSource(asset: FontSource): FontDisplay {\n  if (typeof asset === 'object' && 'display' in asset) {\n    return asset.display || FontDisplay.AUTO;\n  }\n\n  return FontDisplay.AUTO;\n}\n\nfunction testStringFromFontSource(asset: FontSource): string | undefined {\n  if (typeof asset === 'object' && 'testString' in asset) {\n    return asset.testString ?? undefined;\n  }\n\n  return undefined;\n}\n\nexport function getAssetForSource(source: FontSource): Asset | FontResource {\n  const uri = uriFromFontSource(source);\n  const display = displayFromFontSource(source);\n  const testString = testStringFromFontSource(source);\n  if (!uri || typeof uri !== 'string') {\n    throwInvalidSourceError(uri);\n  }\n\n  return {\n    uri,\n    display,\n    testString,\n  };\n}\n\nfunction throwInvalidSourceError(source: any): never {\n  let type: string = typeof source;\n  if (type === 'object') type = JSON.stringify(source, null, 2);\n  throw new CodedError(\n    `ERR_FONT_SOURCE`,\n    `Expected font asset of type \\`string | FontResource | Asset\\` instead got: ${type}`\n  );\n}\n\n// NOTE(EvanBacon): No async keyword!\nexport function loadSingleFontAsync(name: string, input: Asset | FontResource): Promise<void> {\n  if (typeof input !== 'object' || typeof input.uri !== 'string' || (input as any).downloadAsync) {\n    throwInvalidSourceError(input);\n  }\n\n  try {\n    return ExpoFontLoader.loadAsync(name, input);\n  } catch {\n    // No-op.\n  }\n\n  return Promise.resolve();\n}\n"]}
\ No newline at end of file
+{"version":3,"file":"FontLoader.web.js","sourceRoot":"","sources":["../src/FontLoader.web.ts"],"names":[],"mappings":"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","sourcesContent":["import { Asset } from 'expo-asset';\nimport { CodedError } from 'expo-modules-core';\n\nimport ExpoFontLoader from './ExpoFontLoader';\nimport type { FontResource, FontSource } from './Font.types';\nimport { FontDisplay } from './Font.types';\n\nfunction uriFromFontSource(asset: FontSource): string | number | null {\n  if (typeof asset === 'string') {\n    return asset || null;\n  } else if (typeof asset === 'number') {\n    return uriFromFontSource(Asset.fromModule(asset));\n  } else if (typeof asset === 'object' && typeof asset.uri === 'number') {\n    return uriFromFontSource(asset.uri);\n  } else if (typeof asset === 'object') {\n    return asset.uri || (asset as Asset).localUri || (asset as FontResource).default || null;\n  }\n\n  return null;\n}\n\nfunction displayFromFontSource(asset: FontSource): FontDisplay {\n  if (typeof asset === 'object' && 'display' in asset) {\n    return asset.display || FontDisplay.AUTO;\n  }\n\n  return FontDisplay.AUTO;\n}\n\nfunction testStringFromFontSource(asset: FontSource): string | undefined {\n  if (typeof asset === 'object' && 'testString' in asset) {\n    return asset.testString ?? undefined;\n  }\n\n  return undefined;\n}\n\nexport function getAssetForSource(source: FontSource): Asset | FontResource {\n  const uri = uriFromFontSource(source);\n  const display = displayFromFontSource(source);\n  const testString = testStringFromFontSource(source);\n  if (!uri || typeof uri !== 'string') {\n    throwInvalidSourceError(uri);\n  }\n\n  return {\n    uri,\n    display,\n    testString,\n  };\n}\n\nfunction throwInvalidSourceError(source: any): never {\n  let type: string = typeof source;\n  if (type === 'object') type = JSON.stringify(source, null, 2);\n  throw new CodedError(\n    `ERR_FONT_SOURCE`,\n    `Expected font asset of type \\`string | FontResource | Asset\\` instead got: ${type}`\n  );\n}\n\n// NOTE(EvanBacon): No async keyword!\nexport function loadSingleFontAsync(name: string, input: Asset | FontResource): Promise<void> {\n  if (typeof input !== 'object' || typeof input.uri !== 'string' || (input as any).downloadAsync) {\n    throwInvalidSourceError(input);\n  }\n\n  // On the server, scope-misuse throws must propagate; a silent missing font is worse.\n  if (typeof window === 'undefined') {\n    return ExpoFontLoader.loadAsync(name, input);\n  }\n\n  // NOTE(@hassankhan): This seems broken for async calls; we should investigate removing\n  // `fontfaceobserver` altogether\n  try {\n    return ExpoFontLoader.loadAsync(name, input);\n  } catch {\n    // `FontObserver` rejects on unsupported browsers/network timeouts (see #22954). The font\n    // still renders via the injected stylesheet; swallow the verification failure rather than\n    // surface it as an unhandled promise rejection.\n  }\n\n  return Promise.resolve();\n}\n"]}
\ No newline at end of file
diff --git a/packages/expo-font/build/server.d.ts b/packages/expo-font/build/server.d.ts
index f3f82b321922a8..e7b1faa8471d9e 100644
--- a/packages/expo-font/build/server.d.ts
+++ b/packages/expo-font/build/server.d.ts
@@ -1,14 +1,10 @@
 import type { FontSource, ServerFontResourceDescriptor } from './Font.types';
+export { withServerContext } from './serverContext';
 /**
  * @returns the server resources that should be statically extracted.
  * @private
  */
 export declare function getServerResources(): string[];
 export declare function getServerResourceDescriptors(): ServerFontResourceDescriptor[];
-/**
- * @returns clear the server resources from the global scope.
- * @private
- */
-export declare function resetServerContext(): void;
 export declare function registerStaticFont(fontFamily: string, source?: FontSource | null): void;
 //# sourceMappingURL=server.d.ts.map
\ No newline at end of file
diff --git a/packages/expo-font/build/server.d.ts.map b/packages/expo-font/build/server.d.ts.map
index c6bf36b29e8780..73d4da808e89be 100644
--- a/packages/expo-font/build/server.d.ts.map
+++ b/packages/expo-font/build/server.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAG7E;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAK7C;AAED,wBAAgB,4BAA4B,IAAI,4BAA4B,EAAE,CAK7E;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,SAKjC;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,QAWhF"}
\ No newline at end of file
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAG7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAK7C;AAED,wBAAgB,4BAA4B,IAAI,4BAA4B,EAAE,CAK7E;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,QAWhF"}
\ No newline at end of file
diff --git a/packages/expo-font/build/server.js b/packages/expo-font/build/server.js
index f098fc3f1f3ae0..63867a241c59cf 100644
--- a/packages/expo-font/build/server.js
+++ b/packages/expo-font/build/server.js
@@ -1,6 +1,7 @@
 import { CodedError, UnavailabilityError } from 'expo-modules-core';
 import ExpoFontLoader from './ExpoFontLoader';
 import { getAssetForSource, loadSingleFontAsync } from './FontLoader';
+export { withServerContext } from './serverContext';
 /**
  * @returns the server resources that should be statically extracted.
  * @private
@@ -17,16 +18,6 @@ export function getServerResourceDescriptors() {
     }
     return ExpoFontLoader.getServerResourceDescriptors();
 }
-/**
- * @returns clear the server resources from the global scope.
- * @private
- */
-export function resetServerContext() {
-    if (!ExpoFontLoader.resetServerContext) {
-        throw new UnavailabilityError('expo-font', 'resetServerContext');
-    }
-    return ExpoFontLoader.resetServerContext();
-}
 export function registerStaticFont(fontFamily, source) {
     // MUST BE A SYNC FUNCTION!
     if (!source) {
diff --git a/packages/expo-font/build/server.js.map b/packages/expo-font/build/server.js.map
index 1fa29eb3c45942..ce6405a2ed237b 100644
--- a/packages/expo-font/build/server.js.map
+++ b/packages/expo-font/build/server.js.map
@@ -1 +1 @@
-{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEtE;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAChC,IAAI,CAAC,cAAc,CAAC,kBAAkB,EAAE,CAAC;QACvC,MAAM,IAAI,mBAAmB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC;IACnE,CAAC;IACD,OAAO,cAAc,CAAC,kBAAkB,EAAE,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,4BAA4B;IAC1C,IAAI,CAAC,cAAc,CAAC,4BAA4B,EAAE,CAAC;QACjD,MAAM,IAAI,mBAAmB,CAAC,WAAW,EAAE,8BAA8B,CAAC,CAAC;IAC7E,CAAC;IACD,OAAO,cAAc,CAAC,4BAA4B,EAAE,CAAC;AACvD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAChC,IAAI,CAAC,cAAc,CAAC,kBAAkB,EAAE,CAAC;QACvC,MAAM,IAAI,mBAAmB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC;IACnE,CAAC;IACD,OAAO,cAAc,CAAC,kBAAkB,EAAE,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAkB,EAAE,MAA0B;IAC/E,2BAA2B;IAC3B,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,UAAU,CAClB,iBAAiB,EACjB,iDAAiD,UAAU,MAAM,MAAM,sEAAsE,UAAU,GAAG,CAC3J,CAAC;IACJ,CAAC;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAExC,mBAAmB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AACzC,CAAC","sourcesContent":["import { CodedError, UnavailabilityError } from 'expo-modules-core';\n\nimport ExpoFontLoader from './ExpoFontLoader';\nimport type { FontSource, ServerFontResourceDescriptor } from './Font.types';\nimport { getAssetForSource, loadSingleFontAsync } from './FontLoader';\n\n/**\n * @returns the server resources that should be statically extracted.\n * @private\n */\nexport function getServerResources(): string[] {\n  if (!ExpoFontLoader.getServerResources) {\n    throw new UnavailabilityError('expo-font', 'getServerResources');\n  }\n  return ExpoFontLoader.getServerResources();\n}\n\nexport function getServerResourceDescriptors(): ServerFontResourceDescriptor[] {\n  if (!ExpoFontLoader.getServerResourceDescriptors) {\n    throw new UnavailabilityError('expo-font', 'getServerResourceDescriptors');\n  }\n  return ExpoFontLoader.getServerResourceDescriptors();\n}\n\n/**\n * @returns clear the server resources from the global scope.\n * @private\n */\nexport function resetServerContext() {\n  if (!ExpoFontLoader.resetServerContext) {\n    throw new UnavailabilityError('expo-font', 'resetServerContext');\n  }\n  return ExpoFontLoader.resetServerContext();\n}\n\nexport function registerStaticFont(fontFamily: string, source?: FontSource | null) {\n  // MUST BE A SYNC FUNCTION!\n  if (!source) {\n    throw new CodedError(\n      `ERR_FONT_SOURCE`,\n      `Cannot load null or undefined font source: { \"${fontFamily}\": ${source} }. Expected asset of type \\`FontSource\\` for fontFamily of name: \"${fontFamily}\"`\n    );\n  }\n  const asset = getAssetForSource(source);\n\n  loadSingleFontAsync(fontFamily, asset);\n}\n"]}
\ No newline at end of file
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAChC,IAAI,CAAC,cAAc,CAAC,kBAAkB,EAAE,CAAC;QACvC,MAAM,IAAI,mBAAmB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC;IACnE,CAAC;IACD,OAAO,cAAc,CAAC,kBAAkB,EAAE,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,4BAA4B;IAC1C,IAAI,CAAC,cAAc,CAAC,4BAA4B,EAAE,CAAC;QACjD,MAAM,IAAI,mBAAmB,CAAC,WAAW,EAAE,8BAA8B,CAAC,CAAC;IAC7E,CAAC;IACD,OAAO,cAAc,CAAC,4BAA4B,EAAE,CAAC;AACvD,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAkB,EAAE,MAA0B;IAC/E,2BAA2B;IAC3B,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,UAAU,CAClB,iBAAiB,EACjB,iDAAiD,UAAU,MAAM,MAAM,sEAAsE,UAAU,GAAG,CAC3J,CAAC;IACJ,CAAC;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAExC,mBAAmB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AACzC,CAAC","sourcesContent":["import { CodedError, UnavailabilityError } from 'expo-modules-core';\n\nimport ExpoFontLoader from './ExpoFontLoader';\nimport type { FontSource, ServerFontResourceDescriptor } from './Font.types';\nimport { getAssetForSource, loadSingleFontAsync } from './FontLoader';\n\nexport { withServerContext } from './serverContext';\n\n/**\n * @returns the server resources that should be statically extracted.\n * @private\n */\nexport function getServerResources(): string[] {\n  if (!ExpoFontLoader.getServerResources) {\n    throw new UnavailabilityError('expo-font', 'getServerResources');\n  }\n  return ExpoFontLoader.getServerResources();\n}\n\nexport function getServerResourceDescriptors(): ServerFontResourceDescriptor[] {\n  if (!ExpoFontLoader.getServerResourceDescriptors) {\n    throw new UnavailabilityError('expo-font', 'getServerResourceDescriptors');\n  }\n  return ExpoFontLoader.getServerResourceDescriptors();\n}\n\nexport function registerStaticFont(fontFamily: string, source?: FontSource | null) {\n  // MUST BE A SYNC FUNCTION!\n  if (!source) {\n    throw new CodedError(\n      `ERR_FONT_SOURCE`,\n      `Cannot load null or undefined font source: { \"${fontFamily}\": ${source} }. Expected asset of type \\`FontSource\\` for fontFamily of name: \"${fontFamily}\"`\n    );\n  }\n  const asset = getAssetForSource(source);\n\n  loadSingleFontAsync(fontFamily, asset);\n}\n"]}
\ No newline at end of file
diff --git a/packages/expo-font/build/serverContext.d.ts b/packages/expo-font/build/serverContext.d.ts
new file mode 100644
index 00000000000000..168bec7e0db895
--- /dev/null
+++ b/packages/expo-font/build/serverContext.d.ts
@@ -0,0 +1,13 @@
+import type { ServerFontResourceDescriptor } from './Font.types';
+type ServerFontEntry = {
+    name: string;
+    css: string;
+    resourceId: string;
+};
+export declare function withServerContext<T>(callback: () => T): T;
+export declare function addServerFont(_entry: ServerFontEntry): void;
+export declare function getServerResourceDescriptors(): ServerFontResourceDescriptor[];
+export declare function getLoadedServerFonts(): string[];
+export declare function isServerFontLoaded(_name: string): boolean;
+export {};
+//# sourceMappingURL=serverContext.d.ts.map
\ No newline at end of file
diff --git a/packages/expo-font/build/serverContext.d.ts.map b/packages/expo-font/build/serverContext.d.ts.map
new file mode 100644
index 00000000000000..44ff99559f40f2
--- /dev/null
+++ b/packages/expo-font/build/serverContext.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"serverContext.d.ts","sourceRoot":"","sources":["../src/serverContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAEjE,KAAK,eAAe,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzE,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAEzD;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,CAAG;AAE/D,wBAAgB,4BAA4B,IAAI,4BAA4B,EAAE,CAE7E;AAED,wBAAgB,oBAAoB,IAAI,MAAM,EAAE,CAE/C;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEzD"}
\ No newline at end of file
diff --git a/packages/expo-font/build/serverContext.js b/packages/expo-font/build/serverContext.js
new file mode 100644
index 00000000000000..9dda0796a62084
--- /dev/null
+++ b/packages/expo-font/build/serverContext.js
@@ -0,0 +1,14 @@
+export function withServerContext(callback) {
+    return callback();
+}
+export function addServerFont(_entry) { }
+export function getServerResourceDescriptors() {
+    return [];
+}
+export function getLoadedServerFonts() {
+    return [];
+}
+export function isServerFontLoaded(_name) {
+    return false;
+}
+//# sourceMappingURL=serverContext.js.map
\ No newline at end of file
diff --git a/packages/expo-font/build/serverContext.js.map b/packages/expo-font/build/serverContext.js.map
new file mode 100644
index 00000000000000..0b689c4e38bfca
--- /dev/null
+++ b/packages/expo-font/build/serverContext.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"serverContext.js","sourceRoot":"","sources":["../src/serverContext.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,iBAAiB,CAAI,QAAiB;IACpD,OAAO,QAAQ,EAAE,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,MAAuB,IAAS,CAAC;AAE/D,MAAM,UAAU,4BAA4B;IAC1C,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,UAAU,oBAAoB;IAClC,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,KAAa;IAC9C,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import type { ServerFontResourceDescriptor } from './Font.types';\n\ntype ServerFontEntry = { name: string; css: string; resourceId: string };\n\nexport function withServerContext<T>(callback: () => T): T {\n  return callback();\n}\n\nexport function addServerFont(_entry: ServerFontEntry): void {}\n\nexport function getServerResourceDescriptors(): ServerFontResourceDescriptor[] {\n  return [];\n}\n\nexport function getLoadedServerFonts(): string[] {\n  return [];\n}\n\nexport function isServerFontLoaded(_name: string): boolean {\n  return false;\n}\n"]}
\ No newline at end of file
diff --git a/packages/expo-font/build/serverContext.web.d.ts b/packages/expo-font/build/serverContext.web.d.ts
new file mode 100644
index 00000000000000..f374c980a87ba9
--- /dev/null
+++ b/packages/expo-font/build/serverContext.web.d.ts
@@ -0,0 +1,13 @@
+import type { ServerFontResourceDescriptor } from './Font.types';
+type ServerFontEntry = {
+    name: string;
+    css: string;
+    resourceId: string;
+};
+export declare function withServerContext<T>(callback: () => T): T;
+export declare function addServerFont(entry: ServerFontEntry): void;
+export declare function getServerResourceDescriptors(): ServerFontResourceDescriptor[];
+export declare function getLoadedServerFonts(): string[];
+export declare function isServerFontLoaded(name: string): boolean;
+export {};
+//# sourceMappingURL=serverContext.web.d.ts.map
\ No newline at end of file
diff --git a/packages/expo-font/build/serverContext.web.d.ts.map b/packages/expo-font/build/serverContext.web.d.ts.map
new file mode 100644
index 00000000000000..a7f19034128e82
--- /dev/null
+++ b/packages/expo-font/build/serverContext.web.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"serverContext.web.d.ts","sourceRoot":"","sources":["../src/serverContext.web.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAEjE,KAAK,eAAe,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AA6BzE,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAKzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAM1D;AAED,wBAAgB,4BAA4B,IAAI,4BAA4B,EAAE,CAsB7E;AAED,wBAAgB,oBAAoB,IAAI,MAAM,EAAE,CAM/C;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAWxD"}
\ No newline at end of file
diff --git a/packages/expo-font/build/serverContext.web.js b/packages/expo-font/build/serverContext.web.js
new file mode 100644
index 00000000000000..e79c9aabb70d5b
--- /dev/null
+++ b/packages/expo-font/build/serverContext.web.js
@@ -0,0 +1,76 @@
+import { AsyncLocalStorage } from 'node:async_hooks';
+const ID = 'expo-generated-fonts';
+let storage = null;
+function getStorage() {
+    if (typeof window !== 'undefined') {
+        throw new Error('expo-font server context is server-only and cannot be used in the browser.');
+    }
+    if (!storage) {
+        storage = new AsyncLocalStorage();
+    }
+    return storage;
+}
+function requireStore() {
+    const store = getStorage().getStore();
+    if (!store) {
+        throw new Error('expo-font server context accessed outside of withServerContext(). ' +
+            'Wrap your server-side font usage in withServerContext(() => /* server code */).');
+    }
+    return store;
+}
+export function withServerContext(callback) {
+    if (typeof window !== 'undefined') {
+        return callback();
+    }
+    return getStorage().run(new Map(), callback);
+}
+export function addServerFont(entry) {
+    const store = requireStore();
+    if (!store.has(entry.css)) {
+        // Key on CSS so the same family with different options stays as separate entries.
+        store.set(entry.css, entry);
+    }
+}
+export function getServerResourceDescriptors() {
+    const entries = [...requireStore().values()];
+    if (!entries.length) {
+        return [];
+    }
+    const css = entries.map(({ css }) => css).join('\n');
+    // One <link rel="preload"> per URI even if multiple @font-face entries share it.
+    const links = [...new Set(entries.map(({ resourceId }) => resourceId))];
+    return [
+        {
+            css,
+            id: ID,
+            type: 'style',
+        },
+        ...links.map((resourceId) => ({
+            as: 'font',
+            crossOrigin: '',
+            href: resourceId,
+            rel: 'preload',
+            type: 'link',
+        })),
+    ];
+}
+export function getLoadedServerFonts() {
+    const store = getStorage().getStore();
+    if (!store) {
+        return [];
+    }
+    return [...store.values()].map(({ name }) => name);
+}
+export function isServerFontLoaded(name) {
+    const store = getStorage().getStore();
+    if (!store) {
+        return false;
+    }
+    for (const entry of store.values()) {
+        if (entry.name === name) {
+            return true;
+        }
+    }
+    return false;
+}
+//# sourceMappingURL=serverContext.web.js.map
\ No newline at end of file
diff --git a/packages/expo-font/build/serverContext.web.js.map b/packages/expo-font/build/serverContext.web.js.map
new file mode 100644
index 00000000000000..30dd21d8ce22d0
--- /dev/null
+++ b/packages/expo-font/build/serverContext.web.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"serverContext.web.js","sourceRoot":"","sources":["../src/serverContext.web.ts"],"names":[],"mappings":"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","sourcesContent":["import { AsyncLocalStorage } from 'node:async_hooks';\n\nimport type { ServerFontResourceDescriptor } from './Font.types';\n\ntype ServerFontEntry = { name: string; css: string; resourceId: string };\n\nconst ID = 'expo-generated-fonts';\n\ntype ServerStore = Map<string, ServerFontEntry>;\n\nlet storage: AsyncLocalStorage<ServerStore> | null = null;\n\nfunction getStorage(): AsyncLocalStorage<ServerStore> {\n  if (typeof window !== 'undefined') {\n    throw new Error('expo-font server context is server-only and cannot be used in the browser.');\n  }\n  if (!storage) {\n    storage = new AsyncLocalStorage<ServerStore>();\n  }\n  return storage;\n}\n\nfunction requireStore(): ServerStore {\n  const store = getStorage().getStore();\n  if (!store) {\n    throw new Error(\n      'expo-font server context accessed outside of withServerContext(). ' +\n        'Wrap your server-side font usage in withServerContext(() => /* server code */).'\n    );\n  }\n  return store;\n}\n\nexport function withServerContext<T>(callback: () => T): T {\n  if (typeof window !== 'undefined') {\n    return callback();\n  }\n  return getStorage().run(new Map(), callback);\n}\n\nexport function addServerFont(entry: ServerFontEntry): void {\n  const store = requireStore();\n  if (!store.has(entry.css)) {\n    // Key on CSS so the same family with different options stays as separate entries.\n    store.set(entry.css, entry);\n  }\n}\n\nexport function getServerResourceDescriptors(): ServerFontResourceDescriptor[] {\n  const entries = [...requireStore().values()];\n  if (!entries.length) {\n    return [];\n  }\n  const css = entries.map(({ css }) => css).join('\\n');\n  // One <link rel=\"preload\"> per URI even if multiple @font-face entries share it.\n  const links = [...new Set(entries.map(({ resourceId }) => resourceId))];\n  return [\n    {\n      css,\n      id: ID,\n      type: 'style' as const,\n    },\n    ...links.map((resourceId) => ({\n      as: 'font' as const,\n      crossOrigin: '' as const,\n      href: resourceId,\n      rel: 'preload' as const,\n      type: 'link' as const,\n    })),\n  ];\n}\n\nexport function getLoadedServerFonts(): string[] {\n  const store = getStorage().getStore();\n  if (!store) {\n    return [];\n  }\n  return [...store.values()].map(({ name }) => name);\n}\n\nexport function isServerFontLoaded(name: string): boolean {\n  const store = getStorage().getStore();\n  if (!store) {\n    return false;\n  }\n  for (const entry of store.values()) {\n    if (entry.name === name) {\n      return true;\n    }\n  }\n  return false;\n}\n"]}
\ No newline at end of file
diff --git a/packages/expo-font/src/ExpoFontLoader.ts b/packages/expo-font/src/ExpoFontLoader.ts
index c76fffbf9952cf..1308ecdb1ff5a5 100644
--- a/packages/expo-font/src/ExpoFontLoader.ts
+++ b/packages/expo-font/src/ExpoFontLoader.ts
@@ -11,7 +11,6 @@ export type ExpoFontLoaderModule = {
   isLoaded?: (fontFamilyName: string, options?: UnloadFontOptions) => boolean;
   getServerResources?: () => string[];
   getServerResourceDescriptors?: () => ServerFontResourceDescriptor[];
-  resetServerContext?: () => void;
 };
 
 const m: ExpoFontLoaderModule =
diff --git a/packages/expo-font/src/ExpoFontLoader.web.ts b/packages/expo-font/src/ExpoFontLoader.web.ts
index 493c0fa1143d17..5a1442a3dfee2e 100644
--- a/packages/expo-font/src/ExpoFontLoader.web.ts
+++ b/packages/expo-font/src/ExpoFontLoader.web.ts
@@ -3,7 +3,13 @@ import FontObserver from 'fontfaceobserver';
 
 import type { ExpoFontLoaderModule } from './ExpoFontLoader';
 import type { UnloadFontOptions } from './Font';
-import { FontDisplay, type FontResource, type ServerFontResourceDescriptor } from './Font.types';
+import { FontDisplay, type FontResource } from './Font.types';
+import {
+  addServerFont,
+  getLoadedServerFonts,
+  getServerResourceDescriptors as readServerResourceDescriptors,
+  isServerFontLoaded,
+} from './serverContext';
 
 function getFontFaceStyleSheet(): CSSStyleSheet | null {
   if (typeof window === 'undefined') {
@@ -47,32 +53,6 @@ function getFontFaceRulesMatchingResource(
   });
 }
 
-const serverContext: Set<{ name: string; css: string; resourceId: string }> = new Set();
-
-function getServerResourceDescriptors(): ServerFontResourceDescriptor[] {
-  const entries = [...serverContext.entries()];
-  if (!entries.length) {
-    return [];
-  }
-  const css = entries.map(([{ css }]) => css).join('\n');
-  const links = entries.map(([{ resourceId }]) => resourceId);
-  // TODO: Maybe return nothing if no fonts were loaded.
-  return [
-    {
-      css,
-      id: ID,
-      type: 'style' as const,
-    },
-    ...links.map((resourceId) => ({
-      as: 'font' as const,
-      crossOrigin: '' as const,
-      href: resourceId,
-      rel: 'preload' as const,
-      type: 'link' as const,
-    })),
-  ];
-}
-
 const ExpoFontLoader: Required<ExpoFontLoaderModule> = {
   async unloadAllAsync(): Promise<void> {
     if (typeof window === 'undefined') return;
@@ -93,7 +73,7 @@ const ExpoFontLoader: Required<ExpoFontLoaderModule> = {
   },
 
   getServerResources(): string[] {
-    const elements = getServerResourceDescriptors();
+    const elements = readServerResourceDescriptors();
 
     return elements
       .map((element) => {
@@ -110,16 +90,12 @@ const ExpoFontLoader: Required<ExpoFontLoaderModule> = {
   },
 
   getServerResourceDescriptors() {
-    return getServerResourceDescriptors();
-  },
-
-  resetServerContext() {
-    serverContext.clear();
+    return readServerResourceDescriptors();
   },
 
   getLoadedFonts(): string[] {
     if (typeof window === 'undefined') {
-      return [...serverContext.values()].map(({ name }) => name);
+      return getLoadedServerFonts();
     }
     const rules = getFontFaceRules();
     return rules.map(({ rule }) => rule.style.fontFamily);
@@ -127,9 +103,7 @@ const ExpoFontLoader: Required<ExpoFontLoaderModule> = {
 
   isLoaded(fontFamilyName: string, resource: UnloadFontOptions = {}): boolean {
     if (typeof window === 'undefined') {
-      return !![...serverContext.values()].find((asset) => {
-        return asset.name === fontFamilyName;
-      });
+      return isServerFontLoaded(fontFamilyName);
     }
     return getFontFaceRulesMatchingResource(fontFamilyName, resource)?.length > 0;
   },
@@ -145,7 +119,7 @@ const ExpoFontLoader: Required<ExpoFontLoaderModule> = {
       );
     }
     if (typeof window === 'undefined') {
-      serverContext.add({
+      addServerFont({
         name: fontFamilyName,
         css: _createWebFontTemplate(fontFamilyName, resource),
         // @ts-expect-error: typeof string
diff --git a/packages/expo-font/src/FontLoader.web.ts b/packages/expo-font/src/FontLoader.web.ts
index d094711dbaea18..9ec57e08274055 100644
--- a/packages/expo-font/src/FontLoader.web.ts
+++ b/packages/expo-font/src/FontLoader.web.ts
@@ -65,10 +65,19 @@ export function loadSingleFontAsync(name: string, input: Asset | FontResource):
     throwInvalidSourceError(input);
   }
 
+  // On the server, scope-misuse throws must propagate; a silent missing font is worse.
+  if (typeof window === 'undefined') {
+    return ExpoFontLoader.loadAsync(name, input);
+  }
+
+  // NOTE(@hassankhan): This seems broken for async calls; we should investigate removing
+  // `fontfaceobserver` altogether
   try {
     return ExpoFontLoader.loadAsync(name, input);
   } catch {
-    // No-op.
+    // `FontObserver` rejects on unsupported browsers/network timeouts (see #22954). The font
+    // still renders via the injected stylesheet; swallow the verification failure rather than
+    // surface it as an unhandled promise rejection.
   }
 
   return Promise.resolve();
diff --git a/packages/expo-font/src/__tests__/Font-test.node.ts b/packages/expo-font/src/__tests__/Font-test.node.ts
index 09c2714e91a2f4..31b09cc7eda6f3 100644
--- a/packages/expo-font/src/__tests__/Font-test.node.ts
+++ b/packages/expo-font/src/__tests__/Font-test.node.ts
@@ -9,38 +9,78 @@ it(`returns sync results`, () => {
   const name = 'foo bar';
   const resource = { uri: 'font.ttf' };
 
-  // Always true in Node
-  expect(Font.isLoaded(name)).toBe(false);
+  Server.withServerContext(() => {
+    // Always true in Node
+    expect(Font.isLoaded(name)).toBe(false);
 
-  Font.loadAsync(name, resource);
-
-  expect(Font.isLoaded(name)).toBe(true);
-  expect(Server.getServerResources()).toEqual([
-    '<style id="expo-generated-fonts">@font-face{font-family:"foo bar";src:url("font.ttf");font-display:auto}</style>',
-    '<link rel="preload" href="font.ttf" as="font" crossorigin="" />',
-  ]);
-  expect(Server.getServerResourceDescriptors()).toEqual([
-    {
-      css: '@font-face{font-family:"foo bar";src:url("font.ttf");font-display:auto}',
-      id: 'expo-generated-fonts',
-      type: 'style',
-    },
-    {
-      as: 'font',
-      crossOrigin: '',
-      href: 'font.ttf',
-      rel: 'preload',
-      type: 'link',
-    },
-  ]);
-
-  Server.resetServerContext();
-  expect(Font.isLoaded(name)).toBe(false);
+    Font.loadAsync(name, resource);
 
-  expect(Server.getServerResources()).toEqual([]);
-  expect(Server.getServerResourceDescriptors()).toEqual([]);
+    expect(Font.isLoaded(name)).toBe(true);
+    expect(Server.getServerResources()).toEqual([
+      '<style id="expo-generated-fonts">@font-face{font-family:"foo bar";src:url("font.ttf");font-display:auto}</style>',
+      '<link rel="preload" href="font.ttf" as="font" crossorigin="" />',
+    ]);
+    expect(Server.getServerResourceDescriptors()).toEqual([
+      {
+        css: '@font-face{font-family:"foo bar";src:url("font.ttf");font-display:auto}',
+        id: 'expo-generated-fonts',
+        type: 'style',
+      },
+      {
+        as: 'font',
+        crossOrigin: '',
+        href: 'font.ttf',
+        rel: 'preload',
+        type: 'link',
+      },
+    ]);
+  });
+
+  expect(Font.isLoaded(name)).toBe(false);
+  expect(Font.getLoadedFonts()).toHaveLength(0);
 });
 
-it('getLoadedFonts is available', () => {
+it('`getLoadedFonts()` is available', () => {
   expect(Font.getLoadedFonts()).toHaveLength(0);
 });
+
+it('`Font.loadAsync()` throws when called outside `withServerContext()`', () => {
+  expect(() => Font.loadAsync('A', { uri: 'a.ttf' })).toThrow(/outside of withServerContext/);
+});
+
+it('isolates fonts between two concurrent server renders', async () => {
+  // Each render is wrapped in `withServerContext()`; two overlapping renders must not leak fonts
+  // into each other.
+  const release: Record<'a' | 'b', () => void> = { a: () => {}, b: () => {} };
+  const blocker = (key: 'a' | 'b') => new Promise<void>((resolve) => (release[key] = resolve));
+
+  const renderA = Server.withServerContext(async () => {
+    Font.loadAsync('FamilyA', { uri: 'a.ttf' });
+    // Yield to render B mid-scope, proves the ALS store survives interleaved writes.
+    await blocker('a');
+    return Server.getServerResources();
+  });
+
+  const renderB = Server.withServerContext(async () => {
+    Font.loadAsync('FamilyB', { uri: 'b.ttf' });
+    await blocker('b');
+    return Server.getServerResources();
+  });
+
+  release.b();
+  release.a();
+
+  const [resourcesA, resourcesB] = await Promise.all([renderA, renderB]);
+  const htmlA = resourcesA.join('');
+  const htmlB = resourcesB.join('');
+
+  expect(htmlA).toContain('FamilyA');
+  expect(htmlA).toContain('a.ttf');
+  expect(htmlA).not.toContain('FamilyB');
+  expect(htmlA).not.toContain('b.ttf');
+
+  expect(htmlB).toContain('FamilyB');
+  expect(htmlB).toContain('b.ttf');
+  expect(htmlB).not.toContain('FamilyA');
+  expect(htmlB).not.toContain('a.ttf');
+});
diff --git a/packages/expo-font/src/__tests__/serverContext-test.node.ts b/packages/expo-font/src/__tests__/serverContext-test.node.ts
new file mode 100644
index 00000000000000..cb915d849979aa
--- /dev/null
+++ b/packages/expo-font/src/__tests__/serverContext-test.node.ts
@@ -0,0 +1,65 @@
+import { addServerFont, getServerResourceDescriptors, withServerContext } from '../serverContext';
+
+const fontA = { name: 'A', css: '@font-face{font-family:"A"}', resourceId: 'a.ttf' };
+const fontB = { name: 'B', css: '@font-face{font-family:"B"}', resourceId: 'b.ttf' };
+
+it('throws when font registry is read or written outside a scope', () => {
+  expect(() => addServerFont(fontA)).toThrow(/outside of withServerContext/);
+  expect(() => getServerResourceDescriptors()).toThrow(/outside of withServerContext/);
+});
+
+it('deduplicates identical font entries within one scope', () => {
+  const descriptors = withServerContext(() => {
+    addServerFont(fontA);
+    addServerFont(fontA);
+    addServerFont(fontA);
+    return getServerResourceDescriptors();
+  });
+
+  expect(descriptors).toHaveLength(2);
+  expect(descriptors[0]).toMatchObject({ type: 'style', css: fontA.css });
+  expect(descriptors[1]).toMatchObject({ type: 'link', href: fontA.resourceId });
+});
+
+it('keeps separate entries for the same family loaded with different CSS', () => {
+  // E.g. `loadAsync('X', { uri: 'x.ttf', display: 'swap' })` and `{ display: 'block' }` generate
+  // different @font-face rules; both must be emitted. Preloads still dedupe by resourceId.
+  const swap = {
+    name: 'X',
+    css: '@font-face{font-family:"X";font-display:swap}',
+    resourceId: 'x.ttf',
+  };
+  const block = {
+    name: 'X',
+    css: '@font-face{font-family:"X";font-display:block}',
+    resourceId: 'x.ttf',
+  };
+
+  const descriptors = withServerContext(() => {
+    addServerFont(swap);
+    addServerFont(block);
+    return getServerResourceDescriptors();
+  });
+
+  const styles = descriptors.filter((d) => d.type === 'style');
+  const links = descriptors.filter((d) => d.type === 'link');
+  expect(styles).toHaveLength(1);
+  expect(styles[0]).toMatchObject({ css: `${swap.css}\n${block.css}` });
+  expect(links).toHaveLength(1);
+  expect(links[0]).toMatchObject({ href: 'x.ttf' });
+});
+
+it('preserves the scope across awaits in the callback', async () => {
+  const result = await withServerContext(async () => {
+    addServerFont(fontA);
+    await Promise.resolve();
+    await new Promise((r) => setTimeout(r, 0));
+    return getServerResourceDescriptors();
+  });
+
+  expect(result.find((d) => d.type === 'link')).toMatchObject({ href: fontA.resourceId });
+});
+
+it('returns an empty descriptor list for a scope that loaded nothing', () => {
+  expect(withServerContext(() => getServerResourceDescriptors())).toEqual([]);
+});
diff --git a/packages/expo-font/src/server.ts b/packages/expo-font/src/server.ts
index 1afc3d2ee87980..ea6365b5d113a6 100644
--- a/packages/expo-font/src/server.ts
+++ b/packages/expo-font/src/server.ts
@@ -4,6 +4,8 @@ import ExpoFontLoader from './ExpoFontLoader';
 import type { FontSource, ServerFontResourceDescriptor } from './Font.types';
 import { getAssetForSource, loadSingleFontAsync } from './FontLoader';
 
+export { withServerContext } from './serverContext';
+
 /**
  * @returns the server resources that should be statically extracted.
  * @private
@@ -22,17 +24,6 @@ export function getServerResourceDescriptors(): ServerFontResourceDescriptor[] {
   return ExpoFontLoader.getServerResourceDescriptors();
 }
 
-/**
- * @returns clear the server resources from the global scope.
- * @private
- */
-export function resetServerContext() {
-  if (!ExpoFontLoader.resetServerContext) {
-    throw new UnavailabilityError('expo-font', 'resetServerContext');
-  }
-  return ExpoFontLoader.resetServerContext();
-}
-
 export function registerStaticFont(fontFamily: string, source?: FontSource | null) {
   // MUST BE A SYNC FUNCTION!
   if (!source) {
diff --git a/packages/expo-font/src/serverContext.ts b/packages/expo-font/src/serverContext.ts
new file mode 100644
index 00000000000000..9fc0d92618adbb
--- /dev/null
+++ b/packages/expo-font/src/serverContext.ts
@@ -0,0 +1,21 @@
+import type { ServerFontResourceDescriptor } from './Font.types';
+
+type ServerFontEntry = { name: string; css: string; resourceId: string };
+
+export function withServerContext<T>(callback: () => T): T {
+  return callback();
+}
+
+export function addServerFont(_entry: ServerFontEntry): void {}
+
+export function getServerResourceDescriptors(): ServerFontResourceDescriptor[] {
+  return [];
+}
+
+export function getLoadedServerFonts(): string[] {
+  return [];
+}
+
+export function isServerFontLoaded(_name: string): boolean {
+  return false;
+}
diff --git a/packages/expo-font/src/serverContext.web.ts b/packages/expo-font/src/serverContext.web.ts
new file mode 100644
index 00000000000000..fa8fe7872088ad
--- /dev/null
+++ b/packages/expo-font/src/serverContext.web.ts
@@ -0,0 +1,92 @@
+import { AsyncLocalStorage } from 'node:async_hooks';
+
+import type { ServerFontResourceDescriptor } from './Font.types';
+
+type ServerFontEntry = { name: string; css: string; resourceId: string };
+
+const ID = 'expo-generated-fonts';
+
+type ServerStore = Map<string, ServerFontEntry>;
+
+let storage: AsyncLocalStorage<ServerStore> | null = null;
+
+function getStorage(): AsyncLocalStorage<ServerStore> {
+  if (typeof window !== 'undefined') {
+    throw new Error('expo-font server context is server-only and cannot be used in the browser.');
+  }
+  if (!storage) {
+    storage = new AsyncLocalStorage<ServerStore>();
+  }
+  return storage;
+}
+
+function requireStore(): ServerStore {
+  const store = getStorage().getStore();
+  if (!store) {
+    throw new Error(
+      'expo-font server context accessed outside of withServerContext(). ' +
+        'Wrap your server-side font usage in withServerContext(() => /* server code */).'
+    );
+  }
+  return store;
+}
+
+export function withServerContext<T>(callback: () => T): T {
+  if (typeof window !== 'undefined') {
+    return callback();
+  }
+  return getStorage().run(new Map(), callback);
+}
+
+export function addServerFont(entry: ServerFontEntry): void {
+  const store = requireStore();
+  if (!store.has(entry.css)) {
+    // Key on CSS so the same family with different options stays as separate entries.
+    store.set(entry.css, entry);
+  }
+}
+
+export function getServerResourceDescriptors(): ServerFontResourceDescriptor[] {
+  const entries = [...requireStore().values()];
+  if (!entries.length) {
+    return [];
+  }
+  const css = entries.map(({ css }) => css).join('\n');
+  // One <link rel="preload"> per URI even if multiple @font-face entries share it.
+  const links = [...new Set(entries.map(({ resourceId }) => resourceId))];
+  return [
+    {
+      css,
+      id: ID,
+      type: 'style' as const,
+    },
+    ...links.map((resourceId) => ({
+      as: 'font' as const,
+      crossOrigin: '' as const,
+      href: resourceId,
+      rel: 'preload' as const,
+      type: 'link' as const,
+    })),
+  ];
+}
+
+export function getLoadedServerFonts(): string[] {
+  const store = getStorage().getStore();
+  if (!store) {
+    return [];
+  }
+  return [...store.values()].map(({ name }) => name);
+}
+
+export function isServerFontLoaded(name: string): boolean {
+  const store = getStorage().getStore();
+  if (!store) {
+    return false;
+  }
+  for (const entry of store.values()) {
+    if (entry.name === name) {
+      return true;
+    }
+  }
+  return false;
+}
diff --git a/packages/expo-font/tsconfig.json b/packages/expo-font/tsconfig.json
index f068839f3172db..12afe363ee5bdc 100644
--- a/packages/expo-font/tsconfig.json
+++ b/packages/expo-font/tsconfig.json
@@ -1,9 +1,9 @@
-// @generated by expo-module-scripts
 {
   "extends": "expo-module-scripts/tsconfig.base",
   "compilerOptions": {
     "rootDir": "./src",
-    "outDir": "./build"
+    "outDir": "./build",
+    "types": ["jest", "node"]
   },
   "include": ["./src"],
   "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
diff --git a/packages/expo/CHANGELOG.md b/packages/expo/CHANGELOG.md
index 197653431b52d6..dc4f908071f7b5 100644
--- a/packages/expo/CHANGELOG.md
+++ b/packages/expo/CHANGELOG.md
@@ -16,6 +16,7 @@
 - Prevent fatal `The stream is not in a state that permits close` in `expo/fetch` when native delivers `didComplete`/`didFailWithError` after the consumer has already canceled the body stream. ([#44909](https://github.com/expo/expo/pull/44909) by [@safaiyeh](https://github.com/safaiyeh))
 - Adopted the UIKit scene-based life cycle on iOS so apps built with the iOS 27 SDK launch correctly. ([#46733](https://github.com/expo/expo/pull/46733) by [@alanjhughes](https://github.com/alanjhughes))
 - [iOS] Mark `ExpoAppSceneDelegate` as unavailable in extensions. ([#46799](https://github.com/expo/expo/pull/46799) by [@jakex7](https://github.com/jakex7))
+- Fix `asyncRoutes` failing on Android and iOS with `Requiring unknown module` ([#46870](https://github.com/expo/expo/pull/46870) by [@hassankhan](https://github.com/hassankhan))
 
 ### 💡 Others
 
diff --git a/packages/expo/src/async-require/__tests__/asyncRequireModule.test.ts b/packages/expo/src/async-require/__tests__/asyncRequireModule.test.ts
index 4d333167776da3..dc837c933d743c 100644
--- a/packages/expo/src/async-require/__tests__/asyncRequireModule.test.ts
+++ b/packages/expo/src/async-require/__tests__/asyncRequireModule.test.ts
@@ -15,6 +15,7 @@ describe('asyncRequireModule', () => {
   let mockImportAll: jest.Mock;
   let mockRequire: any;
   let asyncRequire: any;
+  const originalExpoOs = process.env.EXPO_OS;
 
   beforeEach(() => {
     mockImportAll = jest.fn((id: number, _moduleName?: string) => ({
@@ -64,16 +65,27 @@ describe('asyncRequireModule', () => {
 
       function asyncRequireImpl(moduleID, paths, moduleName) {
         var importAll = function() { return require.importAll(moduleID, moduleName); };
-        try {
-          // Try importing first to skip bundle loading when the bundle is already preloaded.
-          return importAll();
-        } catch (error) {
-          var maybeLoadBundlePromise = maybeLoadBundle(moduleID, paths);
-          if (maybeLoadBundlePromise != null) {
-            return maybeLoadBundlePromise.then(importAll);
+
+        // On web, importing synchronously first prevents double-loading preloaded scripts
+        if (process.env.EXPO_OS === 'web') {
+          try {
+            return importAll();
+          } catch (error) {
+            var maybeLoadBundlePromise = maybeLoadBundle(moduleID, paths);
+            if (maybeLoadBundlePromise != null) {
+              return maybeLoadBundlePromise.then(importAll);
+            }
+            throw error;
           }
-          throw error;
         }
+
+        // On native, requiring a missing module reports a fatal error instead of
+        // throwing, so the split bundle must be loaded before importing
+        var maybeLoadBundlePromise = maybeLoadBundle(moduleID, paths);
+        if (maybeLoadBundlePromise != null) {
+          return maybeLoadBundlePromise.then(importAll);
+        }
+        return importAll();
       }
 
       function asyncRequire(moduleID, paths, moduleName) {
@@ -113,6 +125,7 @@ describe('asyncRequireModule', () => {
   afterEach(() => {
     delete (globalThis as any).__loadBundleAsync;
     delete (globalThis as any).__METRO_GLOBAL_PREFIX__;
+    process.env.EXPO_OS = originalExpoOs;
   });
 
   it('calls importAll with moduleID and moduleName when no bundle loading needed', async () => {
@@ -129,7 +142,8 @@ describe('asyncRequireModule', () => {
     expect(result).toEqual({ default: 'module-42' });
   });
 
-  it('falls back to bundle load when importAll throws, then retries with moduleName', async () => {
+  it('falls back to bundle load on web when importAll throws, then retries with moduleName', async () => {
+    process.env.EXPO_OS = 'web';
     mockImportAll
       .mockImplementationOnce(() => {
         throw new Error('Module not loaded');
@@ -158,7 +172,8 @@ describe('asyncRequireModule', () => {
     expect(result).toEqual({ default: 'module-42' });
   });
 
-  it('does not load the bundle when importAll succeeds (preloaded bundle case)', async () => {
+  it('does not load the bundle on web when importAll succeeds (preloaded bundle case)', async () => {
+    process.env.EXPO_OS = 'web';
     (globalThis as any).__loadBundleAsync = jest.fn(() => Promise.resolve());
 
     const paths = { '42': '/bundles/my-module.bundle' };
@@ -169,7 +184,8 @@ describe('asyncRequireModule', () => {
     expect(result).toEqual({ default: 'module-42' });
   });
 
-  it('re-throws the import error when no bundle path is configured', () => {
+  it('re-throws the import error on web when no bundle path is configured', () => {
+    process.env.EXPO_OS = 'web';
     mockImportAll.mockImplementationOnce(() => {
       throw new Error('Module not loaded');
     });
@@ -177,6 +193,37 @@ describe('asyncRequireModule', () => {
     expect(() => asyncRequire(42, null, 'my-module')).toThrow('Module not loaded');
   });
 
+  it('loads the bundle on native before requiring split modules', async () => {
+    process.env.EXPO_OS = 'ios';
+    let bundleLoaded = false;
+    mockImportAll.mockImplementation((id: number) =>
+      bundleLoaded ? { default: `module-${id}` } : undefined
+    );
+    (globalThis as any).__loadBundleAsync = jest.fn(() => {
+      bundleLoaded = true;
+      return Promise.resolve();
+    });
+
+    const paths = { '42': '/bundles/my-module.bundle' };
+    const result = await asyncRequire(42, paths, 'my-module');
+
+    expect((globalThis as any).__loadBundleAsync).toHaveBeenCalledWith('/bundles/my-module.bundle');
+    expect(mockImportAll).toHaveBeenCalledTimes(1);
+    expect(mockImportAll).toHaveBeenCalledWith(42, 'my-module');
+    expect(result).toEqual({ default: 'module-42' });
+  });
+
+  it('imports synchronously on native when the module is inlined (no split bundle path)', () => {
+    process.env.EXPO_OS = 'ios';
+    (globalThis as any).__loadBundleAsync = jest.fn(() => Promise.resolve());
+
+    const ret = asyncRequire(42, null, 'my-module');
+
+    expect((globalThis as any).__loadBundleAsync).not.toHaveBeenCalled();
+    expect(mockImportAll).toHaveBeenCalledWith(42, 'my-module');
+    expect(ret._result).toEqual({ default: 'module-42' });
+  });
+
   describe('thenable return value', () => {
     it('exposes a synchronous _result when no bundle load was needed', () => {
       const ret = asyncRequire(42, null, 'my-module');
@@ -186,6 +233,7 @@ describe('asyncRequireModule', () => {
     });
 
     it('exposes a Promise _result when a bundle load was needed', async () => {
+      process.env.EXPO_OS = 'web';
       mockImportAll
         .mockImplementationOnce(() => {
           throw new Error('Module not loaded');
diff --git a/packages/expo/src/async-require/asyncRequireModule.ts b/packages/expo/src/async-require/asyncRequireModule.ts
index 1abb7170aac808..7c183bdadae9a4 100644
--- a/packages/expo/src/async-require/asyncRequireModule.ts
+++ b/packages/expo/src/async-require/asyncRequireModule.ts
@@ -68,16 +68,30 @@ function asyncRequireImpl<T>(
   moduleName?: string
 ): Promise<T> | T {
   const importAll = () => (require as unknown as MetroRequire).importAll<T>(moduleID, moduleName);
-  try {
-    // Try importing first to prevent double-loading script when the page already preloaded it
-    return importAll();
-  } catch (error) {
-    const maybeLoadBundlePromise = maybeLoadBundle(moduleID, paths);
-    if (maybeLoadBundlePromise != null) {
-      return maybeLoadBundlePromise.then(importAll);
+
+  // NOTE(@hassankhan): We need to come back and improve this, ideally we shouldn't need to have a
+  // separate conditional specifically for web
+  // On web, split chunks may already be preloaded via `<script>` tags, so importing
+  // synchronously first prevents double-loading the script
+  if (process.env.EXPO_OS === 'web') {
+    try {
+      return importAll();
+    } catch (error) {
+      const maybeLoadBundlePromise = maybeLoadBundle(moduleID, paths);
+      if (maybeLoadBundlePromise != null) {
+        return maybeLoadBundlePromise.then(importAll);
+      }
+      throw error;
     }
-    throw error;
   }
+
+  // On native, requiring a missing module reports a fatal error via `global.ErrorUtils`
+  // instead of throwing, so the split bundle must be loaded before importing
+  const maybeLoadBundlePromise = maybeLoadBundle(moduleID, paths);
+  if (maybeLoadBundlePromise != null) {
+    return maybeLoadBundlePromise.then(importAll);
+  }
+  return importAll();
 }
 
 function asyncRequire<T>(