From 43a09478d8b4a0039de1d57dd0ef6fa27d95ddd6 Mon Sep 17 00:00:00 2001
From: Daniel Duan <dduan@squarespace.com>
Date: Tue, 31 Oct 2017 13:00:35 -0400
Subject: [PATCH 1/3] #2081 fix hmr in react-native template

---
 .../template/storybook/storybook.js             | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/storybook.js b/lib/cli/generators/REACT_NATIVE/template/storybook/storybook.js
index 558e7b3af49..18e1362ea75 100644
--- 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,15 @@ 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
+// eslint-disable-next-line react/prefer-stateless-function
+class StorybookUIHMRRoot extends Component {
+  render() {
+    return <StorybookUIRoot />;
+  }
+}
+
+AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIHMRRoot);
+export default StorybookUIHMRRoot;

From 3f6f07fa2875378239d7a4a1a013ab1c015e5cce Mon Sep 17 00:00:00 2001
From: Daniel Duan <dduan@squarespace.com>
Date: Tue, 31 Oct 2017 13:04:59 -0400
Subject: [PATCH 2/3] convert vanilla app to hmr

---
 .../react-native-vanilla/storybook/storybook.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/examples/react-native-vanilla/storybook/storybook.js b/examples/react-native-vanilla/storybook/storybook.js
index 22cec04d709..81f766f5169 100644
--- 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;

From d917f2511e772b1c73eabca818e1947d30227978 Mon Sep 17 00:00:00 2001
From: Daniel Duan <1474548+danielduan@users.noreply.github.com>
Date: Tue, 31 Oct 2017 13:06:55 -0400
Subject: [PATCH 3/3] Update storybook.js

---
 lib/cli/generators/REACT_NATIVE/template/storybook/storybook.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/storybook.js b/lib/cli/generators/REACT_NATIVE/template/storybook/storybook.js
index 18e1362ea75..138e8817fa9 100644
--- a/lib/cli/generators/REACT_NATIVE/template/storybook/storybook.js
+++ b/lib/cli/generators/REACT_NATIVE/template/storybook/storybook.js
@@ -13,6 +13,7 @@ configure(() => {
 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() {