Merge pull request #34742 from storybookjs/norbert/dynamic-appname-rn

ReactNative: AppRegistry component name in template

Author: ndelangen

code/lib/create-storybook/src/generators/REACT_NATIVE/generateEntrypoint.test.ts

@@ -34,8 +34,10 @@ describe('generateReactNativeEntrypoint', () => {
       expect(output).toMatchInlineSnapshot(`
         "import { AppRegistry } from 'react-native';
         import AsyncStorage from '@react-native-async-storage/async-storage';
+        import { LiteUI } from '@storybook/react-native-ui-lite';
 
         import { view } from './storybook.requires';
+        import { name as appName } from '../app.json';
 
         /**
          * This file is user-editable.
@@ -49,9 +51,10 @@ describe('generateReactNativeEntrypoint', () => {
             getItem: AsyncStorage.getItem,
             setItem: AsyncStorage.setItem,
           },
+          CustomUIComponent: LiteUI,
         });
 
-        AppRegistry.registerComponent('main', () => StorybookUIRoot);
+        AppRegistry.registerComponent(appName, () => StorybookUIRoot);
 
         export default StorybookUIRoot;
         "
@@ -78,8 +81,10 @@ describe('generateReactNativeEntrypoint', () => {
       expect(output).toMatchInlineSnapshot(`
         "import { AppRegistry } from 'react-native';
         import AsyncStorage from '@react-native-async-storage/async-storage';
+        import { LiteUI } from '@storybook/react-native-ui-lite';
 
         import { view } from './storybook.requires';
+        import { name as appName } from '../app.json';
 
         /**
          * This file is user-editable.
@@ -93,9 +98,10 @@ describe('generateReactNativeEntrypoint', () => {
             getItem: AsyncStorage.getItem,
             setItem: AsyncStorage.setItem,
           },
+          CustomUIComponent: LiteUI,
         });
 
-        AppRegistry.registerComponent('main', () => StorybookUIRoot);
+        AppRegistry.registerComponent(appName, () => StorybookUIRoot);
 
         export default StorybookUIRoot;
         "
@@ -165,8 +171,10 @@ describe('generateReactNativeEntrypoint', () => {
       expect(output).toMatchInlineSnapshot(`
         "import { AppRegistry } from 'react-native';
         import AsyncStorage from '@react-native-async-storage/async-storage';
+        import { LiteUI } from '@storybook/react-native-ui-lite';
 
         import { view } from './storybook.requires';
+        import { name as appName } from '../app.json';
 
         /**
          * This file is user-editable.
@@ -180,9 +188,10 @@ describe('generateReactNativeEntrypoint', () => {
             getItem: AsyncStorage.getItem,
             setItem: AsyncStorage.setItem,
           },
+          CustomUIComponent: LiteUI,
         });
 
-        AppRegistry.registerComponent('main', () => StorybookUIRoot);
+        AppRegistry.registerComponent(appName, () => StorybookUIRoot);
 
         export default StorybookUIRoot;
         "
@@ -216,8 +225,10 @@ describe('generateReactNativeEntrypoint', () => {
       expect(generated).toMatchInlineSnapshot(`
         "import { AppRegistry } from 'react-native';
         import AsyncStorage from '@react-native-async-storage/async-storage';
+        import { LiteUI } from '@storybook/react-native-ui-lite';
 
         import { view } from './storybook.requires';
+        import { name as appName } from '../app.json';
 
         /**
          * This file is user-editable.
@@ -231,9 +242,10 @@ describe('generateReactNativeEntrypoint', () => {
             getItem: AsyncStorage.getItem,
             setItem: AsyncStorage.setItem,
           },
+          CustomUIComponent: LiteUI,
         });
 
-        AppRegistry.registerComponent('main', () => StorybookUIRoot);
+        AppRegistry.registerComponent(appName, () => StorybookUIRoot);
 
         export default StorybookUIRoot;
         "

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

@@ -73,6 +73,7 @@ export default defineGeneratorModule({
       '@storybook/addon-ondevice-controls',
       '@storybook/addon-ondevice-actions',
       '@storybook/react-native',
+      '@storybook/react-native-ui-lite',
       'storybook',
     ];
 

code/lib/create-storybook/templates/react-native/index.js

@@ -1,7 +1,9 @@
 import { AppRegistry } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { LiteUI } from '@storybook/react-native-ui-lite';
 
 import { view } from './storybook.requires';
+import { name as appName } from '../app.json';
 
 /**
  * This file is user-editable.
@@ -15,8 +17,9 @@ const StorybookUIRoot = view.getStorybookUI({
     getItem: AsyncStorage.getItem,
     setItem: AsyncStorage.setItem,
   },
+  CustomUIComponent: LiteUI,
 });
 
-AppRegistry.registerComponent('main', () => StorybookUIRoot);
+AppRegistry.registerComponent(appName, () => StorybookUIRoot);
 
 export default StorybookUIRoot;