移动开发

setup-react-native-storybook

storybookjs/react-native

Set up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a Re.Pack rspack/webpack config. Covers Expo, Expo Router, plain React Native CLI, and Re.Pack setups.

  • 538 次安装
  • 1300 星标
  • 收录于

安装命令

npx skills add https://github.com/storybookjs/react-native --skill setup-react-native-storybook

SKILL.md

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:

  1. Expo (no router) - see references/expo-setup.md
  2. Expo with Expo Router - see references/expo-router-setup.md
  3. React Native CLI (no Expo) - see references/react-native-cli-setup.md
  4. Re.Pack (rspack/webpack) - see references/repack-setup.md

Flow Selection