From 7b3a8b1bbba00f691f0281867fb9c761357b0bc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20=C5=81opaci=C5=84ski?=
 <lop.mateusz.2001@gmail.com>
Date: Fri, 18 Oct 2024 11:02:41 +0200
Subject: [PATCH] docs: Restore logger docs changes after release (#6608)

## Summary

This PR just restores changes I reverted in the #6529 PR. Since now
logger changes are released after `3.16.0` is rolled out, we can restore
the getting start part and remove unreleased labels/info boxes.
---
 .../docs/debugging/accurate-call-stacks.mdx   |  4 ---
 .../docs/debugging/logger-configuration.mdx   |  4 ---
 .../docs/fundamentals/getting-started.mdx     | 28 ++++++++++++++++++-
 .../src/theme/DocSidebar/index.js             |  5 +---
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx b/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx
index 45490b59636..a268e5d7b6d 100644
--- a/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx
+++ b/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx
@@ -6,10 +6,6 @@ sidebar_position: 1
 
 # Accurate Call Stacks
 
-import UnreleasedInfo from '../_shared/_unreleased_info.mdx';
-
-<UnreleasedInfo />
-
 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.
diff --git a/packages/docs-reanimated/docs/debugging/logger-configuration.mdx b/packages/docs-reanimated/docs/debugging/logger-configuration.mdx
index 8234dce99f4..d20ce87b605 100644
--- a/packages/docs-reanimated/docs/debugging/logger-configuration.mdx
+++ b/packages/docs-reanimated/docs/debugging/logger-configuration.mdx
@@ -6,10 +6,6 @@ sidebar_position: 2
 
 # Logger configuration
 
-import UnreleasedInfo from '../_shared/_unreleased_info.mdx';
-
-<UnreleasedInfo />
-
 Reanimated shows warnings that indicate misuses of the library API, such as modifying the [shared value](/docs/fundamentals/glossary#shared-value) during component re-render. These logs can be configured to be more or less verbose.
 
 The **default** logger configuration doesn't require any user setup and displays **all warnings and errors**. If you want to change this behavior, use the `configureReanimatedLogger` function.
diff --git a/packages/docs-reanimated/docs/fundamentals/getting-started.mdx b/packages/docs-reanimated/docs/fundamentals/getting-started.mdx
index 5cdd34597c4..a3601df99f0 100644
--- a/packages/docs-reanimated/docs/fundamentals/getting-started.mdx
+++ b/packages/docs-reanimated/docs/fundamentals/getting-started.mdx
@@ -91,7 +91,33 @@ To learn more about the plugin head onto to [Reanimated babel plugin](/docs/fund
 
 </details>
 
-### Step 3: Clear Metro bundler cache (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.
+
+```js
+// metro.config.js
+const {
+  wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
+
+const config = {
+  // Your existing Metro configuration options
+};
+
+module.exports = wrapWithReanimatedMetroConfig(config);
+```
+
+<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).
+
+</details>
+
+### Step 4: Clear Metro bundler cache (recommended)
 
 <Tabs groupId="package-managers">
   <TabItem value="expo" label="EXPO" default>
diff --git a/packages/docs-reanimated/src/theme/DocSidebar/index.js b/packages/docs-reanimated/src/theme/DocSidebar/index.js
index 45985273d22..fe3d8d2cb57 100644
--- a/packages/docs-reanimated/src/theme/DocSidebar/index.js
+++ b/packages/docs-reanimated/src/theme/DocSidebar/index.js
@@ -15,10 +15,7 @@ export default function DocSidebarWrapper(props) {
 
   const newItems = ['animations/withClamp'];
   const experimentalItems = ['shared-element-transitions/overview'];
-  const unreleasedItems = [
-    'debugging/accurate-call-stacks',
-    'debugging/logger-configuration',
-  ];
+  const unreleasedItems = [];
 
   return (
     <DocSidebar