From 388179ed7379050cef5920c769e39ce192b5eaf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20=C5=81opaci=C5=84ski?= Date: Thu, 21 Nov 2024 17:09:21 +0100 Subject: [PATCH 1/2] Improve metro config docs --- .../docs/debugging/accurate-call-stacks.mdx | 20 +++++++++++----- .../docs/fundamentals/getting-started.mdx | 24 +++++++++++-------- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx b/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx index a268e5d7b6d..ef6b5578956 100644 --- a/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx +++ b/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx @@ -8,7 +8,11 @@ sidebar_position: 1 When debugging Reanimated code, you may encounter error or warning call stacks that don't clearly indicate the root cause of the problem. These stacks can be misleading, as they often highlight code from Reanimated's internals rather than the misuse of the Reanimated API that is the source of the problem. -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. +To address this, Reanimated provides a Metro configuration wrapper called `wrapWithReanimatedMetroConfig`. This wrapper automatically adjusts Metro config to improve the accuracy of call stacks in warnings and errors generated by the Reanimated library. + +:::note Expo Managed Apps +If you're using an **Expo managed app**, this step is unnecessary. Expo automatically handles Metro configuration for Reanimated. You can safely skip this page. +:::
How does it work? @@ -29,13 +33,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. + ## 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 +63,5 @@ 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. + +- Make sure your project is running **Reanimated 3.16.0** or newer. `wrapWithReanimatedMetroConfig` is not available in older versions of Reanimated. diff --git a/packages/docs-reanimated/docs/fundamentals/getting-started.mdx b/packages/docs-reanimated/docs/fundamentals/getting-started.mdx index a3601df99f0..22fa3f3b01c 100644 --- a/packages/docs-reanimated/docs/fundamentals/getting-started.mdx +++ b/packages/docs-reanimated/docs/fundamentals/getting-started.mdx @@ -91,9 +91,11 @@ 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 (optional) -Wrap your existing Metro configuration in the `metro.config.js` file with the `wrapWithReanimatedMetroConfig` function. +If you are using a Bare React Native workflow, wrap your existing Metro configuration in the `metro.config.js` file with the `wrapWithReanimatedMetroConfig` function. + +This step can be skipped if you are using Expo as it already includes the necessary configuration. ```js // metro.config.js @@ -101,19 +103,21 @@ 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 Version Compatibility + +This configuration was added in **Reanimated 3.16.0** and is not available in older versions. Skip this step if you are using an older version of Reanimated. + +::: +
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.
From 330cc016cdf69d5ffc3e4ce20dd6d091d54fda27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20=C5=81opaci=C5=84ski?= Date: Thu, 21 Nov 2024 18:29:47 +0100 Subject: [PATCH 2/2] Some more improvements --- .../docs/debugging/accurate-call-stacks.mdx | 15 ++++++++++----- .../docs/fundamentals/getting-started.mdx | 11 +++++------ 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx b/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx index ef6b5578956..56252d26cd4 100644 --- a/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx +++ b/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx @@ -8,10 +8,13 @@ sidebar_position: 1 When debugging Reanimated code, you may encounter error or warning call stacks that don't clearly indicate the root cause of the problem. These stacks can be misleading, as they often highlight code from Reanimated's internals rather than the misuse of the Reanimated API that is the source of the problem. -To address this, Reanimated provides a Metro configuration wrapper called `wrapWithReanimatedMetroConfig`. This wrapper automatically adjusts Metro config to improve the accuracy of call stacks in warnings and errors generated by the Reanimated library. +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. -:::note Expo Managed Apps -If you're using an **Expo managed app**, this step is unnecessary. Expo automatically handles Metro configuration for Reanimated. You can safely skip this page. :::
@@ -40,7 +43,7 @@ module.exports = wrapWithReanimatedMetroConfig( ### 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. +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 @@ -64,4 +67,6 @@ 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. -- Make sure your project is running **Reanimated 3.16.0** or newer. `wrapWithReanimatedMetroConfig` is not available in older versions of Reanimated. +- 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 22fa3f3b01c..bf34ed63181 100644 --- a/packages/docs-reanimated/docs/fundamentals/getting-started.mdx +++ b/packages/docs-reanimated/docs/fundamentals/getting-started.mdx @@ -91,11 +91,9 @@ To learn more about the plugin head onto to [Reanimated babel plugin](/docs/fund
-### Step 3: Wrap Metro config with Reanimated wrapper (optional) +### Step 3: Wrap Metro config with Reanimated wrapper (recommended) -If you are using a Bare React Native workflow, wrap your existing Metro configuration in the `metro.config.js` file with the `wrapWithReanimatedMetroConfig` function. - -This step can be skipped if you are using Expo as it already includes the necessary configuration. +Wrap your existing Metro configuration in the `metro.config.js` file with the `wrapWithReanimatedMetroConfig` function. ```js // metro.config.js @@ -108,9 +106,10 @@ module.exports = wrapWithReanimatedMetroConfig( ); ``` -:::note Version Compatibility +:::note Important -This configuration was added in **Reanimated 3.16.0** and is not available in older versions. Skip this step if you are using an older version of Reanimated. +- `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. :::