Merge pull request #2194 from storybooks/dd/rn-hmr

#2081 fix hmr in react-native template
storybookjs · Nov 1, 2017 · 10dcb53 · 10dcb53
2 parents 64c29d7 + ea5276f
commit 10dcb53
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/examples/react-native-vanilla/storybook/storybook.js b/examples/react-native-vanilla/storybook/storybook.js
@@ -1,4 +1,5 @@
 import { AppRegistry } from 'react-native';
+import React, { Component } from 'react';
 import { getStorybookUI, configure } from '@storybook/react-native';
 import { setOptions } from '@storybook/addon-options';
 
@@ -8,10 +9,7 @@ configure(() => {
   require('./stories');
 }, module);
 
-const StorybookUI = getStorybookUI({
-  port: 7007,
-  onDeviceUI: true,
-});
+const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });
 
 setTimeout(
   () =>
@@ -21,6 +19,13 @@ setTimeout(
   100
 );
 
-AppRegistry.registerComponent('ReactNativeVanilla', () => StorybookUI);
+// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
+// eslint-disable-next-line react/prefer-stateless-function
+class StorybookUIHMRRoot extends Component {
+  render() {
+    return <StorybookUIRoot />;
+  }
+}
 
-export { StorybookUI as default };
+AppRegistry.registerComponent('ReactNativeVanilla', () => StorybookUIHMRRoot);
+export default StorybookUIHMRRoot;
diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/storybook.js b/lib/cli/generators/REACT_NATIVE/template/storybook/storybook.js
@@ -1,5 +1,5 @@
 /* eslint-disable global-require */
-
+import React, { Component } from 'react';
 import { AppRegistry } from 'react-native';
 import { getStorybookUI, configure } from '@storybook/react-native';
 
@@ -10,6 +10,16 @@ configure(() => {
 
 // This assumes that storybook is running on the same host as your RN packager,
 // to set manually use, e.g. host: 'localhost' option
-const StorybookUI = getStorybookUI({ port: 7007, onDeviceUI: true });
-AppRegistry.registerComponent('%APP_NAME%', () => StorybookUI);
-export default StorybookUI;
+const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });
+
+// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
+// https://github.com/storybooks/storybook/issues/2081
+// eslint-disable-next-line react/prefer-stateless-function
+class StorybookUIHMRRoot extends Component {
+  render() {
+    return <StorybookUIRoot />;
+  }
+}
+
+AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIHMRRoot);
+export default StorybookUIHMRRoot;