react-native

Name: react-native
Author: storybookjs

by storybookjs1.3k178GitHub

No description provided.

Unlock Deep Analysis

Use AI to visualize the workflow and generate a realistic output preview for this skill.

Development

Compatible Agents

Claude Code

~/.claude/skills/

Codex CLI

~/.codex/skills/

Gemini CLI

~/.gemini/skills/

OpenCode

~/.opencode/skills/

OpenClaw

~/.openclaw/skills/

GitHub Copilot

~/.copilot/skills/

Cursor

~/.cursor/skills/

Windsurf

~/.codeium/windsurf/skills/

Cline

~/.cline/skills/

Roo Code

~/.roo/skills/

Kiro

~/.kiro/skills/

Junie

~/.junie/skills/

Augment Code

~/.augment/skills/

Warp

~/.warp/skills/

Goose

~/.config/goose/skills/

Skill Collection

11 Skills

react-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.

react-native-storybook

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.

setup-react-native-storybook

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.

upgrading-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.

writing-react-native-storybook-stories

Coming Soon

react-native-storybookreact-native-storybookreact-native-best-practicessetup-react-native-storybookupgrading-react-native-storybookwriting-react-native-storybook-stories

This is a Skill collection repository. View available Skills in the list above. This SKILL.md is only for repository description.

SKILL.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Development Commands

# Initial Setup
yarn install
yarn build

# Development
yarn dev        # Watch all packages for changes
yarn example    # Run the expo example app with Storybook

# Testing
yarn test       # Run unit tests across all packages

# Code Quality
yarn lint       # Run ESLint across the codebase

# Documentation (from docs/ directory)
cd docs
yarn start      # Start development server
yarn build      # Build documentation
yarn serve      # Serve built documentation

Architecture Overview

Yarn workspaces monorepo managed by Lerna containing React Native Storybook packages.

Packages

Apps

examples/expo-example - Expo example app showcasing Storybook
docs - Documentation site for Storybook React Native

Core:

@storybook/react-native - Main package providing Storybook functionality
@storybook/react-native-ui - Full UI components for on-device Storybook
@storybook/react-native-ui-lite - Lightweight UI components
@storybook/react-native-ui-common - Shared UI components
@storybook/react-native-theming - Theming utilities

On-Device Addons:

@storybook/addon-ondevice-actions - Log component interactions
@storybook/addon-ondevice-backgrounds - Change story backgrounds
@storybook/addon-ondevice-controls - Dynamically edit component props
@storybook/addon-ondevice-notes - Add markdown documentation to stories

Build System & Metro Configuration

Uses tsup for TypeScript compilation (ES2022, CommonJS output)
Each package has its own tsup.config.ts
yarn prepare in a package builds it

The withStorybook Metro wrapper:

Enables unstable_allowRequireContext for dynamic story imports
Automatically generates storybook.requires.ts file
Optional WebSocket server for remote control
Can be conditionally enabled/disabled via options

Key Concepts

CSF (Component Story Format) - Standard story syntax
On-device UI - Native UI that runs directly on mobile devices
Story requires generation - Automatic generation of story imports via Metro
Portable stories - Reuse stories in unit tests
WebSocket support - Remote control stories from external devices

Source: https://github.com/storybookjs/react-native

Content curated from original sources, copyright belongs to authors

Grade B

-AI Score

Best Practices

Checking...

This is a Skill Collection

Please copy individual Skills from the 5 available below

User Rating

USER RATING

0UP

0DOWN

Loading files...

WORKS WITH

Claude

Codex

Gemini