Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Information about version compatibility and a note about expo in metro config docs #6743

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

docs: Information about version compatibility and a note about expo in metro config docs #6743

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
388179e
Improve metro config docs
MatiPl01 Nov 21, 2024
330cc01
Some more improvements
MatiPl01 Nov 21, 2024
e29c07d
Merge branch 'main' into @matipl01/metro-config-docs-improvement
MatiPl01 Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 18 additions & 5 deletions packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

:::

<details>
<summary>How does it work?</summary>

Expand All @@ -29,13 +36,15 @@ const {
wrapWithReanimatedMetroConfig,
} = require('react-native-reanimated/metro-config');

const config = {
// Your existing Metro configuration options
};

module.exports = wrapWithReanimatedMetroConfig(config);
Comment on lines -32 to -36
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This also was confusing for some people who copied code from this example with the empty config and wondered why RN app doesn't start. I don't know how to best represent this in code, so I just removed config so that people can think for a while what this config should be before starting the app.

I think that the best way to represent this would be to show something similar to git diff but I don't know if we have this functionality already added in docs.

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.
Expand All @@ -57,3 +66,7 @@ The following example shows the difference in call stacks before and after apply
</Indent>

- 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.
21 changes: 12 additions & 9 deletions packages/docs-reanimated/docs/fundamentals/getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ To learn more about the plugin head onto to [Reanimated babel plugin](/docs/fund

</details>

### 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.

Expand All @@ -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.

:::

<details>
<summary>Why should I do this?</summary>

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.

</details>

Expand Down
Loading