Skip to main content
This guide covers setting up Storybook in Expo projects that do not use Expo Router.
If you’re using Expo Router for file-based navigation, follow the Expo Router Setup guide instead.

​
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. If they’re not already installed:
npx expo install --fix react-native-reanimated react-native-worklets
Expo handles the babel plugin configuration automatically.
3

Configure Metro

Generate a metro config file if you don’t have one:
npx expo@latest customize metro.config.js
Wrap your config with withStorybook, using EXPO_PUBLIC_STORYBOOK_ENABLED to control inclusion:
metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

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

module.exports = withStorybook(config, {
  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
});
Chain with other wrappers if needed: withStorybook(withNativeWind(config), { ... })
4

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.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true';

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

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

Add NPM Scripts

Add convenience scripts to your package.json:
package.json
{
  "scripts": {
    "storybook": "EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start",
    "storybook:ios": "EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start --ios",
    "storybook:android": "EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start --android"
  }
}
6

Run Storybook

Start your app with Storybook enabled:
npm run storybook

​
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