Skip to main content

Getting started

There are a few different ways to get started, the main recommendation is to use the CLI init. This guide is intended for Storybook version 10+. For v9 docs see the v9.1 docs.

React Native Storybook works with both plain React Native and Expo but examples are using Expo for brevity since Expo is officially recommended by Meta. For plain React Native projects there should be minimal differences.

Expo Router Users

For most projects, the simplest approach is entry-point swapping: the bundler swaps your app’s entire entry point for Storybook when STORYBOOK_ENABLED=true is set. No route setup needed, and no Storybook code ships to production.

However, if you’re using Expo Router and want to render Storybook within your app’s navigation (instead of as a separate entry point), follow our dedicated Expo Router Setup guide. This approach is fully supported, but not recommended, because it embeds Storybook into your app’s bundle and navigation.

AI-Assisted Setup

If you're using an AI coding agent (Claude Code, Cursor, Windsurf, etc.), you can install our agent skills to get guided setup assistance:

npx skills add storybookjs/react-native

The setup-react-native-storybook skill walks your agent through the full setup for Expo, Expo Router, React Native CLI, and Re.Pack projects. The upgrading-react-native-storybook skill handles supported version-to-version migrations one hop at a time instead of attempting a full jump in one pass.

For most existing projects we recommend adding Storybook via the CLI.

Init command​

Use the storybook cli to add Storybook to your project

npm create storybook@latest

Run Storybook​

The CLI sets everything up for you — it wraps your bundler config with withStorybook, generates the Storybook entry point, and adds convenience scripts to your package.json. No changes to App.tsx are needed.

When you set STORYBOOK_ENABLED=true, the wrapper automatically swaps your app's entry point with Storybook's entry point. When the variable is not set, your app runs normally with zero Storybook code in the bundle.

The CLI adds these scripts to your package.json:

{
  "scripts": {
    "storybook": "STORYBOOK_ENABLED=true expo start",
    "storybook:ios": "STORYBOOK_ENABLED=true expo start --ios",
    "storybook:android": "STORYBOOK_ENABLED=true expo start --android"
  }
}

Then run:

npm run storybook
Windows

Use cross-env to set environment variables on Windows:

"storybook": "cross-env STORYBOOK_ENABLED=true expo start"
Bundler configuration

The CLI automatically wraps your metro.config.js with withStorybook. If you need to customize this — for example to chain it with other wrappers like withNativeWind — see Metro Configuration or Manual Setup.

Alternative: In-app integration (without entry-point swapping)

If you prefer to control how Storybook renders in your app (for example, to render it alongside your app or behind a toggle), you can import the Storybook UI directly in your App.tsx. This approach is fully supported:

// App.tsx
import StorybookUI from './.rnstorybook';
export default StorybookUI;

Or conditionally:

import StorybookUI from './.rnstorybook';
import { MyApp } from './MyApp';

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

export default function App() {
  return isStorybook ? <StorybookUI /> : <MyApp />;
}

With this approach, use the Metro-specific withStorybook wrapper instead of the bundler-agnostic one, so you can control the enabled option directly:

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

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

See Metro Configuration for the full options reference.

Project Template​

If you are starting a fresh project and you want to get setup with Storybook from the beginning then these templates can be used to get up and running quickly. These templates come with React Native and React Native Web (vite) Storybook configured already.

For Expo you can use this template with the following command:

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

Starter projects​

Theres also these starter projects you can copy or reference whilst building out your own Storybook

https://github.com/dannyhw/expo-storybook-starter

https://github.com/dannyhw/react-native-storybook-starter

Alternative Setup Methods​

Depending on your project setup and requirements, you may need different installation approaches:

  • Expo Router Setup - For projects using Expo Router file-based navigation
  • Re.Pack Setup - For projects using Re.Pack (Rspack/Webpack) instead of Metro
  • Manual Setup - For full control over the setup process or when the CLI doesn't work for your specific configuration

Migrating from an older setup?​

If you set up Storybook before entry-point swapping was available and want to switch from the deep app integration approach, see the Migration Guide.