Skip to main content
This guide covers setting up Storybook in plain React Native projects using @react-native-community/cli.

​
Installation

1

Run CLI Init

Use the Storybook CLI to initialize Storybook in your project:
npm create storybook -- --type react_native --yes
2

Install Dependencies

Storybook’s default UI depends on react-native-reanimated and react-native-worklets:
npm install react-native-reanimated react-native-worklets
3

Install Babel Plugin

Install the babel plugin to enable environment variable inlining:
npm install --save-dev babel-plugin-transform-inline-environment-variables
Add both plugins to your babel config:
babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'transform-inline-environment-variables',
    'react-native-worklets/plugin', // must be last
  ],
};
The react-native-worklets/plugin must be the last plugin in the array.
4

Configure Metro

Update your metro config to use the withStorybook wrapper:
metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

const defaultConfig = getDefaultConfig(__dirname);

/** @type {import('metro-config').MetroConfig} */
const config = {};

module.exports = withStorybook(mergeConfig(defaultConfig, config), {
  enabled: process.env.STORYBOOK_ENABLED === 'true',
});
5

Create Entrypoint

Conditionally render Storybook based on the environment variable. Since withStorybook replaces Storybook imports with empty modules when disabled, you can safely import Storybook at the top level:
App.tsx
import StorybookUI from './.rnstorybook';

const isStorybook = process.env.STORYBOOK_ENABLED === 'true';

export default function App() {
  if (isStorybook) {
    return <StorybookUI />;
  }

  // Your existing app code here
  return (
    // ...
  );
}
6

Install iOS Pods

For iOS, install the CocoaPods dependencies:
cd ios && pod install && cd ..
7

Add NPM Scripts

Add convenience scripts to your package.json:
package.json
{
  "scripts": {
    "storybook": "STORYBOOK_ENABLED='true' react-native start",
    "storybook:ios": "STORYBOOK_ENABLED='true' react-native run-ios",
    "storybook:android": "STORYBOOK_ENABLED='true' react-native run-android"
  }
}
8

Run Storybook

Start your app with Storybook enabled:
npm run storybook

​
Project Template

For new React Native CLI projects, you can use the official Storybook template: 
npx @react-native-community/cli init MyApp --template react-native-template-storybook
This template comes pre-configured with Storybook and React Native Web support.

​
Next Steps

Writing Stories

Learn how to write your first story

Metro Configuration

Explore advanced Metro config options

Build docs developers (and LLMs) love

Get started for freeTalk to us