CLI: Add RN/RNW "both" init option

code/core/src/cli/project_types.ts

@@ -48,6 +48,7 @@ export enum ProjectType {
   REACT_SCRIPTS = 'REACT_SCRIPTS',
   REACT_NATIVE = 'REACT_NATIVE',
   REACT_NATIVE_WEB = 'REACT_NATIVE_WEB',
+  REACT_NATIVE_AND_RNW = 'REACT_NATIVE_AND_RNW',
   REACT_PROJECT = 'REACT_PROJECT',
   WEBPACK_REACT = 'WEBPACK_REACT',
   NEXTJS = 'NEXTJS',

code/lib/create-storybook/src/initiate.ts

@@ -111,6 +111,12 @@ const installStorybook = async <Project extends ProjectType>(
         );
       }
 
+      case ProjectType.REACT_NATIVE_AND_RNW: {
+        commandLog('Adding Storybook support to your "React Native" app');
+        await reactNativeGenerator(packageManager, npmOptions, generatorOptions);
+        return reactNativeWebGenerator(packageManager, npmOptions, generatorOptions);
+      }
+
       case ProjectType.QWIK: {
         return qwikGenerator(packageManager, npmOptions, generatorOptions).then(
           commandLog('Adding Storybook support to your "Qwik" app')
@@ -520,6 +526,10 @@ export async function doInitiate(options: CommandOptions): Promise<
               title: `${picocolors.bold('React Native Web')}: Storybook on web for docs, test, and sharing`,
               value: ProjectType.REACT_NATIVE_WEB,
             },
+            {
+              title: `${picocolors.bold('Both')}: Add both native and web Storybooks`,
+              value: ProjectType.REACT_NATIVE_AND_RNW,
+            },
           ],
         });
         projectType = manualType;
@@ -620,11 +630,11 @@ export async function doInitiate(options: CommandOptions): Promise<
     await telemetry('init', { projectType, features: telemetryFeatures, newUser });
   }
 
-  if (projectType === ProjectType.REACT_NATIVE) {
+  if ([ProjectType.REACT_NATIVE, ProjectType.REACT_NATIVE_AND_RNW].includes(projectType)) {
     logger.log(dedent`
-      ${picocolors.yellow('NOTE: installation is not 100% automated.')}
+      ${picocolors.yellow('React Native (RN) Storybook installation is not 100% automated.')}
 
-      To run Storybook, you will need to:
+      To run RN Storybook, you will need to:
 
       1. Replace the contents of your app entry with the following
 
@@ -638,12 +648,21 @@ export async function doInitiate(options: CommandOptions): Promise<
       For more details go to:
       ${picocolors.cyan('https://github.com/storybookjs/react-native#getting-started')}
 
-      Then to run your Storybook, type:
+      Then to start RN Storybook, run:
 
       ${picocolors.inverse(' ' + packageManager.getRunCommand('start') + ' ')}
-
     `);
 
+    if (projectType === ProjectType.REACT_NATIVE_AND_RNW) {
+      logger.log(dedent`
+
+        ${picocolors.yellow('React Native Web (RNW) Storybook is fully installed.')}
+
+        To start RNW Storybook, run:
+
+        ${picocolors.inverse(' ' + packageManager.getRunCommand('storybook') + ' ')}
+      `);
+    }
     return { shouldRunDev: false };
   }
 

docs/get-started/frameworks/react-native-web-vite.mdx

@@ -96,6 +96,8 @@ Both options provide a catalog of your stories that hot refreshes as you edit th
 
 {/* [Image: native + web] */}
 
+### Comparison
+
 So, which option is right for you?
 
 **Native.** You should choose this option if you want:
@@ -110,7 +112,13 @@ So, which option is right for you?
 - [**Testing**](../../writing-tests/index.mdx) - Component, visual, and a11y tests for your components.
 - [**Addons**](https://storybook.js.org/addons) - 500+ addons that improve development, documentation, testing, and integration with other tools.
 
-**Both.** It’s also possible to use both options together. However, this increases Storybook’s install footprint and requires more work to configure. Therefore, we recommend choosing one option to start and extending it once you have something working.
+**Both.** It’s also possible to use both options together. This increases Storybook’s install footprint but is a good option if you want native fidelity in addition to all of the web features. Learn more below.
+
+## Using both React Native and React Native Web
+
+The easiest way to use both React Native and React Native Web is to select the "Both" option when installing Storybook. It will install and create configurations for both projects.
+
+If you already a React Native Storybook install, you can install a React Native Web Storybook alongside it by running a standard install and selecting "React Native Web" in the setup wizard. Similarly, if you already a React Native Web Storybook install, you can istall and select "React Native".
 
 ## API