setup-react-native-storybook
React Native Storybook Setup
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:
- Expo (no router) - see references/expo-setup.md
- Expo with Expo Router - see references/expo-router-setup.md
- React Native CLI (no Expo) - see references/react-native-cli-setup.md
- Re.Pack (rspack/webpack) - see references/repack-setup.md
Flow Selection
More from storybookjs/react-native
writing-react-native-storybook-stories
Create and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native components, configuring Storybook addons (controls, actions, backgrounds, notes), setting up argTypes, decorators, parameters, or working with portable stories for testing. Applies to any task involving @storybook/react-native story authoring.
301upgrading-react-native-storybook
Incrementally upgrade React Native Storybook across the supported migration paths. Use when upgrading `@storybook/react-native` projects from 5.3.x to 6.5.x, 6.5.x to 7.6.x, 7.6.x to 8.3.x, 8.x to 9.x, or 9.x to 10.x. Detect the currently installed Storybook version, choose only the next migration step, update dependencies and config, regenerate `storybook.requires`, convert remaining `storiesOf` stories to CSF during the `6.5.x -> 7.6.x` upgrade, and stop after a single version hop instead of jumping multiple major versions at once.
77react-native-best-practices
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
21setup
Sets up a Mac for ButterCut. Installs all required dependencies (Homebrew, Ruby, Python, FFmpeg, WhisperX). Use when user says "install buttercut", "set up my mac", "get started", "first time setup", "install dependencies" or "check my installation".
1