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.
- 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$ getstorybookgetstorybook - 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