software-mansion · maciekstosio · Jun 17, 2024 · May 13, 2024 · May 13, 2024 · May 13, 2024
diff --git a/packages/docs-reanimated/docs/_shared/_docs_compatibility_info.mdx b/packages/docs-reanimated/docs/_shared/_docs_compatibility_info.mdx
@@ -0,0 +1,8 @@
+:::info
+This page was ported from an old version of the documentation.
+
+As we're rewriting the documentation some of the pages might be a little outdated.
+
+If you'd like to help with transition you can find guidelines in [contributing guide](/docs/guides/contributing#helping-with-documentation).
+
+:::
diff --git a/packages/docs-reanimated/docs/advanced/dispatchCommand.mdx b/packages/docs-reanimated/docs/advanced/dispatchCommand.mdx
@@ -4,11 +4,9 @@ sidebar_position: 7
 
 # dispatchCommand
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 Allows to dispatch command on a native component synchronously from the UI thread.
 

diff --git a/packages/docs-reanimated/docs/advanced/useEvent.mdx b/packages/docs-reanimated/docs/advanced/useEvent.mdx
@@ -4,11 +4,9 @@ sidebar_position: 4
 
 # useEvent
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 This is low-level hook returning event handler that will be invoked with native events, which should be used in order to create custom event handler hook like `useAnimatedGestureHandler` or `useAnimatedScrollHandler`.
 

diff --git a/packages/docs-reanimated/docs/advanced/useHandler.mdx b/packages/docs-reanimated/docs/advanced/useHandler.mdx
@@ -4,11 +4,9 @@ sidebar_position: 5
 
 # useHandler
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 This is low-level hook returning context object and value indicating whether worklet should be rebuilt, which should be used in order to create custom event handler hook like `useAnimatedGestureHandler` or `useAnimatedScrollHandler`.
 

diff --git a/packages/docs-reanimated/docs/guides/contributing.mdx b/packages/docs-reanimated/docs/guides/contributing.mdx
diff --git a/packages/docs-reanimated/docs/guides/debugging-worklets.mdx b/packages/docs-reanimated/docs/guides/debugging-worklets.mdx
@@ -4,12 +4,6 @@ title: 'Debugging worklets'
 sidebar_label: 'Debugging worklets'
 ---
 
-:::info
-This page was ported from an old version of the documentation.
-
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
-
 import {
   SummaryTable,
   ChromeDebuggerTable,
@@ -18,6 +12,9 @@ import {
   SafariDevToolsTable,
   ReactDeveloperToolsTable,
 } from './debugging_tables/tables';
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
+
+<DocsCompatibilityInfo />
 
 Due to Reanimated's unique architecture and usage of a second JS runtime, debugging
 can be problematic, and some common solutions might not work as expected.

diff --git a/...animated/docs/guides/testing-with-jest.md → ...nimated/docs/guides/testing-with-jest.mdx b/...animated/docs/guides/testing-with-jest.md → ...nimated/docs/guides/testing-with-jest.mdx
@@ -4,11 +4,9 @@ title: 'Testing with Jest'
 sidebar_label: 'Testing with Jest'
 ---
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 Reanimated test mocks use web implementation of Reanimated2. Before you begin using Reanimated mocks you need some setup actions.
 

diff --git a/...ocs-reanimated/docs/guides/web-support.md → ...cs-reanimated/docs/guides/web-support.mdx b/...ocs-reanimated/docs/guides/web-support.md → ...cs-reanimated/docs/guides/web-support.mdx
@@ -4,11 +4,9 @@ title: Web Support
 sidebar_label: Web Support
 ---
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 It's possible to launch Reanimated in a web browser. For that case all of the functionalities are implemented purely in JavaScript, hence the efficiency of the animations might be lower.
 

diff --git a/packages/docs-reanimated/docs/layout-animations/custom-animations.mdx b/packages/docs-reanimated/docs/layout-animations/custom-animations.mdx
@@ -4,11 +4,9 @@ sidebar_position: 4
 
 # Custom animations
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 If our set of predefined animations is not enough for you then this tab is what you are looking for.
 

diff --git a/packages/docs-reanimated/docs/layout-animations/keyframe-animations.mdx b/packages/docs-reanimated/docs/layout-animations/keyframe-animations.mdx
@@ -4,11 +4,9 @@ sidebar_position: 2
 
 # Keyframe animations
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 The document explains how you can define complex animation using simple and popular animation definitions schema - Keyframes.
 

diff --git a/packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx b/packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
@@ -4,11 +4,9 @@ sidebar_position: 3
 
 # Layout transitions
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 The document explains how can you animate all layout changes for a specific view just by adding a single property to the view.
 To be precise how to animate positions and dimensions of components. What's important it will all happen entirely on UI thread without any communication through the bridge. There are plenty of ways in which you can animated layout changes however in contrast to entering and exiting animations they are not so regular. We've prepared a few predefined layout transitions, however if you want to create more custom and complex transition you can create your own.

diff --git a/packages/docs-reanimated/docs/scroll/useAnimatedScrollHandler.mdx b/packages/docs-reanimated/docs/scroll/useAnimatedScrollHandler.mdx
@@ -4,11 +4,9 @@ sidebar_position: 3
 
 # useAnimatedScrollHandler
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 This is a convenience hook that returns an event handler reference which can be used with React Native's scrollable components.
 

diff --git a/packages/docs-reanimated/docs/shared-element-transitions/overview.mdx b/packages/docs-reanimated/docs/shared-element-transitions/overview.mdx
@@ -4,11 +4,9 @@ title: Shared Element Transitions
 sidebar_label: Overview
 ---
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 :::caution
 

diff --git a/packages/docs-reanimated/docs/utilities/getRelativeCoords.mdx b/packages/docs-reanimated/docs/utilities/getRelativeCoords.mdx
@@ -4,11 +4,9 @@ sidebar_position: 4
 
 # getRelativeCoords
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 Determines the location on the screen, relative to the given view. It might be useful when there are only absolute coordinates available and you need coordinates relative to the parent.
 

diff --git a/packages/docs-reanimated/docs/utilities/interpolateColor.mdx b/packages/docs-reanimated/docs/utilities/interpolateColor.mdx
@@ -4,11 +4,9 @@ sidebar_position: 3
 
 # interpolateColor
 
-:::info
-This page was ported from an old version of the documentation.
+import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
 
-As we're rewriting the documentation some of the pages might be a little outdated.
-:::
+<DocsCompatibilityInfo />
 
 Maps input range to output colors using linear interpolation. It works just like `interpolate` function but the output is color string in `rgba(r, g, b, a)` notation.
 

diff --git a/packages/docs-reanimated/static/img/contributing/android_studio.png b/packages/docs-reanimated/static/img/contributing/android_studio.png
diff --git a/packages/docs-reanimated/static/img/contributing/xcode.png b/packages/docs-reanimated/static/img/contributing/xcode.png