Skip to main content

Storybook for React Native v10: What's New

· 4 min read
Danny Williams
Danny Williams
Senior Software Engineer

Storybook for React Native v10 has been out for a few months now and we've been shipping improvements steadily since the initial release. Here's a look at what v10 brought and what's been added since.

The v10 Release​

Version 10 aligned React Native Storybook with Storybook core v10 and its move to ESM-only. Beyond that compatibility work, v10 introduced meaningful improvements to the developer experience.

Simplified Metro Configuration​

The withStorybook Metro wrapper was overhauled to work out of the box with sensible defaults. The old onDisabledRemoveStorybook flag is gone - when enabled is false, Storybook is automatically stripped from the bundle.

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

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

Safe Top-Level Imports​

In v9, importing Storybook at the top level of your app would include it in the production bundle even when disabled. You had to use conditional require() calls to avoid this.

In v10, Metro stubs out the .rnstorybook directory and all Storybook packages when enabled: false, so top-level imports are safe:

import StorybookUI from './.rnstorybook'; // Safe - stubbed out when disabled

export default function App() {
  if (process.env.STORYBOOK_ENABLED === 'true') {
    return <StorybookUI />;
  }
  return <MyApp />;
}

Lite UI Improvements​

The lite UI (@storybook/react-native-ui-lite) received fixes for animations, keyboard handling, and platform compatibility. It now uses react-native-safe-area-context directly, and includes a custom slider for platforms that don't support the native one.

For the full migration guide, see the migration docs.

What's New Since v10.0​

v10.1: UI Visibility Control and Layout Parameter​

A new storybookUIVisibility option and layout parameter give you more control over how the Storybook UI appears around your stories. This is useful when you want stories to render full-screen or with custom padding.

v10.2: Re.Pack Support, Auto Host Detection, and Virtualized Story Tree​

Re.Pack/Rspack plugin - Storybook now supports Re.Pack projects that use Rspack or Webpack instead of Metro. A new StorybookPlugin replaces the withStorybook Metro wrapper for these setups:

import { StorybookPlugin } from '@storybook/react-native/repack/withStorybook';

new StorybookPlugin({
  enabled: storybookEnabled,
  websockets: 'auto',
});

For the full setup guide, see the Re.Pack documentation. There's also a starter project to get you going quickly.

Auto host detection for WebSockets - You can now pass websockets: 'auto' (in both the Metro wrapper and the Re.Pack plugin) to automatically detect your LAN IP address, removing the need to hardcode a host.

Virtualized story tree - The lite UI now uses LegendList to virtualize the story sidebar, significantly improving performance for projects with many stories.

v10.3 (Preview): Built-in Backgrounds with Globals​

The upcoming v10.3 release introduces a built-in backgrounds addon powered by Storybook's globals API. This replaces the previous @storybook/addon-ondevice-backgrounds package with a simpler configuration that doesn't require an additional dependency.

Enable it via a feature flag in main.ts:

const main: StorybookConfig = {
  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
  addons: ['@storybook/addon-ondevice-controls'],
  features: {
    ondeviceBackgrounds: true,
  },
};

Backgrounds are configured in preview.tsx using the standard Storybook parameters API and can be overridden at the story level. See the backgrounds documentation for details.

Agent Skills for AI-Assisted Setup​

We've published agent skills that guide AI coding assistants through setting up and working with React Native Storybook. If you use Claude Code, Cursor, Windsurf, or any agent that supports skills, you can install them with:

npx skills add storybookjs/react-native

The skills cover setup for Expo, Expo Router, React Native CLI, and Re.Pack projects, as well as writing stories with CSF, controls, decorators, and more.

What's Next​

We're continuing to work on improving the developer experience, performance, and feature parity with Storybook for web. If you have feedback or run into issues, open an issue or find us on Discord in the react-native channel.