react-native-storybook

Storybook for React Native

A new docs site is being built for Storybook for React Native, you can find it at https://storybookjs.github.io/react-native/docs/intro/.

[!IMPORTANT] This readme is for v10, for v9 docs see the v9.1 docs.

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

If you are migrating from 9 to 10 you can find the migration guide here

For more information about storybook visit: storybook.js.org

[!NOTE] Make sure you align your storybook dependencies to the same major version or you will see broken behaviour.

Table of contents

• 🚀 Getting Started
• 📒 Writing stories
• 🔌 Addons
• 📱 Hide/Show Storybook
• ⚙️ withStorybook wrapper
• 🔧 getStorybookUI
• 🏁 Feature Flags
• 🧪 Using stories in unit tests
• 🤝 Contributing
• ✨ Examples- Storybook for React Native
• 🤖 Agent skills

Getting Started

New project

There is some project boilerplate with @storybook/react-native and @storybook/addon-react-native-web both already configured with a simple example.

For Expo you can use this template with the following command

# With NPM
npx create-expo-app --template expo-template-storybook AwesomeStorybook

For React Native CLI you can use this template

npx @react-native-community/cli init MyApp --template react-native-template-storybook

Existing project

Run init to setup your project with all the dependencies and configuration files:

npm create storybook@latest

The only thing left to do is return Storybook's UI in your app entry point (such as App.tsx) like this:

export { default } from './.rnstorybook';

Then wrap your metro config with the withStorybook function as seen below

If you want to be able to swap easily between storybook and your app, have a look at this blog post

If you want to add everything yourself check out the manual guide here.

Additional steps: Update your metro config

We require the unstable_allowRequireContext transformer option to enable dynamic story imports based on the stories glob in main.ts. We can also call the storybook generate function from the metro config to automatically generate the storybook.requires.ts file when metro runs.

Expo

First create metro config file if you don't have it yet.

npx expo customize metro.config.js

Then wrap your config in the withStorybook function as seen below.

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

const config = getDefaultConfig(__dirname);

// For basic usage with all defaults, this is all you need
module.exports = withStorybook(config);

// Or customize the options
module.exports = withStorybook(config, {
  // When false, removes Storybook from bundle (useful for production)
  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',

  // Path to your storybook config (default: './.rnstorybook')
  configPath: './.rnstorybook',

  // Optional websockets configuration for syncing between devices
  // websockets: {
  //   port: 7007,
  //   host: 'localhost',
  // },
});

React Native

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

const defaultConfig = getDefaultConfig(__dirname);

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {};
// set your own config here 👆

const finalConfig = mergeConfig(defaultConfig, config);

// For basic usage with all defaults
module.exports = withStorybook(finalConfig);

// Or customize the options
module.exports = withStorybook(finalConfig, {
  // When false, removes Storybook from bundle (useful for production)
  enabled: process.env.STORYBOOK_ENABLED === 'true',