diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index a77878dcc191..94724ba1af59 100644 --- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/code/lib/cli/src/generators/REACT_NATIVE/index.ts @@ -11,6 +11,7 @@ const generator = async ( const missingReactDom = !packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']; + const reactVersion = packageJson.dependencies.react; const packagesToResolve = [ @@ -24,25 +25,26 @@ const generator = async ( '@storybook/react-native', ]; - // change these to latest version once v6 stable is released - const packagesWithFixedVersion = [ - '@storybook/addon-actions@^6.5.16', - '@storybook/addon-controls@^6.5.16', - ]; + const packagesWithFixedVersion: string[] = []; const versionedPackages = await packageManager.getVersionedPackages(packagesToResolve); const babelDependencies = await getBabelDependencies(packageManager, packageJson); const packages: string[] = []; + packages.push(...babelDependencies); + packages.push(...packagesWithFixedVersion); + packages.push(...versionedPackages); + if (missingReactDom && reactVersion) { packages.push(`react-dom@${reactVersion}`); } await packageManager.addDependencies({ ...npmOptions, packageJson }, packages); + packageManager.addScripts({ 'storybook-generate': 'sb-rn-get-stories', 'storybook-watch': 'sb-rn-watcher', @@ -53,7 +55,7 @@ const generator = async ( await copyTemplateFiles({ packageManager, renderer: 'react-native', - language: SupportedLanguage.JAVASCRIPT, + language: SupportedLanguage.TYPESCRIPT_3_8, destination: storybookConfigFolder, includeCommonAssets: false, }); diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index 54321ccb96a9..703002ec7cca 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -9,7 +9,6 @@ import { HandledError, JsPackageManagerFactory, commandLog, - codeLog, paddedLog, } from '@storybook/core-common'; import type { JsPackageManager } from '@storybook/core-common'; @@ -347,15 +346,25 @@ export async function doInitiate( } if (projectType === ProjectType.REACT_NATIVE) { - logger.log(); - logger.log(chalk.yellow('NOTE: installation is not 100% automated.\n')); - logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`); - codeLog(["export {default} from './.storybook';"]); - logger.log('\n Then to run your Storybook, type:\n'); - codeLog([packageManager.getRunCommand('start')]); - logger.log('\n For more in information, see the github readme:\n'); - logger.log(chalk.cyan('https://github.com/storybookjs/react-native')); - logger.log(); + logger.log(dedent` + ${chalk.yellow('NOTE: installation is not 100% automated.')} + + To run Storybook, you will need to: + + 1. Replace the contents of your app entry with the following + + ${chalk.inverse(' ' + "export {default} from './.storybook';" + ' ')} + + 2. Enable transformer.unstable_allowRequireContext in your metro config + + For a more detailed guide go to: + ${chalk.cyan('https://github.com/storybookjs/react-native#existing-project')} + + Then to run your Storybook, type: + + ${chalk.inverse(' ' + packageManager.getRunCommand('start') + ' ')} + + `); return { shouldRunDev: false }; }