@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: storybooks.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

Start the Storybook

After initial setup start the storybook server with the storybook npm script.

npm run storybook

also start your mobile app with the react-native command.

react-native run-ios
react-native run-android

Now, you can open http://localhost:7007 to view your storybook.

Learn More

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