From d97699fcdc96b834eddc59cbd5f7acfd524c5009 Mon Sep 17 00:00:00 2001
From: Eric Wooley <ericwooley@gmail.com>
Date: Thu, 15 Jun 2017 17:17:54 -0700
Subject: [PATCH 1/3] add haul support

---
 app/react-native/readme.md                  | 15 +++++++++++++++
 app/react-native/src/bin/storybook-start.js |  7 ++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/react-native/readme.md b/app/react-native/readme.md
index b6b7adf4880..e65528a84ea 100644
--- a/app/react-native/readme.md
+++ b/app/react-native/readme.md
@@ -72,6 +72,21 @@ For RN apps:
 
 Once your app is started, changing the selected story in web browser will update the story displayed within your mobile app.
 
+## Using Haul-cli
+
+[Haul](https://github.com/callstack-io/haul) is an alternative to the react-native packager and has several advantages in that it allows you to define your own loaders, and handles symlinks better.
+
+If you want to use haul instead of the react-native packager, modify they storybook npm script too:
+
+`storybook start -p 7007 --haul webpack.haul.storybook.js` where webpack.haul.storybook.js should look something like this.
+
+```js
+module.exports = ({ platform }) => ({
+  entry: `./storybook/index.${platform}.js`,
+  // any other haul config here.
+});
+```
+
 ## Learn More
 
 Check the `docs` directory in this repo for more advanced setup guides and other info.
diff --git a/app/react-native/src/bin/storybook-start.js b/app/react-native/src/bin/storybook-start.js
index 55bcacfb381..0dc65a0279e 100644
--- a/app/react-native/src/bin/storybook-start.js
+++ b/app/react-native/src/bin/storybook-start.js
@@ -8,6 +8,7 @@ import Server from '../server';
 program
   .option('-h, --host <host>', 'host to listen on')
   .option('-p, --port <port>', 'port to listen on')
+  .option('--haul <configFile>', 'use haul with config file')
   .option('-s, --secured', 'whether server is running on https')
   .option('-c, --config-dir [dir-name]', 'storybook config directory')
   .option('-e, --environment [environment]', 'DEVELOPMENT/PRODUCTION environment for webpack')
@@ -42,10 +43,14 @@ server.listen(...listenAddr, err => {
 if (!program.skipPackager) {
   const projectRoots = configDir === projectDir ? [configDir] : [configDir, projectDir];
 
+  let cliCommand = 'node node_modules/react-native/local-cli/cli.js start';
+  if (program.haul) {
+    cliCommand = `node node_modules/.bin/haul start --config ${program.haul} --platform all`;
+  }
   // RN packager
   shelljs.exec(
     [
-      'node node_modules/react-native/local-cli/cli.js start',
+      cliCommand,
       `--projectRoots ${projectRoots.join(',')}`,
       `--root ${projectDir}`,
       program.resetCache && '--reset-cache',

From e2b06372a76781d03bc2fdce540656a4d085eb1a Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Fri, 16 Jun 2017 22:11:46 +1000
Subject: [PATCH 2/3] fix typos

---
 app/react-native/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/react-native/readme.md b/app/react-native/readme.md
index e65528a84ea..ded9b1e075c 100644
--- a/app/react-native/readme.md
+++ b/app/react-native/readme.md
@@ -76,7 +76,7 @@ Once your app is started, changing the selected story in web browser will update
 
 [Haul](https://github.com/callstack-io/haul) is an alternative to the react-native packager and has several advantages in that it allows you to define your own loaders, and handles symlinks better.
 
-If you want to use haul instead of the react-native packager, modify they storybook npm script too:
+If you want to use haul instead of the react-native packager, modify the storybook npm script to:
 
 `storybook start -p 7007 --haul webpack.haul.storybook.js` where webpack.haul.storybook.js should look something like this.
 

From f7e2e6257cd8de547fb5e5527c56e772a9b1b24c Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Fri, 16 Jun 2017 22:13:37 +1000
Subject: [PATCH 3/3] Minor formatting

---
 app/react-native/readme.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/react-native/readme.md b/app/react-native/readme.md
index ded9b1e075c..d754ffbf3b4 100644
--- a/app/react-native/readme.md
+++ b/app/react-native/readme.md
@@ -78,7 +78,11 @@ Once your app is started, changing the selected story in web browser will update
 
 If you want to use haul instead of the react-native packager, modify the storybook npm script to:
 
-`storybook start -p 7007 --haul webpack.haul.storybook.js` where webpack.haul.storybook.js should look something like this.
+```sh
+storybook start -p 7007 --haul webpack.haul.storybook.js
+```
+
+Where webpack.haul.storybook.js should look something like this:
 
 ```js
 module.exports = ({ platform }) => ({