Skip to content

website: add release information to the versions page #4895

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Simek merged 1 commit into from
Nov 24, 2025
Merged

website: add release information to the versions page #4895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions website/src/css/customTheme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,14 @@ hr {
background-color: var(--ifm-table-border-color);
}

.table-wrapper {
border: 1px solid var(--ifm-table-border-color);
border-radius: var(--ifm-global-radius);
overflow: hidden;
box-shadow: var(--ifm-table-box-shadow);
margin-bottom: var(--ifm-spacing-vertical);
}

.markdown {
h2:first-child {
margin-top: 0;
Expand Down Expand Up @@ -396,14 +404,6 @@ hr {
font-weight: 600;
}

.table-wrapper {
border: 1px solid var(--ifm-table-border-color);
border-radius: var(--ifm-global-radius);
overflow: hidden;
box-shadow: var(--ifm-table-box-shadow);
margin-bottom: var(--ifm-spacing-vertical);
}

table {
display: table;
width: 100%;
Expand Down
52 changes: 44 additions & 8 deletions website/src/css/versions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
padding: 28px;

h1 {
font-size: 3rem;
font-size: 2.5rem;
line-height: 3rem;
}

h2 {
Expand All @@ -35,15 +36,50 @@
}
}

table th,
table td {
min-width: 100px;
font-size: 15px;
padding: 8px 20px;
.versions {
margin-bottom: 0;

tr:first-child {
border-top: 0;
}
}

.versions {
margin-bottom: 32px;
.table-wrapper {
margin-bottom: 24px;
width: fit-content;

tr th {
padding: 8px 16px;
min-width: 100px;
font-size: 80%;
border: 0;
border-right: 1px solid var(--ifm-table-border-color);

&:last-child {
border-right: 0;
}
}

tr td {
padding: 8px 16px;
min-width: 100px;
font-size: 90%;
border: 0;
border-right: 1px solid var(--ifm-table-border-color);
align-content: baseline;

code {
vertical-align: unset;
}

&:last-child {
border-right: 0;
}
}
}

.markdown > *:last-child {
margin-bottom: 24px !important;
}
}

Expand Down
118 changes: 71 additions & 47 deletions website/src/pages/versions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@
* LICENSE file in the root directory of this source tree.
*/

import React from 'react';
import Layout from '@theme/Layout';
import useBaseUrl from '@docusaurus/useBaseUrl';
import ReleasesTable from '@site/src/components/releases/ReleasesTable';
import Admonition from '@theme/Admonition';
import Layout from '@theme/Layout';

import versions from '../../versions.json';
// The versionsArchived mapping is a custom feature, NOT a Docusaurus feature
import versionsArchived from '../../versionsArchived.json';
Expand Down Expand Up @@ -87,70 +89,92 @@ const Versions = () => {
</a>
. Eventually, the release candidate will be promoted to stable.
</p>
<h2>Next version (Unreleased)</h2>
<p>
Below is the schedule and current status of recent and upcoming React
Native releases:
</p>
<div className="markdown">
<div className="table-wrapper">
<ReleasesTable />
</div>
<span />
</div>
<p>
You can read more details about release schedule and the meaning of
statuses on the <a href="/releases">Releases Overview</a> page.
</p>
<h2>Next version (Unreleased)</h2>
<div className="table-wrapper">
<table className="versions">
<tbody>
{latestVersions.map(version => (
<VersionItem
key={'version_' + version}
version={version}
currentVersion={currentVersion}
/>
))}
</tbody>
</table>
</div>
<Admonition type="note">
To see what changes are coming and provide better feedback to React
Native contributors, use the latest release candidate when possible.
Changes introduced in a release candidate will have been shipped to
production Facebook apps for over two weeks by the time the release
candidate is cut.
</p>
<table className="versions">
<tbody>
{latestVersions.map(version => (
<VersionItem
key={'version_' + version}
version={version}
currentVersion={currentVersion}
/>
))}
</tbody>
</table>
</Admonition>
<h2>Latest version</h2>
<p>
The most recent stable version will be used automatically whenever a new
project is created using the <code>npx react-native init</code> command.
</p>
<table className="versions">
<tbody>
<VersionItem
key={'version_' + currentVersion}
version={currentVersion}
currentVersion={currentVersion}
/>
</tbody>
</table>
<h2>Previous versions</h2>
<table className="versions">
<tbody>
{stableVersions.map(version => (
<div className="table-wrapper">
<table className="versions">
<tbody>
<VersionItem
key={'version_' + version}
version={version}
key={'version_' + currentVersion}
version={currentVersion}
currentVersion={currentVersion}
/>
))}
</tbody>
</table>
<h2>Archived versions</h2>
<p>
The documentation for unmaintained versions can be found on website
archive snapshots, hosted as separate sites.
</p>
<table className="versions">
<tbody>
{Object.entries(versionsArchived).map(
([version, archivedDocumentationUrl]) => (
</tbody>
</table>
</div>
<h2>Previous versions</h2>
<div className="table-wrapper">
<table className="versions">
<tbody>
{stableVersions.map(version => (
<VersionItem
key={'version_' + version}
version={version}
archivedDocumentationUrl={archivedDocumentationUrl}
currentVersion={currentVersion}
/>
)
)}
</tbody>
</table>
))}
</tbody>
</table>
</div>
<h3>Archived versions</h3>
<p>
The documentation for unmaintained versions can be found on website
archive snapshots, hosted as separate sites.
</p>
<div className="table-wrapper">
<table className="versions">
<tbody>
{Object.entries(versionsArchived).map(
([version, archivedDocumentationUrl]) => (
<VersionItem
key={'version_' + version}
version={version}
archivedDocumentationUrl={archivedDocumentationUrl}
currentVersion={currentVersion}
/>
)
)}
</tbody>
</table>
</div>
<p>
The documentation for versions below <code>0.60</code> can be found on
the separate website called{' '}
Expand Down