add haul support

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.

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',