@storybook/react-native

What is @storybook/react-native?

@storybook/react-native is a tool for developing and testing React Native components in isolation. It allows developers to create and showcase UI components in a structured and interactive manner, making it easier to build and maintain a consistent design system.

What are @storybook/react-native's main functionalities?

Component Story Creation

Allows developers to create stories for different states of a component, making it easier to visualize and test various scenarios.

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

storiesOf('Button', module)
  .add('default', () => (
    <Button title="Default Button" onPress={() => {}} />
  ))
  .add('disabled', () => (
    <Button title="Disabled Button" onPress={() => {}} disabled />
  ));

Addons Integration

Supports various addons like knobs, actions, and links to enhance the functionality of stories, providing more interactive and dynamic component testing.

import { addDecorator } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';

addDecorator(withKnobs);

Live Component Preview

Enables live preview of components on a device or emulator, allowing developers to see changes in real-time as they modify their components.

import { getStorybookUI } from '@storybook/react-native';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';

const StorybookUIRoot = getStorybookUI({
  asyncStorage: null,
});

AppRegistry.registerComponent(appName, () => StorybookUIRoot);

Other packages similar to @storybook/react-native

react-native-storybook-loader

A utility to automatically load stories for React Native Storybook. It simplifies the process of importing and organizing stories, but it does not provide the full suite of features that @storybook/react-native offers, such as addons and live previews.

react-native-snap-carousel

While not a direct competitor, this package allows for the creation of carousels in React Native. It can be used in conjunction with @storybook/react-native to showcase carousel components, but it does not offer the same level of component isolation and testing capabilities.

react-native-testing-library

A library for testing React Native components. It focuses on providing utilities to test components in a way that resembles how they are used by end-users. While it complements @storybook/react-native by providing testing capabilities, it does not offer the interactive component development environment that Storybook provides.

README

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). (Note that due to an implementation detail, your stories will only show up in the left-pane 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.

Using Haul-cli

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:

storybook start -p 7007 --haul webpack.haul.storybook.js

Where webpack.haul.storybook.js should look something like this:

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.