Skip to content

Commit 461f259

Browse files
MatiPl01MatiPl01
authored
docs: Auto-generated compatibility tables from the compatibility.json file (#8360)
## Summary This PR removes all hardcoded compatibility tables in the reanimated docs and replaces them with auto-generated ones based on the `compatibility.json` file in the `react-native-reanimated` package. I extended the `compatibility.json` file to contain paper compatibility versions as well so that everything is kept in a single place. It also adds the v2 compatibility table (created from the old v3's compat table part containing info about v2) and leaves just v4's info at the v4 doc page (removes v3 part), leaves just v3 info on the v3 page (removes v2 info). ## Showcase https://github.com/user-attachments/assets/00fc84dd-ab74-4a51-9caa-73ee57a55036
1 parent e8fc025 commit 461f259

File tree

10 files changed

+351
-165
lines changed

10 files changed

+351
-165
lines changed

‎.github/workflows/helper/read-compatibility.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const compatibilityData = JSON.parse(
1414
fs.readFileSync(compatibilityPath, 'utf8')
1515
);
1616

17-
const versions = compatibilityData['nightly']['react-native'];
17+
const versions = compatibilityData['fabric']['nightly']['react-native'];
1818
const versionsJson = JSON.stringify(versions);
1919

2020
const versionsWithNightly = [...versions, 'nightly'];

‎docs/docs-reanimated/docs/guides/compatibility.mdx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,11 @@ Reanimated 4 works only with the React Native New Architecture. If your app stil
1010
:::
1111

1212
### Supported React Native versions
13-
<ReanimatedCompatibility />
13+
14+
<ReanimatedCompatibility spacerAfterIndex={1} architecture="fabric" />
1415

1516
### Supported react-native-worklets versions
1617

1718
`react-native-worklets` is a dependency of Reanimated 4. However, Reanimated 3 will not work with `react-native-worklets` installed. Make sure to have a correct version of `react-native-worklets` installed when using Reanimated 4.
1819

19-
<div className="compatibility">
20-
21-
| | 0.4.x | 0.5.x | nightly |
22-
| ---------------------------- | ------ | ------ | ------- |
23-
| <Version version="nightly"/> | <No/> | <No/> | <Yes/> |
24-
| <Version version="4.1.x"/> | <No/> | <Yes/> | <No/> |
25-
| <Version version="4.0.x" /> | <Yes/> | <No/> | <No/> |
26-
| <Spacer/> | | | |
27-
| <Version version="3.x.x"/> | <No/> | <No/> | <No/> |
28-
29-
</div>
20+
<WorkletsCompatibility />

‎docs/docs-reanimated/src/components/Compatibility/index.tsx‎

Lines changed: 161 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,25 @@
1+
import { useDocsVersion } from '@docusaurus/plugin-content-docs/client';
12
import React from 'react';
23

3-
import compatibilityData from '../../../../../packages/react-native-reanimated/compatibility.json';
4+
import untypedCompatibilityData from '../../../../../packages/react-native-reanimated/compatibility.json';
45
import styles from './styles.module.css';
56

7+
type Architecture = 'paper' | 'fabric';
8+
9+
interface CompatibilityEntry {
10+
'react-native': string[];
11+
'react-native-worklets'?: string[];
12+
}
13+
14+
type ArchitectureCompatibilityData = Record<string, CompatibilityEntry>;
15+
16+
type CompatibilityData = {
17+
paper: ArchitectureCompatibilityData;
18+
fabric: ArchitectureCompatibilityData;
19+
};
20+
21+
const compatibilityData = untypedCompatibilityData as CompatibilityData;
22+
623
export function Yes() {
724
return <div className={styles.supported}>yes</div>;
825
}
@@ -25,69 +42,102 @@ export function Spacer() {
2542

2643
interface CompatibilityItem {
2744
version: string;
28-
isSpacer?: boolean;
45+
isSpacer: boolean;
2946
compatibility: Record<string, boolean>;
3047
}
3148

32-
export function ReanimatedCompatibility() {
33-
const reactNativeVersions = Array.from(
34-
new Set(
35-
Object.keys(compatibilityData).flatMap(
36-
(version) => compatibilityData[version]['react-native']
37-
)
38-
)
39-
).sort();
40-
41-
const isVersionSupported = (supportedVersions: string[], version: string) =>
42-
supportedVersions.includes(version);
43-
44-
const createCompatibility = (supportedVersions: string[]) => {
45-
const compatibility: Record<string, boolean> = {};
46-
reactNativeVersions.forEach((version) => {
47-
compatibility[`rn${version.replace('.', '')}`] = isVersionSupported(
48-
supportedVersions,
49-
version
50-
);
51-
});
52-
return compatibility;
53-
};
54-
55-
const compatibilityItems: CompatibilityItem[] = Object.entries(
56-
compatibilityData
57-
).map(([version, data], index) => {
49+
type ReanimatedCompatibilityProps = {
50+
architecture: Architecture;
51+
spacerAfterIndex?: number;
52+
};
53+
54+
const getCompatibilityEntriesForVersion = (
55+
architecture: Architecture,
56+
version: string,
57+
shouldInclude: (data: CompatibilityEntry) => boolean = () => true
58+
) => {
59+
const architectureData = compatibilityData[architecture];
60+
61+
if (version === 'current') {
62+
// For current version, find the highest major version and include nightly
63+
const highestMajorVersion = Math.max(
64+
...Object.keys(architectureData).map((key) => {
65+
const num = key.split('.')[0];
66+
return isNaN(+num) ? 0 : +num;
67+
})
68+
);
69+
70+
return Object.entries(architectureData).filter(
71+
([key, data]) =>
72+
(key === 'nightly' || key.startsWith(`${highestMajorVersion}.`)) &&
73+
shouldInclude(data)
74+
);
75+
}
76+
77+
// For versioned docs (e.g. "3.x", "2.x", "1.x"), extract the major version number
78+
const majorVersion = version.replace('.x', '');
79+
return Object.entries(architectureData).filter(
80+
([key, data]) => key.startsWith(`${majorVersion}.`) && shouldInclude(data)
81+
);
82+
};
83+
84+
const extractVersions = (
85+
data: [string, CompatibilityEntry][],
86+
getVersions: (entry: CompatibilityEntry) => string[]
87+
): string[] =>
88+
Array.from(new Set(data.flatMap(([, entry]) => getVersions(entry)))).sort();
89+
90+
const createCompatibilityItems = (
91+
filteredData: [string, CompatibilityEntry][],
92+
versions: string[],
93+
getSupportedVersions: (data: CompatibilityEntry) => Set<string>,
94+
spacerAfterIndex?: number
95+
): CompatibilityItem[] =>
96+
filteredData.map(([version, data], index) => {
97+
const supportedVersions = getSupportedVersions(data);
98+
const compatibility = Object.fromEntries(
99+
versions.map((versionNumber) => [
100+
versionNumber,
101+
supportedVersions.has(versionNumber),
102+
])
103+
);
104+
58105
return {
59106
version,
60-
isSpacer: index === 1,
61-
compatibility: createCompatibility(data['react-native']),
107+
isSpacer: index === spacerAfterIndex,
108+
compatibility,
62109
};
63110
});
64111

112+
interface CompatibilityTableProps {
113+
versions: string[];
114+
items: CompatibilityItem[];
115+
}
116+
117+
function CompatibilityTable({ versions, items }: CompatibilityTableProps) {
65118
return (
66119
<div className="compatibility">
67120
<table className={styles.table}>
68121
<thead>
69122
<tr>
70123
<th></th>
71-
{reactNativeVersions.map((version) => (
124+
{versions.map((version) => (
72125
<th key={version}>{version}</th>
73126
))}
74127
</tr>
75128
</thead>
76129
<tbody>
77-
{compatibilityItems.map((item, index) => (
130+
{items.map((item, index) => (
78131
<React.Fragment key={index}>
79132
<tr>
80133
<td>
81134
<Version version={item.version} />
82135
</td>
83-
{reactNativeVersions.map((version) => {
84-
const key = `rn${version.replace('.', '')}`;
85-
return (
86-
<td key={version}>
87-
{item.compatibility[key] ? <Yes /> : <No />}
88-
</td>
89-
);
90-
})}
136+
{versions.map((version) => (
137+
<td key={version}>
138+
{item.compatibility[version] ? <Yes /> : <No />}
139+
</td>
140+
))}
91141
</tr>
92142
{item.isSpacer && <Spacer />}
93143
</React.Fragment>
@@ -97,3 +147,74 @@ export function ReanimatedCompatibility() {
97147
</div>
98148
);
99149
}
150+
151+
export function ReanimatedCompatibility({
152+
spacerAfterIndex,
153+
architecture,
154+
}: ReanimatedCompatibilityProps) {
155+
const docsVersion = useDocsVersion();
156+
const filteredCompatibilityData = getCompatibilityEntriesForVersion(
157+
architecture,
158+
docsVersion.version
159+
);
160+
161+
const reactNativeVersions = extractVersions(
162+
filteredCompatibilityData,
163+
(data) => data['react-native']
164+
);
165+
166+
const compatibilityItems = createCompatibilityItems(
167+
filteredCompatibilityData,
168+
reactNativeVersions,
169+
(data) => new Set(data['react-native']),
170+
spacerAfterIndex
171+
);
172+
173+
return (
174+
<CompatibilityTable
175+
versions={reactNativeVersions}
176+
items={compatibilityItems}
177+
/>
178+
);
179+
}
180+
181+
export function WorkletsCompatibility({
182+
spacerAfterIndex,
183+
}: {
184+
spacerAfterIndex?: number;
185+
}) {
186+
const docsVersion = useDocsVersion();
187+
188+
const filteredWorkletsData = getCompatibilityEntriesForVersion(
189+
'fabric',
190+
docsVersion.version,
191+
(data) => !!data['react-native-worklets']
192+
);
193+
194+
const workletsVersions = extractVersions(
195+
filteredWorkletsData,
196+
(data) => data['react-native-worklets'] || []
197+
);
198+
199+
if (workletsVersions.length === 0) {
200+
return (
201+
<div className="compatibility">
202+
<p>
203+
No worklets compatibility data available for this version of
204+
Reanimated.
205+
</p>
206+
</div>
207+
);
208+
}
209+
210+
const workletsItems = createCompatibilityItems(
211+
filteredWorkletsData,
212+
workletsVersions,
213+
(data) => new Set(data['react-native-worklets'] || []),
214+
spacerAfterIndex
215+
);
216+
217+
return (
218+
<CompatibilityTable versions={workletsVersions} items={workletsItems} />
219+
);
220+
}

‎docs/docs-reanimated/src/theme/MDXComponents.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
Version,
1212
Spacer,
1313
ReanimatedCompatibility,
14+
WorkletsCompatibility,
1415
} from '@site/src/components/Compatibility';
1516
import Optional from '@site/src/components/Optional';
1617
import AvailableFrom from '@site/src/components/AvailableFrom';
@@ -40,4 +41,5 @@ export default {
4041
Grid,
4142
ThemedVideo,
4243
ReanimatedCompatibility,
44+
WorkletsCompatibility,
4345
};

‎docs/docs-reanimated/versioned_docs/version-2.x/guide/compatibility.mdx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
id: compatibility
3+
sidebar_label: Compatibility
4+
---
5+
6+
# Compatibility table
7+
8+
:::info
9+
Reanimated 2 won't receive support for newest React Native versions. To get the latest React Native features and updates, please upgrade to the newer version of Reanimated.
10+
:::
11+
12+
### Currently supported React Native versions
13+
14+
<ReanimatedCompatibility architecture="paper" />

‎docs/docs-reanimated/versioned_docs/version-3.x/guides/compatibility.mdx‎

Lines changed: 2 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,57 +7,12 @@ sidebar_label: Compatibility
77

88
### Currently supported React Native versions (Paper)
99

10-
<div className="compatibility">
11-
12-
| | 0.63 | 0.64 | 0.65 | 0.66 | 0.67 | 0.68 | 0.69 | 0.70 | 0.71 | 0.72 | 0.73 | 0.74 | 0.75 | 0.76 | 0.77 | 0.78 | 0.79 | 0.80 | 0.81 |
13-
| ------------------------------------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ |
14-
| <Version version="3.19.x"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> |
15-
| <Version version="3.18.0"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> |
16-
| <Version version="3.17.4 – 3.17.5"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> |
17-
| <Version version="3.17.1 – 3.17.3"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> |
18-
| <Version version="3.17.0"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> |
19-
| <Version version="3.16.7"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> |
20-
| <Version version="3.16.0 – 3.16.6"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> |
21-
| <Version version="3.15.x"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
22-
| <Version version="3.9.x – 3.14.x"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
23-
| <Version version="3.6.x – 3.8.x"/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
24-
| <Version version="3.5.x"/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
25-
| <Version version="3.3.x – 3.4.x"/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
26-
| <Version version="3.0.x – 3.2.x"/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
27-
| <Spacer/> | | | | | | | | | | | | | | | | |
28-
| <Version version="2.14.x – 2.17.x"/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
29-
| <Version version="2.11.x – 2.13.x"/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
30-
| <Version version="2.10.x"/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
31-
| <Version version="2.5.x – 2.9.x"/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
32-
| <Version version="2.3.x – 2.4.x"/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
33-
34-
</div>
35-
36-
:::info
37-
Reanimated 2 won't receive support for newest React Native versions. To get the latest React Native features and updates, upgrade to Reanimated 3.
38-
:::
10+
<ReanimatedCompatibility architecture="paper" />
3911

4012
### Supported React Native versions on the New Architecture (Fabric)
4113

4214
To use Reanimated with [the experimental New Architecture](https://reactnative.dev/docs/the-new-architecture/landing-page), update the package to at least version 3.0.0. Due to the vast number of breaking-changes related to the New Architecture in each React Native version, as a rule of thumb Reanimated supports the latest stable version of React Native.
4315

4416
Reanimated supports the [bridgeless mode](https://github.com/reactwg/react-native-new-architecture/discussions/154).
4517

46-
<div className="compatibility">
47-
48-
| | 0.63 | 0.64 | 0.65 | 0.66 | 0.67 | 0.68 | 0.69 | 0.70 | 0.71 | 0.72 | 0.73 | 0.74 | 0.75 | 0.76 | 0.77 | 0.78 | 0.79 | 0.80 | 0.81 |
49-
| ------------------------------------ | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ |
50-
| <Version version="3.19.x"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> |
51-
| <Version version="3.18.0"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> |
52-
| <Version version="3.17.4 – 3.17.5"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> |
53-
| <Version version="3.17.1 – 3.17.3"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> |
54-
| <Version version="3.17.0"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> |
55-
| <Version version="3.16.7"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> |
56-
| <Version version="3.16.0 – 3.16.6"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> |
57-
| <Version version="3.15.x"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
58-
| <Version version="3.9.x – 3.14.x"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
59-
| <Version version="3.6.x – 3.8.x"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
60-
| <Version version="3.1.x – 3.5.x"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
61-
| <Version version="3.0.x"/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <Yes/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> | <No/> |
62-
63-
</div>
18+
<ReanimatedCompatibility architecture="fabric" />

‎docs/docs-reanimated/versioned_sidebars/version-2.x-sidebars.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
{
7272
"type": "category",
7373
"label": "Guides",
74-
"items": ["guide/testing", "guide/debugging"]
74+
"items": ["guide/compatibility", "guide/testing", "guide/debugging"]
7575
},
7676
{
7777
"type": "category",

0 commit comments

Comments
 (0)