Storybook setup for desiloed development with react-native(iOS, Android, Web)

In the previous post , we saw how we could setup a react native project for web development. In this post we will see how to setup the project for storybook development. If you follow the react channels, you might have already heard of storybook. Storybook is a really nice way of developing UI components for your app. It provides a development environment that is tailored for effective, faster iterative development and to easily showcase UI components. It also provides a feature called addons which can be used to enhance the storybook features. Check out the addon gallery at https://storybook.js.org/addons/addon-gallery/

Storybook is available for react, react-native, vue, angular. The cli experience is one of the smoothest to get started with.

cd my-project-directory
npm i -g @storybook/cli
getstorybook

In short, you navigate to the project directory and run getstorybook . It automatically detects the project type and adds storybook configuration to your project. It also provides a way to customise the setup which we will be needing for this demo.

The storybook cli and some scripts differs based on the project type i.e react or react-native etc. In our case since we will be using react-native project for web as well we need to customise a bit. Let’s see how we can do that.

1. Install storybook-cli.

npm i -g @storybook/cli

2. Create a new react native project

react-native init StorybookSetup

3. Run getstorybook inside project directory. This will add storybook configuration for the react-native project

cd StorybookSetup
$ getstorybook
getstorybook - the simplest way to add a storybook to your project.
 • Detecting project type. ✓
 • Adding storybook support to your "React Native" app. ✓
 • Preparing to install dependencies. ✓

After this you should be able to see a storybook inside of your project

There should be a new command in scripts section of package.json

"storybook": "storybook start -p 7007"

The commands internally starts

a. Storybook server which can be used as remote control to navigate storybook on the device

b. It also starts the react native packager with index.js in the storybook directory as the entry point

Run the command

yarn run storybook

And depending on whether you want to run the app on iOS or android run the appropriate command to launch the app

react-native run-ios // or react-native run-android

After this you should have the default storybook app running on the device with remote control running at http://localhost:7007

4. Let’s add storybook react web config to this project. Add the following modules to your project

yarn add @storybook/react babel-plugin-module-resolver babel-preset-react-app --dev
yarn add react-native-web react-art

5. Copy the public directory from a project created by create-react-app into the root directory of your react-native project or download from here

6. Create a new directory .storybook with following files. .storybook is the default storybook config directory for react web project. Add the following files to that directory

a. config.js

import { configure } from '@storybook/react';
function loadStories() {
  require('../storybook/stories');
}
configure(loadStories, module);

b. addons.js

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

c. webpack.config.js

6. storiesOf is a module that differs for react-native

import { storiesOf } from '@storybook/react-native';

and react project.

import { storiesOf } from '@storybook/react';

We need to make this load differently based on the platform i.e android, ios or web. There is a feature of react-native where we can load different files based on the platform. One of the ways to do that is to use platform suffix for the file <module>.ios.js or <module>.android.js . We create a directory called helpers/storiesOf and create the following files

a. index.ios.js

import { storiesOf } from '@storybook/react-native';
export {
  storiesOf
}

b. index.android.js

import { storiesOf } from '@storybook/react-native';
export {
  storiesOf
}

c. index.js

import { storiesOf } from '@storybook/react';
export {
  storiesOf
}

Replace all references of

import { storiesOf } from '@storybook/react-native';

in storybook/stories/index.js

import { storiesOf } from '../helpers/storiesOf';

7. We also need to make similar changes for storybook/stories/Button module. By default when getstorybook was run in the project directory, it created Button/index.ios.js and Button/index.android.js . We will add a index.js file to this directory. This will be loaded for react-web storybook

import React from 'react';
import PropTypes from 'prop-types';
import { TouchableHighlight } from 'react-native';
export default function Button(props) {
  return <TouchableHighlight onPress={props.onPress}>{props.children}</TouchableHighlight>;
}
Button.defaultProps = {
  children: null,
  onPress: () => {},
};
Button.propTypes = {
  children: PropTypes.node,
  onPress: PropTypes.func,
};

8. Finally, we add the following script commands to package.json

"storybook-web": "start-storybook -p 9009 -s public",
"build-storybook-web": "build-storybook -s public"

When we run yarn run storybook-web you should be able to see the react-web storybook running at http://localhost:9009

You can also export a static website using the yarn run build-story-web command.

You can checkout a working project at https://github.com/agenthunt/rn-dev-ios-android-web/tree/master/StorybookSetup