software-mansion · piaskowyk · Oct 13, 2023 · Sep 22, 2023 · Sep 25, 2023 · Sep 27, 2023
diff --git a/android/build.gradle b/android/build.gradle
@@ -381,6 +381,7 @@ android {
 def assertLatestReactNativeWithNewArchitecture = task assertLatestReactNativeWithNewArchitectureTask {
     onlyIf { IS_NEW_ARCHITECTURE_ENABLED && REANIMATED_MAJOR_VERSION == 3 && REACT_NATIVE_MINOR_VERSION < 72 }
     doFirst {
+        // If you change the minimal React Native version remember to update Compatibility Table in docs
         throw new GradleException(
             "[Reanimated] Outdated version of React Native for New Architecture. Reanimated " + REANIMATED_VERSION + " supports the New Architecture on React Native 0.72.0+. See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#outdated-version-of-react-native-for-new-architecture for more information."
         )
@@ -390,6 +391,7 @@ def assertLatestReactNativeWithNewArchitecture = task assertLatestReactNativeWit
 def assertMinimalReactNativeVersion = task assertMinimalReactNativeVersionTask {
     onlyIf { REACT_NATIVE_MINOR_VERSION < 66 }
     doFirst {
+        // If you change the minimal React Native version remember to update Compatibility Table in docs
         throw new GradleException("[Reanimated] Unsupported React Native version. Please use 0.66 or newer.")
     }
 }

diff --git a/docs/docs/advanced/measure.mdx b/docs/docs/advanced/measure.mdx
@@ -130,7 +130,7 @@ const handlePress = () => {
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/advanced/setNativeProps.mdx b/docs/docs/advanced/setNativeProps.mdx
@@ -75,7 +75,7 @@ import SetNativePropsSrc from '!!raw-loader!@site/src/examples/SetNativeProps';
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/advanced/useAnimatedReaction.mdx b/docs/docs/advanced/useAnimatedReaction.mdx
@@ -132,7 +132,7 @@ function App() {
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/advanced/useFrameCallback.mdx b/docs/docs/advanced/useFrameCallback.mdx
@@ -97,7 +97,7 @@ import FrameCallbackDinoSrc from '!!raw-loader!@site/src/examples/FrameCallbackD
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/animations/withDecay.mdx b/docs/docs/animations/withDecay.mdx
@@ -99,7 +99,7 @@ import DecayTrainSrc from '!!raw-loader!@site/src/examples/DecayTrain';
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/animations/withDelay.mdx b/docs/docs/animations/withDelay.mdx
@@ -65,7 +65,7 @@ import DelayTextSrc from '!!raw-loader!@site/src/examples/DelayText';
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/animations/withRepeat.mdx b/docs/docs/animations/withRepeat.mdx
@@ -88,7 +88,7 @@ import SequenceWobbleSrc from '!!raw-loader!@site/src/examples/SequenceWobble';
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/animations/withSequence.mdx b/docs/docs/animations/withSequence.mdx
@@ -65,7 +65,7 @@ import SequenceWobbleSrc from '!!raw-loader!@site/src/examples/SequenceWobble';
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/animations/withSpring.mdx b/docs/docs/animations/withSpring.mdx
@@ -110,7 +110,7 @@ import SpringCarouselSrc from '!!raw-loader!@site/src/examples/SpringCarousel';
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/animations/withTiming.mdx b/docs/docs/animations/withTiming.mdx
@@ -139,7 +139,7 @@ import TimingTabsSrc from '!!raw-loader!@site/src/examples/TimingTabs';
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/core/cancelAnimation.mdx b/docs/docs/core/cancelAnimation.mdx
@@ -55,7 +55,7 @@ import CancelAnimationSrc from '!!raw-loader!@site/src/examples/CancelAnimation'
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/core/createAnimatedComponent.mdx b/docs/docs/core/createAnimatedComponent.mdx
@@ -63,7 +63,7 @@ import CreateAnimatedComponentSrc from '!!raw-loader!@site/src/examples/CreateAn
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/core/useAnimatedProps.mdx b/docs/docs/core/useAnimatedProps.mdx
@@ -89,7 +89,7 @@ import AnimatingPropsSrc from '!!raw-loader!@site/src/examples/AnimatingProps';
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/core/useAnimatedRef.mdx b/docs/docs/core/useAnimatedRef.mdx
@@ -73,7 +73,7 @@ Alternatively, you can get the value stored in the `current` in [event handlers]
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/core/useAnimatedStyle.mdx b/docs/docs/core/useAnimatedStyle.mdx
@@ -123,7 +123,7 @@ const styles = StyleSheet.create({
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/core/useDerivedValue.mdx b/docs/docs/core/useDerivedValue.mdx
@@ -64,7 +64,7 @@ import DerivedValueSrc from '!!raw-loader!@site/src/examples/DerivedValue';
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/core/useSharedValue.mdx b/docs/docs/core/useSharedValue.mdx
@@ -106,7 +106,7 @@ function App() {
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/device/useReducedMotion.mdx b/docs/docs/device/useReducedMotion.mdx
@@ -45,7 +45,7 @@ import UseReducedMotionSrc from '!!raw-loader!@site/src/examples/UseReducedMotio
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/guides/compatibility.mdx b/docs/docs/guides/compatibility.mdx
@@ -0,0 +1,41 @@
+---
+id: compatibility
+sidebar_label: Compatibility
+---
+
+# Compatibility table
+
+### Currently supported React Native versions (Paper)
+
+<div className="compatibility">
+
+|                                      | 0.63            | 0.64            | 0.65            | 0.66         | 0.67         | 0.68            | 0.69            | 0.70            | 0.71            | 0.72            |
+| ------------------------------------ | --------------- | --------------- | --------------- | ------------ | ------------ | --------------- | --------------- | --------------- | --------------- | --------------- |
+| <Version version="3.4.x - 3.5.x"/>   | <NotSupported/> | <NotSupported/> | <NotSupported/> | <Supported/> | <Supported/> | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/>    |
+| <Version version="3.1.x - 3.3.x"/>   | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/> | <Supported/> | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/>    |
+| <Version version="3.0.x"/>           | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/> | <Supported/> | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/>    | <NotSupported/> |
+| <Spacer/>                            |                 |                 |                 |              |              |                 |                 |                 |                 |                 |
+| <Version version="2.14.x - 2.17.x"/> | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/> | <Supported/> | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/>    | <NotSupported/> |
+| <Version version="2.11.x - 2.13.x"/> | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/> | <Supported/> | <Supported/>    | <Supported/>    | <Supported/>    | <NotSupported/> | <NotSupported/> |
+| <Version version="2.10.x"/>          | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/> | <Supported/> | <Supported/>    | <Supported/>    | <NotSupported/> | <NotSupported/> | <NotSupported/> |
+| <Version version="2.5.x - 2.9.x"/>   | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/> | <Supported/> | <Supported/>    | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> |
+| <Version version="2.3.x - 2.4.x"/>   | <Supported/>    | <Supported/>    | <Supported/>    | <Supported/> | <Supported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> |
+
+</div>
+
+:::info
+Reanimated 2 won't receive support for newest React Native versions. To get the latest React Native features and updates, upgrade to Reanimated 3.
+:::
+
+### Supported React Native versions on the New Architecture (Fabric)
+
+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.
+
+<div className="compatibility">
+
+|                                    | 0.63            | 0.64            | 0.65            | 0.66            | 0.67            | 0.68            | 0.69            | 0.70            | 0.71            | 0.72            |
+| ---------------------------------- | --------------- | --------------- | --------------- | --------------- | --------------- | --------------- | --------------- | --------------- | --------------- | --------------- |
+| <Version version="3.1.x - 3.5.x"/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <Supported/>    |
+| <Version version="3.0.x"/>         | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <NotSupported/> | <Supported/>    | <NotSupported/> |
+
+</div>
diff --git a/docs/docs/guides/troubleshooting.mdx b/docs/docs/guides/troubleshooting.mdx
@@ -136,7 +136,8 @@ See [Multiple versions of Reanimated were detected](#multiple-versions-of-reanim
 
 **Problem:** Reanimated supports New Architecture (Fabric) only on the latest minor release of React Native.
 
-**Solution:** Please upgrade to at least React Native 0.72 or downgrade to an older version of Reanimated 3.
+**Solution:** Please upgrade to a newer version of React Native or downgrade to an older version of Reanimated.
+See [the compatibility table](compatibility) for a full list of supported versions of React Native.
 
 ## Threading issues
 

diff --git a/docs/docs/layout-animations/entering-exiting-animations.mdx b/docs/docs/layout-animations/entering-exiting-animations.mdx
@@ -1350,7 +1350,7 @@ ZoomIn.delay(500)
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/threading/createWorkletRuntime.mdx b/docs/docs/threading/createWorkletRuntime.mdx
@@ -71,7 +71,7 @@ An optional worklet that will be run synchronously on the same thread immediatel
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/threading/runOnJS.mdx b/docs/docs/threading/runOnJS.mdx
@@ -75,7 +75,7 @@ withTiming(0, {}, () => {
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/threading/runOnUI.mdx b/docs/docs/threading/runOnUI.mdx
@@ -73,7 +73,7 @@ import RunOnUISrc from '!!raw-loader!@site/src/examples/RunOnUI';
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/docs/utilities/clamp.mdx b/docs/docs/utilities/clamp.mdx
@@ -56,7 +56,7 @@ import ClampSrc from '!!raw-loader!@site/src/examples/Clamp';
 
 ## Platform compatibility
 
-<div className="compatibility">
+<div className="platform-compatibility">
 
 | Android | iOS | Web |
 | ------- | --- | --- |

diff --git a/docs/src/components/Compatibility/index.tsx b/docs/src/components/Compatibility/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+export function Supported() {
+  return <div className={styles.supported}>yes</div>;
+}
+
+export function NotSupported() {
+  return <div className={styles.notSupported}>no</div>;
+}
+
+interface VersionProps {
+  version: string;
+}
+
+export function Version({ version }: VersionProps) {
+  return <div className={styles.version}>{version}</div>;
+}
+
+export function Spacer() {
+  return <div className={styles.spacer}></div>;
+}
diff --git a/docs/src/components/Compatibility/styles.module.css b/docs/src/components/Compatibility/styles.module.css
@@ -0,0 +1,25 @@
+.supported {
+  color: var(--swm-compatibility-text-color);
+  background-color: var(--swm-compatibility-supported-background);
+  text-align: center;
+  text-transform: capitalize;
+  padding: 12px;
+}
+
+.notSupported {
+  color: var(--swm-compatibility-text-color);
+  background-color: var(--swm-compatibility-not-supported-background);
+  text-align: center;
+  text-transform: capitalize;
+  padding: 12px;
+}
+
+.version {
+  font-weight: bold;
+  text-align: center;
+  padding: 12px;
+}
+
+.spacer {
+  padding-top: 10px;
+}
diff --git a/docs/src/css/colors.css b/docs/src/css/colors.css
@@ -264,6 +264,11 @@
   /* Version badge */
   --swm-version-badge: var(--swm-navy-light-100);
   --swm-version-badge-background: var(--swm-navy-light-10);
+
+  /* Compatibility table */
+  --swm-compatibility-supported-background: var(--swm-green-light-80);
+  --swm-compatibility-not-supported-background: var(--swm-red-light-80);
+  --swm-compatibility-text-color: var(--swm-white);
 }
 
 :root[data-theme='dark'] {
@@ -425,6 +430,11 @@
   /* Version badge */
   --swm-version-badge: var(--swm-off-white);
   --swm-version-badge-background: var(--swm-light-off-navy);
+
+  /* Compatibility table */
+  --swm-compatibility-supported-background: var(--swm-green-dark-120);
+  --swm-compatibility-not-supported-background: var(--swm-red-dark-120);
+  --swm-compatibility-text-color: var(--swm-navy-dark-20);
 }
 
 code {

diff --git a/docs/src/css/overrides.css b/docs/src/css/overrides.css
@@ -18,12 +18,33 @@ table thead tr {
   border-bottom: 1px solid var(--ifm-table-border-color);
 }
 
-.compatibility table {
+.platform-compatibility table {
   display: table;
   width: 100%;
   table-layout: fixed;
 }
 
+.compatibility {
+  overflow-x: auto;
+}
+
+.compatibility table {
+  display: table;
+  width: 100%;
+  white-space: nowrap;
+}
+
+.compatibility td {
+  padding: 0;
+  border: transparent 2px solid;
+  background: var(--ifm-background-color);
+}
+
+.compatibility th {
+  background: var(--ifm-background-color);
+  border: transparent 2px solid;
+}
+
 .header-github {
   margin-left: 1.5em;
 }