diff --git a/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx b/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx
index a268e5d7b6d..56252d26cd4 100644
--- a/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx
+++ b/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx
@@ -10,6 +10,13 @@ When debugging Reanimated code, you may encounter error or warning call stacks t
To address this, Reanimated provides a Metro configuration wrapper called `wrapWithReanimatedMetroConfig`. This wrapper automatically adjusts your Metro config to improve the accuracy of call stacks in warnings and errors generated by the Reanimated library.
+:::note Important
+
+- `wrapWithReanimatedMetroConfig` was introduced in **Reanimated 3.16.0**. If you are using an older version of Reanimated, you **can't** apply this configuration.
+- If your project extends the default config from `expo/metro-config`, the necessary adjustments are **already included** and you **don't** need to apply them manually.
+
+:::
+
How does it work?
@@ -29,13 +36,15 @@ const {
wrapWithReanimatedMetroConfig,
} = require('react-native-reanimated/metro-config');
-const config = {
- // Your existing Metro configuration options
-};
-
-module.exports = wrapWithReanimatedMetroConfig(config);
+module.exports = wrapWithReanimatedMetroConfig(
+ config // your existing metro config
+);
```
+### Version Compatibility
+
+The `wrapWithReanimatedMetroConfig` function was introduced in **Reanimated 3.16.0**. This feature is not available in older versions, so ensure your project is using version 3.16.0 or newer if you want to apply this configuration.
+
## Example
The following example shows the difference in call stacks before and after applying the Reanimated Metro config wrapper. The **Before** image displays Reanimated source code as the error source, while the **After** image shows the actual incorrect code that caused the error.
@@ -57,3 +66,7 @@ The following example shows the difference in call stacks before and after apply
- Some errors, particularly from asynchronous code, may still result in stack traces pointing to Reanimated internals instead of the exact problematic line in your code. This occurs because stack traces lose track of the original code that initiated the asynchronous operation. In such a case, you'll need to manually debug the issue based on the error message to identify the potential cause of the problem.
+
+- You don't need `wrapWithReanimatedMetroConfig` if you import the default metro configuration from `expo/metro-config`.
+
+- Make sure your project is running **Reanimated 3.16.0** or newer. Older versions of Reanimated don't support the `wrapWithReanimatedMetroConfig` function.
diff --git a/packages/docs-reanimated/docs/fundamentals/getting-started.mdx b/packages/docs-reanimated/docs/fundamentals/getting-started.mdx
index a3601df99f0..bf34ed63181 100644
--- a/packages/docs-reanimated/docs/fundamentals/getting-started.mdx
+++ b/packages/docs-reanimated/docs/fundamentals/getting-started.mdx
@@ -91,7 +91,7 @@ To learn more about the plugin head onto to [Reanimated babel plugin](/docs/fund
-### Step 3: Wrap metro config with reanimated wrapper (recommended)
+### Step 3: Wrap Metro config with Reanimated wrapper (recommended)
Wrap your existing Metro configuration in the `metro.config.js` file with the `wrapWithReanimatedMetroConfig` function.
@@ -101,19 +101,22 @@ const {
wrapWithReanimatedMetroConfig,
} = require('react-native-reanimated/metro-config');
-const config = {
- // Your existing Metro configuration options
-};
-
-module.exports = wrapWithReanimatedMetroConfig(config);
+module.exports = wrapWithReanimatedMetroConfig(
+ config // your existing metro config
+);
```
+:::note Important
+
+- `wrapWithReanimatedMetroConfig` was introduced in **Reanimated 3.16.0**. If you are using an older version of Reanimated, please skip this step.
+- If your project extends the default config from `expo/metro-config`, the necessary adjustments are **already included** and you **don't** need to apply this step.
+
+:::
+
Why should I do this?
-Wrapping your Metro configuration with the Reanimated Metro config wrapper will result in displaying improved reanimated errors and warnings with more accurate call stacks. Thanks to this, identifying misuses of the Reanimated API will be much easier than before.
-
-To learn more about this feature, head onto to [Accurate Call Stacks](/docs/debugging/accurate-call-stacks).
+Wrapping your Metro configuration with the Reanimated Metro config wrapper provides improved error messages and more accurate call stacks, making it easier to debug issues when using the Reanimated API. For more information, check out the [Accurate Call Stacks](/docs/debugging/accurate-call-stacks) page.