setup-react-native-storybook_skill

This skill helps you add and configure Storybook for React Native across Expo, React Native CLI, and Re.Pack projects, boosting component-driven development.

TypeScript

1.3k

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill storybookjs/react-native --skill setup-react-native-storybook

SKILL.md4.7 KB

Overview

This skill sets up Storybook for React Native across Expo, Expo Router, React Native CLI, and Re.Pack (rspack/webpack) projects. It guides installing @storybook/react-native v10, creating the .rnstorybook config, wiring getStorybookUI, and configuring the bundler so Storybook is included or stripped from app bundles. The goal is a repeatable, package-manager-aware setup that works with Expo-specific requirements and remote control via WebSockets.

How this skill works

The skill detects project type and recommends one of four flows: Expo, Expo Router, React Native CLI, or Re.Pack. It runs the Storybook init CLI to generate .rnstorybook, updates index.tsx to enable WebSockets and AsyncStorage, expands story globs in main.ts, and configures the bundler (withStorybook for Metro or StorybookPlugin for Re.Pack). It also outlines entrypoint wiring and run commands using the detected package manager.

When to use it

Adding Storybook to an existing Expo, Expo Router, or React Native CLI app.
Setting up Storybook in a Re.Pack project using rspack or webpack.
Configuring metro.config.js to include withStorybook for Metro bundler.
Enabling remote control and syncing via WebSockets for the React Native Storybook UI.
Creating or adjusting .rnstorybook main.ts, preview.tsx, and index.tsx for your component globs.

Best practices

Detect and use the project's package manager (yarn/pnpm/bun) for all install and run commands.
Use npx/bunx expo install for Expo-managed dependencies so Expo resolves compatible versions.
Keep the generated stories glob and add globs pointing to your actual UI/component directories.
Enable WebSockets in .rnstorybook/index.tsx and wire AsyncStorage for remote control and companion syncing.
Wrap Metro config with withStorybook or add StorybookPlugin to Re.Pack to allow easy stripping of Storybook from production bundles.

Example use cases

Add Storybook to an Expo app to develop and visually test components outside of app navigation.
Integrate Storybook into an Expo Router app and expose a Storybook route alongside normal routes.
Set up Storybook in a plain React Native CLI project and configure metro.config.js with withStorybook.
Configure StorybookPlugin in a Re.Pack rspack/webpack config to support fast bundling and optional removal in production.
Enable remote device sync and hot reloading of stories using WebSockets and AsyncStorage.

FAQ

Always use the package manager detected in the project (yarn, pnpm, or bun). For Expo, use npx expo install or the equivalent bunx/pnpm command so Expo can pick compatible versions.

How do I enable remote control and the web companion?

Enable enableWebsockets: true in .rnstorybook/index.tsx and provide AsyncStorage getItem/setItem. Configure websockets options in withStorybook or StorybookPlugin if you need a custom host/port.