init @storybook/react-native

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "stage-0", "react"]
+}

.npmignore

@@ -0,0 +1,3 @@
+docs
+src
+.babelrc

addons.js

@@ -0,0 +1,4 @@
+// We are not using this file inside this project.
+// But, this will be useful when a user is configuring it's own addons.
+// Then he can import this file to add default set of addons.
+require('./dist/server/addons');

docs/manual-setup.md

@@ -0,0 +1,69 @@
+# Manual Setup
+
+First, install the `@storybook/react-native` module
+
+```sh
+npm install @storybook/react-native --save-dev
+```
+
+Create a new directory called `storybook` in your project root and create an entry file (index.ios.js or index.android.js) as given below. (Don't forget to replace "MyApplicationName" with your app name).
+
+```js
+import { AppRegistry } from 'react-native';
+import { getStorybookUI, configure } from '@storybook/react-native';
+import './addons';
+
+// import your stories
+configure(function() {
+  require('./stories');
+}, module);
+
+const StorybookUI = getStorybookUI({
+  port: 7007,
+  host: 'localhost',
+});
+AppRegistry.registerComponent('MyApplicationName', () => StorybookUI);
+```
+
+Create a file named `addons.js` file in `storybook` directory to use default set of addons.
+
+```js
+import '@storybook/addon-actions';
+import '@storybook/addon-links';
+```
+
+Then write your first story in the `stories` directory like this:
+
+```js
+import { storiesOf } from '@storybook/react-native';
+import { View, Text } from 'react-native';
+
+const style = {
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#F5FCFF'
+};
+const CenteredView = ({ children }) => (
+  <View style={style}>
+    {children}
+  </View>
+);
+
+storiesOf('CenteredView')
+  .add('default view', () => (
+    <CenteredView>
+      <Text>Hello Storybook</Text>
+    </CenteredView>
+  ));
+```
+
+Then add following NPM script into your `package.json` file:
+
+```json
+{
+  "scripts": {
+    "storybook": "storybook start -p 7007"
+  }
+}
+```

docs/using-devices.md

@@ -0,0 +1,27 @@
+# Connecting Devices
+
+In order to work with React Native Storybook, one or more devices should be connected. Stories will only show when devices are available.
+
+## iOS simulator
+
+-   Start with `react-native run-ios`
+
+## Android emulator
+
+-   Get your AVD name with `emulator -list-avds`
+-   Start the emulator `emulator -avd MY_AVD_NAME`
+-   Forward port 8081 `adb reverse tcp:8081 tcp:8081`
+-   Forward port 9001 `adb reverse tcp:9001 tcp:9001`
+-   Start with `react-native run-android`
+
+### Issues
+**Problem**: If you run into a `No such file or directory` error
+
+**Solution**: You must run the emulator from its directory: `cd $(dirname $(which emulator)) && ./emulator -avd MY_AVD_NAME`
+
+## Android device
+
+-   Connect your device with adb
+-   Forward port 8081 `adb reverse tcp:8081 tcp:8081`
+-   Forward port 9001 `adb reverse tcp:9001 tcp:9001`
+-   Start with `react-native run-android`

package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@storybook/react-native",
+  "version": "3.2.18",
+  "description": "A better way to develop React Native Components for your app",
+  "keywords": [
+    "react",
+    "react-native",
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/react-native",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "bin": {
+    "storybook": "dist/bin/storybook.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addon-actions": "^3.2.18",
+    "@storybook/addon-links": "^3.2.18",
+    "@storybook/addons": "^3.2.18",
+    "@storybook/channel-websocket": "^3.2.18",
+    "@storybook/ui": "^3.2.18",
+    "autoprefixer": "^7.2.3",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-syntax-async-functions": "^6.13.0",
+    "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-react-constant-elements": "^6.23.0",
+    "babel-plugin-transform-regenerator": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-minify": "^0.2.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "case-sensitive-paths-webpack-plugin": "^2.1.1",
+    "commander": "^2.12.2",
+    "css-loader": "^0.28.7",
+    "events": "^1.1.1",
+    "express": "^4.16.2",
+    "file-loader": "^1.1.6",
+    "find-cache-dir": "^1.0.0",
+    "global": "^4.3.2",
+    "json-loader": "^0.5.7",
+    "json5": "^0.5.1",
+    "postcss-loader": "^2.0.9",
+    "prop-types": "^15.6.0",
+    "react-native-compat": "^1.0.0",
+    "react-native-iphone-x-helper": "^1.0.1",
+    "shelljs": "^0.7.8",
+    "style-loader": "^0.19.1",
+    "url-loader": "^0.6.2",
+    "url-parse": "^1.1.9",
+    "util-deprecate": "^1.0.2",
+    "uuid": "^3.1.0",
+    "webpack": "^3.10.0",
+    "webpack-dev-middleware": "^1.12.2",
+    "webpack-hot-middleware": "^2.21.0",
+    "ws": "^3.3.3"
+  },
+  "devDependencies": {
+    "react-native": "^0.51.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": ">=0.27.0"
+  }
+}

readme.md

