` in MDX. The table itself becomes the
+// horizontal scroll container (display: block + overflow) — more reliable
+// across the doc layout's nested flex columns than scrolling the wrapper.
+.markdown .table-scroll table {
+ display: block;
+ width: max-content;
+ max-width: 100%;
+ overflow-x: auto;
+ table-layout: auto;
+
+ // Keep cells on a single line; scroll horizontally instead of wrapping.
+ th,
+ td {
+ white-space: nowrap;
+ }
+
+ // Shaded, bold row-header column for the branch names (matches the schedule table).
+ td:first-child {
+ background-color: var(--ifm-table-head-background);
+ color: var(--ifm-font-color-base);
+ font-weight: var(--ifm-font-weight-bold);
+ }
+}
+
.markdown {
h2:first-child {
margin-top: 0;
@@ -754,6 +788,41 @@ html[data-theme="dark"] .homepage {
/* Blog */
+// Compact multi-author blog grid: three-up at the widest (fixed-width) layout,
+// two-up on smaller desktops, one-up on mobile.
+.col--6[class*="authorCol"] {
+ --ifm-avatar-intro-margin: 0.7rem;
+
+ flex: 0 0 33.3333%;
+
+ // 1416px is where the site header locks to a fixed width.
+ @media (max-width: 1416px) {
+ flex: 0 0 50%;
+ }
+
+ @media (max-width: 768px) {
+ flex: 0 0 100%;
+ }
+
+ [class*="authorImage"] {
+ --ifm-avatar-photo-size: 1.75rem;
+ }
+
+ [class*="authorName"] {
+ font-size: 0.9rem;
+ }
+
+ [class*="authorTitle"] {
+ font-size: 0.75rem;
+
+ // Don't truncate long titles.
+ display: block;
+ overflow: visible;
+ line-clamp: none;
+ -webkit-line-clamp: none;
+ }
+}
+
.avatar__name {
font-weight: 600;
display: inline-flex;
@@ -2257,13 +2326,21 @@ html[data-theme="dark"] .docsRating {
/* Blog */
+// Keep blog anchors clear of the sticky DocsSecondaryNav.
+html.blog-wrapper {
+ scroll-padding-top: calc(var(--ifm-navbar-height) + var(--rn-subnav-height));
+}
+
.blog-wrapper .main-wrapper {
h3[class*="sidebarItemTitle"] {
color: var(--ifm-font-color-secondary);
}
div[class*="tableOfContents"] {
- top: calc(var(--ifm-navbar-height));
+ top: calc(var(--ifm-navbar-height) + var(--rn-subnav-height));
+ max-height: calc(
+ 100vh - (var(--ifm-navbar-height) + var(--rn-subnav-height) + 2rem)
+ );
}
.table-of-contents {
diff --git a/website/src/css/docs-secondary-nav.scss b/website/src/css/docs-secondary-nav.scss
new file mode 100644
index 00000000000..f8fbcf66d02
--- /dev/null
+++ b/website/src/css/docs-secondary-nav.scss
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Offsets that keep the sticky doc sidebar, table of contents and anchor
+ * scrolling clear of the sticky DocsSecondaryNav. Scoped to `.plugin-docs`, the
+ * class Docusaurus sets on for every content-docs page (the pages that
+ * render the secondary nav).
+ */
+
+:root {
+ --rn-subnav-height: 3rem;
+}
+
+html.plugin-docs {
+ scroll-padding-top: calc(var(--ifm-navbar-height) + var(--rn-subnav-height));
+}
+
+@media (min-width: 997px) {
+ // Position the sticky sidebar like the blog sidebar: drop the theme's
+ // negative margin and instead stick the viewport just below the secondary
+ // nav. This keeps the first item's normal top spacing at every scroll
+ // position (the negative-margin mechanism otherwise drifts once a second
+ // sticky bar is added above it).
+ html.plugin-docs aside[class^="theme-doc-sidebar-container"] {
+ margin-top: 0;
+ }
+
+ html.plugin-docs aside[class^="theme-doc-sidebar-container"] > div {
+ top: calc(var(--ifm-navbar-height) + var(--rn-subnav-height));
+ max-height: calc(
+ 100vh - (var(--ifm-navbar-height) + var(--rn-subnav-height))
+ );
+ }
+
+ // The viewport now clears both bars, so the content box no longer needs the
+ // theme's navbar-height top padding.
+ html.plugin-docs aside[class^="theme-doc-sidebar-container"] > div > div {
+ padding-top: 0;
+ }
+
+ html.plugin-docs div[class^="tableOfContents"] {
+ top: calc(var(--ifm-navbar-height) + var(--rn-subnav-height) + 34px);
+ max-height: calc(
+ 100vh - (var(--ifm-navbar-height) + var(--rn-subnav-height) + 2rem)
+ );
+ }
+}
+
+/**
+ * Docs version dropdown. Reuses the theme navbar dropdown, styled to match the
+ * other outlined controls in this nav but with fully rounded corners for
+ * differentiation. Only the "Next" version is highlighted in the brand blue;
+ * released versions use the same white/grey outline as the other dropdowns.
+ */
+
+[class*="versionDropdown"] {
+ .navbar__item {
+ // Keep it visible on mobile too — Infima hides navbar items below 996px.
+ display: inline-flex;
+ margin: 0;
+ padding: 0;
+ }
+
+ .navbar__link {
+ display: inline-flex;
+ align-items: center;
+ margin: 0;
+ padding: 0.35rem 0.6rem;
+ font-size: 0.9rem;
+ font-weight: var(--ifm-font-weight-normal);
+
+ // Match the section dropdown button's compact height (it uses the browser
+ // default line-height rather than the taller inherited base).
+ line-height: normal;
+ color: var(--ifm-font-color-base);
+ background: transparent;
+ border: 1px solid var(--ifm-color-gray-500);
+ border-radius: 999px;
+
+ // Match the section dropdown caret: nudged down and dimmed to grey.
+ &:after {
+ opacity: 0.6;
+ transform: translateY(-1px);
+ }
+
+ &:hover {
+ color: var(--ifm-font-color-base);
+ background-color: var(--ifm-menu-color-background-hover);
+ border-color: var(--ifm-color-gray-400);
+ }
+ }
+}
+
+[data-theme="dark"] [class*="versionDropdown"] .navbar__link:hover {
+ background-color: var(--dark);
+ border-color: var(--ifm-color-gray-800);
+}
+
+[class*="versionDropdown"][data-version-next] .navbar__link {
+ color: var(--ifm-button-color, #fff);
+ background-color: var(--ifm-color-primary);
+ border-color: var(--ifm-color-primary);
+
+ &:hover {
+ color: var(--ifm-button-color, #fff);
+ background-color: var(--ifm-color-primary);
+ border-color: var(--ifm-color-primary);
+ filter: brightness(0.92);
+ }
+}
diff --git a/website/src/css/releases.scss b/website/src/css/releases.scss
new file mode 100644
index 00000000000..836a41a92df
--- /dev/null
+++ b/website/src/css/releases.scss
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.releases-header {
+ border-bottom: 1px solid var(--ifm-toc-border-color);
+
+ h1 {
+ margin: 0;
+ padding: 28px 0;
+ font-size: 3rem;
+ line-height: 1.1;
+ }
+}
+
+// Tables are auto-wrapped in `.table-wrapper` (border + `overflow: hidden`), so
+// make that box the scroll container: it stays put and content scrolls inside.
+.markdown .releases-schedule-table .table-wrapper {
+ overflow-x: auto;
+}
+
+// Content-sized columns (override the base `table-layout: fixed`); keep
+// `display: table` on mobile, where the base switches tables to `display: block`.
+.markdown .releases-schedule-table table {
+ display: table;
+ table-layout: auto;
+}
+
+.markdown .releases-schedule-table th,
+.markdown .releases-schedule-table td {
+ white-space: nowrap;
+ min-width: 100px;
+}
+
+// Shaded, bold row-header column for the Version cells (matches /versions).
+.markdown .releases-schedule-table table tbody td:first-child {
+ background-color: var(--ifm-table-head-background);
+ color: var(--ifm-font-color-base);
+ font-weight: var(--ifm-font-weight-bold);
+ text-align: left;
+}
diff --git a/website/src/css/versions.scss b/website/src/css/versions.scss
index 9971f9897c7..d1257a585cd 100644
--- a/website/src/css/versions.scss
+++ b/website/src/css/versions.scss
@@ -9,7 +9,6 @@
.versions-page {
max-width: 1400px !important;
- padding: 28px;
h1 {
font-size: 2.5rem;
diff --git a/website/src/pages/versions.tsx b/website/src/pages/versions.tsx
index 611c89197a7..0c889b7f0eb 100644
--- a/website/src/pages/versions.tsx
+++ b/website/src/pages/versions.tsx
@@ -5,9 +5,11 @@
* LICENSE file in the root directory of this source tree.
*/
+import type {PropSidebar} from '@docusaurus/plugin-content-docs';
+
+import {DocsSidebarProvider} from '@docusaurus/plugin-content-docs/client';
import useBaseUrl from '@docusaurus/useBaseUrl';
-import ReleasesTable from '@site/src/components/releases/ReleasesTable';
-import Admonition from '@theme/Admonition';
+import DocRootLayout from '@theme/DocRoot/Layout';
import Layout from '@theme/Layout';
import versions from '../../versions.json';
@@ -37,13 +39,13 @@ const VersionItem = ({
);
const documentationLink =
Documentation;
- let releaseNotesURL = 'https://github.com/facebook/react-native/releases';
+ let releaseNotesURL = 'https://github.com/react/react-native/releases';
let releaseNotesTitle = 'Changelog';
if (isNext) {
- releaseNotesURL = `https://github.com/facebook/react-native/compare/${latestMajorVersion}-stable...main`;
+ releaseNotesURL = `https://github.com/react/react-native/compare/${latestMajorVersion}-stable...main`;
releaseNotesTitle = 'Commits since ' + latestMajorVersion;
} else if (!isRC) {
- releaseNotesURL = `https://github.com/facebook/react-native/releases/tag/v${version}.0`;
+ releaseNotesURL = `https://github.com/react/react-native/releases/tag/v${version}.0`;
}
const releaseNotesLink =
{releaseNotesTitle};
@@ -57,6 +59,19 @@ const VersionItem = ({
);
};
+// Mirrors the `releases` sidebar in sidebarsReleases.ts so the /versions page
+// (a standalone React page, not a doc) renders the same sidebar. Keep in sync.
+const releasesSidebar: PropSidebar = [
+ {type: 'link', href: '/releases/overview', label: 'Overview'},
+ {type: 'link', href: '/releases/branches', label: 'Branches'},
+ {
+ type: 'link',
+ href: '/releases/versioning-policy',
+ label: 'Versioning Policy',
+ },
+ {type: 'link', href: '/versions', label: 'Docs Versions'},
+];
+
const Versions = () => {
const currentVersion = versions.length > 0 ? versions[0] : null;
const latestVersions = ['next'].concat(
@@ -67,122 +82,89 @@ const Versions = () => {
);
return (
-
- React Native versions
-
- Open source React Native releases follow a release train that is
- coordinated on GitHub through the{' '}
-
- react-native-releases
- {' '}
- repository. New releases are created off the main branch of{' '}
-
- facebook/react-native
-
- . They will follow a Release Candidate process to allow contributors
- like yourself to{' '}
- verify the changes and to
- identify any issues by{' '}
-
- writing clear, actionable bug reports
-
- . Eventually, the release candidate will be promoted to stable.
-
-
- Below is the schedule and current status of recent and upcoming React
- Native releases:
-
-
-
- You can read more details about release schedule and the meaning of
- statuses on the Releases Overview page.
-
- Next version (Unreleased)
-
-
-
- {latestVersions.map(version => (
-
- ))}
-
-
-
Latest version
-
- The most recent stable version will be used automatically whenever a new
- project is created using the npx react-native init command.
-
-
- Previous versions
-
-
-
- {stableVersions.map(version => (
-
- ))}
-
-
-
Archived versions
-
- The documentation for unmaintained versions can be found on website
- archive snapshots, hosted as separate sites.
-
-
-
-
- {Object.entries(versionsArchived).map(
- ([version, archivedDocumentationUrl]) => (
-
- )
- )}
-
-
-
- The documentation for versions below 0.60 can be found on
- the separate website called{' '}
-
- React Native Archive
-
- .
-
+
+
+
+
+
Docs Versions
+
Next version (Unreleased)
+
+ Ahead of each stable release, React Native publishes a series of
+ release candidates. Learn more about the{' '}
+ release channels
+ .
+
+
+
+
+ {latestVersions.map(version => (
+
+ ))}
+
+
+
+
Latest version
+
+
Previous versions
+
+
+
+ {stableVersions.map(version => (
+
+ ))}
+
+
+
+
Archived versions
+
+ The documentation for unmaintained versions can be found on
+ website archive snapshots, hosted as separate sites.
+
+
+
+
+ {Object.entries(versionsArchived).map(
+ ([version, archivedDocumentationUrl]) => (
+
+ )
+ )}
+
+
+
+
+ The documentation for versions below 0.60 can be
+ found on the separate website called{' '}
+
+ React Native Archive
+
+ .
+
+
+
+ {showSidebar &&
}
+
{children}
+ {toc &&
{toc}
}
+
+
- {sidebar.title}
-
{sidebar.items.map(item => {
const postYear = item.permalink.split('/')[2];
diff --git a/website/src/theme/BlogSidebar/Desktop/styles.module.css b/website/src/theme/BlogSidebar/Desktop/styles.module.css
index dd70c522bf0..e9c18f633a2 100644
--- a/website/src/theme/BlogSidebar/Desktop/styles.module.css
+++ b/website/src/theme/BlogSidebar/Desktop/styles.module.css
@@ -6,21 +6,16 @@
*/
.sidebar {
- max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+ max-height: calc(
+ 100vh - (var(--ifm-navbar-height) + var(--rn-subnav-height) + 2rem)
+ );
overflow-y: auto;
position: sticky;
- top: var(--ifm-navbar-height);
+ top: calc(var(--ifm-navbar-height) + var(--rn-subnav-height));
padding: 20px 12px 0 0;
margin-left: -20px;
}
-.sidebarHeader {
- font-size: var(--ifm-h4-font-size);
- font-weight: var(--ifm-font-weight-bold);
- padding-left: 12px;
- display: block;
-}
-
.sidebarItemTitle {
margin: 0.75rem 0 0.5rem;
color: var(--subtle);
diff --git a/website/src/theme/DocItem/Layout/index.tsx b/website/src/theme/DocItem/Layout/index.tsx
index 734e2007ffe..f3552e0618b 100644
--- a/website/src/theme/DocItem/Layout/index.tsx
+++ b/website/src/theme/DocItem/Layout/index.tsx
@@ -9,7 +9,6 @@ import React, {type ReactNode} from 'react';
import clsx from 'clsx';
import {useWindowSize} from '@docusaurus/theme-common';
import {useDoc} from '@docusaurus/plugin-content-docs/client';
-import CopyPageButton from 'docusaurus-plugin-copy-page-button/react';
import DocItemPaginator from '@theme/DocItem/Paginator';
import DocVersionBanner from '@theme/DocVersionBanner';
import DocVersionBadge from '@theme/DocVersionBadge';
@@ -23,23 +22,6 @@ import type {Props} from '@theme/DocItem/Layout';
import styles from './styles.module.css';
-function DocItemCopyPageButton({className}: {className?: string}) {
- return (
-
-
-
- );
-}
-
/**
* Decide if the toc should be rendered, on mobile or desktop viewports
*/
@@ -76,15 +58,7 @@ export default function DocItemLayout({children}: Props): ReactNode {
-
-
-
-
+
{docTOC.mobile}
{children}
@@ -92,12 +66,7 @@ export default function DocItemLayout({children}: Props): ReactNode {