skills.rest
soham2008xyz
soham2008xyzCOMMUNITY
Explore all skills by this author →
Website𝕏@nonconformismGitHub

setup-react-native-storybook

Configure Storybook for React Native projects with bundler integration and conditional rendering.

Updated Jan 8, 2026
Search Tags:#storybook#react-native#expo#ui-development#metro#expo-router#rspack
One-click install
npx skills add https://github.com/soham2008xyz/trade-tycoon --skill setup-react-native-storybook
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setup-react-native-storybook
Source: https://github.com/soham2008xyz/trade-tycoon/tree/main/.agents/skills/setup-react-native-storybook
Command: npx skills add https://github.com/soham2008xyz/trade-tycoon --skill setup-react-native-storybook

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you set up Storybook in React Native projects so you can quickly develop, preview, and remotely control UI components during development.

Core Features & Use Cases

  • Install and initialize Storybook for React Native: Adds @storybook/react-native v10 using the correct create storybook workflow for the target project type.
  • Make Storybook work reliably on-device and remotely: Enables required WebSocket support and storage integration in .rnstorybook/index.tsx, including the @react-native-async-storage/async-storage dependency when needed.
  • Correctly wire the entrypoints for common bundlers: Covers Metro-based Expo, Expo Router, plain React Native CLI, and Re.Pack/Webpack by configuring withStorybook or StorybookPlugin and adding an appropriate Storybook route/entry.

Quick Start

Ask the AI to set up Storybook for your Expo Router project and ensure it is controlled by the EXPO_PUBLIC_STORYBOOK_ENABLED environment variable.

Frequently Asked Questions about setup-react-native-storybook

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Storybook to my Expo Router project?▼

Setting up Storybook for React Native requires installing `@storybook/react-native` v10, running `.rnstorybook` initialization, configuring WebSocket support in `.rnstorybook/index.tsx`, and wiring the correct bundler wrapper such as `withStorybook` for Metro or `StorybookPlugin` for Re.Pack.

Does Storybook for React Native work with Re.Pack and Webpack?▼

Yes, Storybook for React Native works with Re.Pack and Webpack by configuring the `StorybookPlugin` within the bundler configuration, allowing you to initialize `.rnstorybook` and render UI components during development.

Why does my React Native Storybook remote preview fail to connect?▼

React Native Storybook remote preview fails when the `.rnstorybook/index.tsx` file lacks required WebSocket support and storage integration, which are necessary to enable remote UI control and component development on-device.

Can I toggle Storybook in my React Native app using an environment variable?▼

Yes, you can toggle Storybook in a React Native app by gating the app entrypoint or route with an environment variable such as `EXPO_PUBLIC_STORYBOOK_ENABLED`, conditionally rendering Storybook instead of the main application.

What bundlers are supported when initializing Storybook in React Native?▼

Initializing Storybook in React Native supports Metro-based Expo, Expo Router, plain React Native CLI, and Re.Pack/Webpack bundlers by applying the appropriate `withStorybook` wrapper or `StorybookPlugin` configuration.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
hypeJunctionhypeJunction
1

add-story

Generates TypeScript test files with visual states and interaction tests for Storybook components.

Community
Intermediate
thesaifalitaithesaifalitai
8

react-native-expert

Build and configure production-grade bare React Native projects with native modules.

Community
Advanced
mgd34msumgd34msu
4

storybook

Develop, document, and test UI components in isolation with Storybook.

Community
Intermediate