diff --git a/code/core/src/cli/project_types.ts b/code/core/src/cli/project_types.ts index 22879ee9813d..49c78486b4f9 100644 --- a/code/core/src/cli/project_types.ts +++ b/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', diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index e641ad65725b..cfb9616e015c 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -111,6 +111,12 @@ const installStorybook = async ( ); } + 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 }; } diff --git a/docs/get-started/frameworks/react-native-web-vite.mdx b/docs/get-started/frameworks/react-native-web-vite.mdx index 73c19eba6050..70b79617d7fb 100644 --- a/docs/get-started/frameworks/react-native-web-vite.mdx +++ b/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 React Native and React Native Web is to select the "Both" option when installing Storybook. This will install and create configurations for both environments, allowing you to run Storybook for both in the same project. + +However, you can install them separately if one version is installed. You can add a React Native Web Storybook alongside an existing React Native Storybook by running the install command and selecting "React Native Web" in the setup wizard, and vice versa. ## API