Skip to main content
Storybook for React Native

​
What is Storybook for React Native?

Storybook for React Native allows you to build, test, and showcase individual React Native components outside of your main application. Develop UI components in isolation, iterate faster, and create a living component library for your team.

Quick setup

Get a working Storybook instance in under 5 minutes

Write stories

Learn Component Story Format (CSF) syntax

Explore addons

Enhance your workflow with controls, actions, and more

Testing

Reuse stories in unit tests with portable stories

​
Key features

​
On-device UI

Storybook runs directly on your iOS or Android device with a native UI built with React Native. Browse components, adjust props, and test different states without touching code. 
import type { Meta, StoryObj } from '@storybook/react-native';
import { Button } from './Button';

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    title: 'Sign In',
  },
};

export const Secondary: Story = {
  args: {
    title: 'Create Account',
    variant: 'secondary',
  },
};

​
Interactive controls

Adjust component props in real-time using the controls addon. Change text, colors, numbers, dates, and more without editing code.
Controls work seamlessly with TypeScript — your component props automatically generate interactive controls.

​
Component Story Format

Write stories using CSF (Component Story Format), an open standard based on ES modules. Stories are simply objects that describe how to render your component.

​
Portable stories

Reuse your stories in unit tests with Jest, Vitest, or other test runners. Write stories once and test them anywhere.

​
Powerful addons

Extend Storybook with addons designed specifically for React Native:
  • Controls — Edit component props interactively
  • Actions — Log and inspect event handlers
  • Backgrounds — Test components against different backgrounds
  • Notes — Add markdown documentation to stories

​
Platform support

Storybook for React Native works with:

Expo

Full support for Expo SDK 47+

Expo Router

Dedicated route integration

React Native CLI

Standard React Native projects

Re.Pack

Webpack/Rspack bundler

iOS

iOS 13.4 and above

Android

Android 5.0+

​
Requirements

  • React Native 0.72.0 or higher
  • Storybook 10 or higher
  • Node.js 20 or higher
  • react-native-reanimated 2.0+ (recommended)
  • react-native-gesture-handler 2.0+ (recommended)
  • react-native-safe-area-context (recommended)
Some UI dependencies are optional. For a minimal setup without animations, use lite mode to reduce bundle size.

​
How it works

Storybook for React Native uses Metro (or Re.Pack) to bundle your stories and generates a special entry point that renders the Storybook UI. The withStorybook metro wrapper:
  1. Enables dynamic story imports using require.context
  2. Automatically generates storybook.requires.ts with all your stories
  3. Optionally starts a WebSocket server for remote control
  4. Can be toggled on/off for production builds
metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

const config = getDefaultConfig(__dirname);

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

​
Next steps

1

Install Storybook

Follow our quickstart guide to install Storybook in your project
2

Write your first story

Learn how to write stories using Component Story Format
3

Add interactivity

Use addons to make your stories interactive and useful
4

Test your components

Set up portable stories for component testing

​
Community and support

GitHub

Report issues and contribute to the project

Discord

Join the #react-native channel for help and discussion

Build docs developers (and LLMs) love

Get started for freeTalk to us