@@ -0,0 +1,101 @@
+# Storybook for React Native
+
+[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
+[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
+[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
+[![Storybook Slack](https://now-examples-slackin-nqnzoygycp.now.sh/badge.svg)](https://now-examples-slackin-nqnzoygycp.now.sh/)
+[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
+
+* * *
+
+With Storybook for React Native you can design and develop individual React Native components without running your app.
+
+![Storybook Screenshot](docs/assets/readme/screenshot.png)
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+## Getting Started
+
+The `getstorybook` tool can be used to add Storybook to your React Native app. Install the `getstorybook` tool if necessary and run it from your project directory with these commands:
+
+```shell
+npm -g i @storybook/cli
+getstorybook
+```
+
+After you have installed, there are additional steps for `create-react-native-app` apps. See the section for details, otherwise skip to [Start Storybook](#start-storybook)
+to see the next step.
+
+## Create React Native App (CRNA)
+
+If you run `getstorybook` inside a CRNA app, you'll be notified that there is an extra step required to use Storybook.
+
+The easiest way to use Storybook inside CRNA is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
+
+```js
+export default from './storybook';
+```
+
+This will get you up and running quickly, but then you lose your app!
+There are multiple options here. for example, you can export conditionally:
+
+```js
+import StorybookUI from './storybook';
+
+import App from './app';
+
+module.exports = __DEV__ ? StorybookUI : App;
+```
+
+Alternatively, `StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
+
+## Start Storybook
+
+After initial setup start the storybook server with the storybook npm script.
+
+```shell
+npm run storybook
+```
+
+Now, you can open <http://localhost:7007> to view your storybook menus in the browser.
+
+## Start App
+
+To see your Storybook stories on the device, you should start your mobile app for the `<platform>` of your choice (typically `ios` or `android`). (Note that due to an implementation detail, your stories will only show up in the left pane of your browser window after your device has connected to this storybook server.)
+
+For CRNA apps:
+
+    npm run <platform>
+
+For RN apps:
+
+    react-native run-<platform>
+
+Once your app is started, changing the selected story in web browser will update the story displayed within your mobile app.
+
+If you are using Android and you get the following error after running the app: `'websocket: connection error', 'Failed to connect to localhost/127.0.0.1:7007'`, you have to forward the port 7007 on your device/emulator to port 7007 on your local machine with the following command:
+`adb reverse tcp:7007 tcp:7007`
+
+## 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 the storybook npm script to:
+
+```sh
+storybook start -p 7007 --haul webpack.haul.storybook.js --platform android | ios | all
+```
+
+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.

src/bin/storybook-build.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import program from 'commander';
+
+program.option('-o, --outdir <outdir>', 'location to store built storybook').parse(process.argv);

src/bin/storybook-start.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+import path from 'path';
+import program from 'commander';
+import shelljs from 'shelljs';
+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('--platform <ios|android|all>', 'build platform-specific build')
+  .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')
+  .option('-r, --reset-cache', 'reset react native packager')
+  .option('--skip-packager', 'run only storybook server')
+  .option('-i, --manual-id', 'allow multiple users to work with same storybook')
+  .option('--smoke-test', 'Exit after successful start')
+  .option('--packager-port <packagerPort>', 'Custom packager port')
+  .option('--root [root]', 'Add additional root(s) to be used by the packager in this project')
+  .option('--projectRoots [projectRoots]', 'Override the root(s) to be used by the packager')
+  .parse(process.argv);
+
+const projectDir = path.resolve();
+const configDir = path.resolve(program.configDir || './storybook');
+const listenAddr = [program.port];
+if (program.host) {
+  listenAddr.push(program.host);
+}
+
+const server = new Server({
+  projectDir,
+  configDir,
+  environment: program.environment,
+  manualId: program.manualId,
+  secured: program.secured,
+});
+
+server.listen(...listenAddr, err => {
+  if (err) {
+    throw err;
+  }
+  const address = `http://${program.host || 'localhost'}:${program.port}/`;
+  console.info(`\nReact Native Storybook started on => ${address}\n`);
+  if (program.smokeTest) {
+    process.exit(0);
+  }
+});
+
+if (!program.skipPackager) {
+  let symlinks = [];
+
+  let roots = [projectDir];
+
+  if (program.root) {
+    roots = roots.concat(program.root.split(',').map(root => path.resolve(root)));
+  }
+
+  try {
+    const findSymlinksPaths = require('react-native/local-cli/util/findSymlinksPaths'); // eslint-disable-line global-require
+    symlinks = findSymlinksPaths(path.join(projectDir, 'node_modules'), [projectDir]);
+  } catch (e) {
+    console.warn(`Unable to load findSymlinksPaths: ${e.message}`);
+  }
+
+  let projectRoots = (configDir === projectDir ? [configDir] : [configDir, projectDir]).concat(
+    symlinks
+  );
+
+  if (program.projectRoots) {
+    projectRoots = projectRoots.concat(
+      program.projectRoots.split(',').map(root => path.resolve(root))
+    );
+  }
+
+  let cliCommand = 'node node_modules/react-native/local-cli/cli.js start';
+  if (program.haul) {
+    const platform = program.platform || 'all';
+    cliCommand = `node node_modules/.bin/haul start --config ${
+      program.haul
+    } --platform ${platform}`;
+  }
+  // RN packager
+  shelljs.exec(
+    [
+      cliCommand,
+      `--projectRoots ${projectRoots.join(',')}`,
+      `--root ${roots.join(',')}`,
+      program.resetCache && '--reset-cache',
+      program.packagerPort && `--port=${program.packagerPort}`,
+    ]
+      .filter(x => x)
+      .join(' '),
+    { async: true }
+  );
+}