Merge pull request #29273 from storybookjs/dannyhw/feat/rnv8-update-c…

…reate-generator

CLI: Update the React Native init to include v8 dependencies
(cherry picked from commit 3988207)

code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts

@@ -14,15 +14,19 @@ const generator = async (
 
   const reactVersion = packageJson.dependencies.react;
 
-  const controlsPeerDependencies = [
+  const peerDependencies = [
     'react-native-safe-area-context',
     '@react-native-async-storage/async-storage',
     '@react-native-community/datetimepicker',
     '@react-native-community/slider',
+    'react-native-reanimated',
+    'react-native-gesture-handler',
+    '@gorhom/bottom-sheet',
+    'react-native-svg',
   ].filter((dep) => !packageJson.dependencies[dep] && !packageJson.devDependencies[dep]);
 
   const packagesToResolve = [
-    ...controlsPeerDependencies,
+    ...peerDependencies,
     '@storybook/addon-ondevice-controls',
     '@storybook/addon-ondevice-actions',
     '@storybook/react-native',
@@ -57,7 +61,8 @@ const generator = async (
   await copyTemplateFiles({
     packageManager,
     renderer: 'react-native',
-    language: SupportedLanguage.TYPESCRIPT_3_8,
+    // this value for language is not used since we only ship the ts template. This means we just fallback to @storybook/react-native/template/cli.
+    language: SupportedLanguage.TYPESCRIPT_4_9,
     destination: storybookConfigFolder,
   });
 };

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

@@ -356,10 +356,13 @@ export async function doInitiate(options: CommandOptions): Promise<
       
       ${chalk.inverse(' ' + "export {default} from './.storybook';" + ' ')}
       
-      2. Enable transformer.unstable_allowRequireContext in your metro config
+      2. Wrap your metro config with the withStorybook enhancer function like this: 
       
-      For a more detailed guide go to:
-      ${chalk.cyan('https://github.com/storybookjs/react-native#existing-project')}
+      ${chalk.inverse(' ' + "const withStorybook = require('@storybook/react-native/metro/withStorybook');" + ' ')}
+      ${chalk.inverse(' ' + 'module.exports = withStorybook(defaultConfig);' + ' ')}
+
+      For more details go to:
+      ${chalk.cyan('https://github.com/storybookjs/react-native#getting-started')}
       
       Then to run your Storybook, type: