react-native

Storybook for React Native

With Storybook for React Native you can design and develop individual React Native components without running your app.

For more information visit: 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:

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 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:

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:

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.

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).

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.

Learn More

Check the docs directory in this repo for more advanced setup guides and other info.