Sets up Storybook v10 for React Native in Expo, Expo Router, CLI, or Re.Pack projects. Guides CLI init, .rnstorybook config with WebSockets/AsyncStorage, and bundler integration.
From react-native-storybooknpx claudepluginhub transaurus/staging-storybookjs-react-nativeThis skill uses the workspace's default tool permissions.
references/expo-router-setup.mdreferences/expo-setup.mdreferences/react-native-cli-setup.mdreferences/repack-setup.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.
Add @storybook/react-native v10 to a React Native project.
Important: Detect the project's package manager (look for yarn.lock, pnpm-lock.yaml, or bun.lockb) and use it for all install/run commands instead of npm. The examples below use npm but substitute accordingly (e.g. yarn add instead of npm install, yarn storybook instead of npm run storybook). For Expo projects, use npx expo install (or bunx expo install, etc.) to install dependencies so Expo can resolve compatible versions.
For the init command, use <pm> create storybook with the flags shown below. Only npm needs -- before the flags. Never use npx/bunx etc for this.
Four setup flows based on project type:
rspack.config or webpack.config and uses @callstack/repack -> Re.Packapp/ directory with _layout.tsx and uses expo-router -> Expo Router@react-native-community/cli with no Expo -> React Native CLInpm create storybook -- --type react_native --yes
# or: pnpm create storybook --type react_native --yes
# or: bun create storybook --type react_native --yes
This installs dependencies and creates .rnstorybook/ with main.ts, preview.tsx, and index.tsx.
Update the generated .rnstorybook/index.tsx to enable WebSocket support. This is required for remote control and syncing with the Storybook web companion:
// .rnstorybook/index.tsx
import AsyncStorage from '@react-native-async-storage/async-storage';
import { view } from './storybook.requires';
const StorybookUIRoot = view.getStorybookUI({
storage: {
getItem: AsyncStorage.getItem,
setItem: AsyncStorage.setItem,
},
enableWebsockets: true,
});
export default StorybookUIRoot;
If the project doesn't have @react-native-async-storage/async-storage, install it:
npm install @react-native-async-storage/async-storage
The CLI generates a default stories glob in .rnstorybook/main.ts. Keep the existing glob and add an additional entry pointing to where UI components actually live in the project. Look for directories like components/, src/components/, src/, ui/, etc.:
// .rnstorybook/main.ts
const main: StorybookConfig = {
stories: [
'./stories/**/*.stories.?(ts|tsx|js|jsx)', // example stories from init
'../src/components/**/*.stories.?(ts|tsx|js|jsx)', // add based on project structure
],
// ...
};
For Metro projects, wrap the metro config with withStorybook. For Re.Pack projects, add the StorybookPlugin to your rspack/webpack config. See the relevant reference file for details.
How Storybook is rendered differs per flow - see the relevant reference file.
npm run start
npm run ios # or npm run android
module.exports = withStorybook(config, {
enabled: true, // Remove Storybook from bundle when false
configPath: './.rnstorybook', // Optional and redundant when using the default ./.rnstorybook folder
useJs: false, // Generate .js instead of .ts
docTools: true, // Auto arg extraction
liteMode: false, // Mock default UI deps (use with react-native-ui-lite)
websockets: { port: 7007, host: 'localhost' }, // Remote control
});
new StorybookPlugin({
enabled: true, // Strip Storybook from bundle when false
configPath: './.rnstorybook', // Optional and redundant when using the default ./.rnstorybook folder
useJs: false, // Generate .js instead of .ts
docTools: true, // Auto arg extraction
liteMode: false, // Mock default UI deps (use with react-native-ui-lite)
websockets: 'auto', // 'auto' detects LAN IP, or { port: 7007, host: 'localhost' }
});