setup-react-native-storybook

React Native Storybook のセットアップ

React Native プロジェクトに @storybook/react-native v10 を追加します。

重要： プロジェクトのパッケージマネージャーを検出し（yarn.lock、pnpm-lock.yaml、または bun.lockb を確認）、すべてのインストール／実行コマンドで npm の代わりに使用してください。以下の例では npm を使用していますが、適宜置き換えてください（例：npm install の代わりに yarn add、npm run storybook の代わりに yarn storybook）。Expo プロジェクトでは、依存関係をインストールする際に npx expo install（または bunx expo install など）を使用し、Expo が互換性のあるバージョンを解決できるようにしてください。

init コマンドには、以下のフラグを指定した <pm> create storybook を使用してください。フラグの前に -- が必要なのは npm のみです。npx／bunx などは絶対に使用しないでください。

プロジェクトの種類に応じた 4 つのセットアップフロー：

1. Expo（ルーターなし） - references/expo-setup.md を参照
2. Expo Router を使用する Expo - references/expo-router-setup.md を参照
3. React Native CLI（Expo なし） - references/react-native-cli-setup.md を参照
4. Re.Pack（rspack/webpack） - references/repack-setup.md を参照

フローの選択

• プロジェクトに rspack.config または webpack.config があり、@callstack/repack を使用している -> Re.Pack
• プロジェクトに _layout.tsx を含む app/ ディレクトリがあり、expo-router を使用している -> Expo Router
• プロジェクトで Expo を使用しているが、ファイルベースのルーティングは使用していない -> Expo
• プロジェクトで @react-native-community/cli を使用しており、Expo を使用していない -> React Native CLI

共通の手順（すべてのフロー）

1. CLI Init を実行する

npm create storybook -- --type react_native --yes
# or: pnpm create storybook --type react_native --yes
# or: bun create storybook --type react_native --yes

これにより依存関係がインストールされ、.rnstorybook/ に main.ts、preview.tsx、index.tsx が作成されます。

2. .rnstorybook/index.tsx で WebSocket を有効にする

生成された .rnstorybook/index.tsx を更新して、WebSocket のサポートを有効にします。リモート制御と Storybook の Web コンパニオンとの同期に必要です。

// .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;

プロジェクトに @react-native-async-storage/async-storage がない場合は、インストールしてください。

npm install @react-native-async-storage/async-storage

3. main.ts のストーリーの Glob を更新する

CLI は .rnstorybook/main.ts にデフォルトの stories グロブを生成します。既存のグロブはそのまま残し、プロジェクト内で UI コンポーネントが実際に配置されている場所を指すエントリーを追加してください。components/、src/components/、src/、ui/ などのディレクトリを確認してください。

// .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
  ],
  // ...
};

4. バンドラーを設定する

Metro プロジェクトでは、Metro の設定を withStorybook でラップします。Re.Pack プロジェクトでは、rspack/webpack の設定に StorybookPlugin を追加します。詳しくは、該当するリファレンスファイルを参照してください。

5. エントリーポイントを作成する

Storybook のレンダリング方法はフローごとに異なります。該当するリファレンスファイルを参照してください。

6. 実行する

npm run start
npm run ios     # or npm run android

withStorybook のオプション（Metro）

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
});

StorybookPlugin のオプション（Re.Pack）

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' }
});