From 1c4424a3a20b2a0e5bcafa5fecd4dcf36d9d217e Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Tue, 28 Jan 2025 11:24:11 +0700
Subject: [PATCH] Merge pull request #30380 from
 storybookjs/dannyhw/feat-rnw-options-docs

(cherry picked from commit 8ae89e5828a93f848562433a67e3d04935ac953c)
---
 .../frameworks/react-native-web-vite.mdx      | 72 ++++++++++++++++++-
 1 file changed, 71 insertions(+), 1 deletion(-)

diff --git a/docs/get-started/frameworks/react-native-web-vite.mdx b/docs/get-started/frameworks/react-native-web-vite.mdx
index 19324dda5c40..5e40219a06aa 100644
--- a/docs/get-started/frameworks/react-native-web-vite.mdx
+++ b/docs/get-started/frameworks/react-native-web-vite.mdx
@@ -30,6 +30,7 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
   * React-Native ≥ 0.72
   * React-Native-Web ≥ 0.19
   * Storybook ≥ 8.5
+  * Vite ≥ 5.0
 
   ## Getting started
 
@@ -133,13 +134,82 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
     framework: {
       name: '@storybook/react-native-web-vite',
       options: {
-        // ...
+        // You should apply babel plugins and presets here for your project that you want to apply to your code
+        // for example put the reanimated preset here if you are using reanimated 
+        // or the nativewind jsxImportSource for example
+        pluginReactOptions: {
+          jsxRuntime: 'automatic' | 'classic', // default: 'automatic'
+          jsxImportSource: string, // default: 'react'
+          babel:{
+            plugins: Array<string | [string, any]>,
+            presets: Array<string | [string, any]>,
+            // ... other compatible babel options
+          }
+          include: Array<string|RegExp>,
+          exclude: Array<string|RegExp>,
+          // ... other compatible @vitejs/plugin-react options
+        }
+
+        // these options are used to configure transpilation of node_modules via babel
+        // in most cases, you don't need to configure these options, but they are available if you need them
+        pluginBabelOptions: {
+          include: Array<string|RegExp> // default: [/node_modules\/(react-native|@react-native)/],
+          exclude: Array<string|RegExp> // default: undefined
+          presets: Array<string|[string, any]>,
+          plugins: Array<string|[string, any]>,
+          presetReact?: {
+            runtime?: 'automatic' | 'classic'; // default: 'automatic'
+            importSource?: string; // default: 'react'
+          };
+          // ... other compatible vite-plugin-babel options
+        }
       },
     },
   };
 
   export default config;
   ```
+  #### Example configuration for reanimated
+
+  ```ts title=".storybook/main.ts"
+  const main: StorybookConfig = {
+    // ... rest of config
+
+    framework: {
+      name: "@storybook/react-native-web-vite",
+      options: {
+        pluginReactOptions: {
+          babel: {
+            plugins: [
+              "@babel/plugin-proposal-export-namespace-from",
+              "react-native-reanimated/plugin",
+            ],
+          },
+        },
+      },
+    };
+
+    // ... rest of config
+  }
+  ```
+
+  #### Example configuration for nativewind
+
+  ```ts title=".storybook/main.ts"
+
+  const main: StorybookConfig = {
+    // ... rest of config
+
+    framework: {
+      name: "@storybook/react-native-web-vite",
+      options: {
+        pluginReactOptions: {
+          jsxImportSource: "nativewind",
+        },
+      },
+    },
+  }
+  ```
 
   #### `builder`