Storybook React Native

https://github.com/storybookjs/react-native
Admin
Storybook for React Native allows you to design and develop individual React Native components...
Tokens:146,594
Snippets:1,163
Trust Score:9.7
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Start dev servers for example apps

Source: https://github.com/storybookjs/react-native/blob/next/e2e/agent-device/storybook-addons/README.md

Commands to start the matching dev server for each example app before replaying a flow. Each command sets the required environment variable and starts the dev client on port 8081.

```sh
# expo-example
EXPO_PUBLIC_STORYBOOK_ENABLED=true pnpm --dir examples/expo-example exec expo start --dev-client --clear --port 8081

# expo-new-wrapper-example
STORYBOOK_ENABLED=true pnpm --dir examples/expo-new-wrapper-example exec expo start --dev-client --clear --port 8081

# expo-router-example
STORYBOOK_ENABLED=true pnpm --dir examples/expo-router-example exec expo start --dev-client --clear --port 8081

# repack-example
STORYBOOK_ENABLED=true pnpm --dir examples/repack-example exec react-native webpack-start --reset-cache
```

--------------------------------

### Install dependencies with npm install

Source: https://github.com/storybookjs/react-native/blob/next/examples/expo-router-example/README.md

Run this command in the project root to install all required dependencies.

```bash
npm install
```

--------------------------------

### Install @storybook/addon-ondevice-controls

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/addons/controls.md

Install the on-device controls addon via npm.

```sh
npm install @storybook/addon-ondevice-controls
```

--------------------------------

### Install @storybook/addon-ondevice-notes

Source: https://github.com/storybookjs/react-native/blob/next/packages/ondevice-notes/README.md

Install the addon as a dev dependency using yarn.

```sh
yarn add -D @storybook/addon-ondevice-notes
```

--------------------------------

### Install iOS pods

Source: https://github.com/storybookjs/react-native/blob/next/skills/setup-react-native-storybook/references/react-native-cli-setup.md

Install iOS pods after setting up Storybook.

```sh
cd ios && pod install && cd ..

```

--------------------------------

### Storybook UI Configuration Examples (Standard, WebSocket-Enabled)

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/storybook-ui-configuration.md

Three TypeScript configurations for initializing StorybookUI-Root: the standard setup with required storage bindings, and two WebSocket-contolled variants for testing tools like Chromatic, one for use with `withStorybook` wrapper and one for manual WebSocket configuration.

```ts
import { view } from './storybook.requires';
import AsyncStorage from '@react-native-async-storage/async-storage';

const StorybookUIRoot = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
});
```

```ts
import { view } from './storybook.requires';
import AsyncStorage from '@react-native-async-storage/async-storage';

const StorybookUIRoot = view.getStorybookUI({
  onDeviceUI: false, // No UI — controlled via WebSocket
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
});
```

```ts
const StorybookUIRoot = view.getStorybookUI({
  onDeviceUI: false,
  enableWebsockets: true,
  host: 'localhost',
  port: 7007,
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
});
```

--------------------------------

### Install @storybook/addon-ondevice-backgrounds with yarn

Source: https://github.com/storybookjs/react-native/blob/next/packages/ondevice-backgrounds/README.md

Install the addon as a dev dependency using yarn. Run this command in your project root.

```sh
yarn add -D @storybook/addon-ondevice-backgrounds
```

--------------------------------

### Install AsyncStorage for React Native Storybook

Source: https://github.com/storybookjs/react-native/blob/next/skills/setup-react-native-storybook/SKILL.md

Install @react-native-async-storage/async-storage if the project doesn't have it, required for the WebSocket setup in .rnstorybook/index.tsx.

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

--------------------------------

### Install @storybook/addon-ondevice-notes

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/addons/index.md

Install the on-device Notes addon for writing additional documentation in stories.

```sh
npm install --save-dev @storybook/addon-ondevice-notes
```

--------------------------------

### Install @storybook/addon-ondevice-actions with yarn

Source: https://github.com/storybookjs/react-native/blob/next/packages/ondevice-actions/README.md

Install the addon as a dev dependency.

```sh
yarn add -D @storybook/addon-ondevice-actions
```

--------------------------------

### Start local development server

Source: https://github.com/storybookjs/react-native/blob/next/docs/README.md

Starts a local development server and opens a browser window. Changes are reflected live without restarting the server.

```bash
$ pnpm start
```

--------------------------------

### Start the app and run on iOS or Android

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/getting-started/expo-router.md

Run these commands to start your app and launch it on a simulator or device. Then navigate to /storybook to view your stories.

```sh
npm run start
npm run ios    # or npm run android
```

--------------------------------

### Run the example app with pnpm ios or pnpm android

Source: https://github.com/storybookjs/react-native/blob/next/CONTRIBUTING.md

Navigate to the example app and run it on iOS or Android. Requires pnpm dev to be running to see changes.

```shell
cd examples/expo-example

# for ios
pnpm ios

# for android
pnpm android
```

--------------------------------

### Create Jest setup file

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/testing.md

Create a setup-jest.ts file for test configuration, importing the React Native gesture handler Jest setup.

```ts
// setup-jest.ts
import 'react-native-gesture-handler/jestSetup';
```

--------------------------------

### Complete example with all options

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/cli-configuration.md

Shows how to run sb-rn-get-stories with all options: custom config path, JavaScript output, and no doc tools.

```sh
# Generate with all options
npx sb-rn-get-stories \
  --config-path ./src/.storybook \
  --use-js \
  --no-doc-tools
```

--------------------------------

### Start the Expo app with npx expo start

Source: https://github.com/storybookjs/react-native/blob/next/examples/expo-router-example/README.md

Starts the Expo development server. You can then open the app in a development build, Android emulator, iOS simulator, or Expo Go.

```bash
npx expo start
```

--------------------------------

### Install @storybook/addon-ondevice-controls

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/addons/index.md

Install the on-device Controls addon and the required community packages for date/time pickers and sliders.

```sh
npm install --save-dev @storybook/addon-ondevice-controls @react-native-community/datetimepicker @react-native-community/slider
```

--------------------------------

### Install dependencies with pnpm

Source: https://github.com/storybookjs/react-native/blob/next/docs/README.md

Installs the dependencies required for the Docusaurus website.

```bash
$ pnpm install
```

--------------------------------

### Install @storybook/addon-ondevice-actions

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/addons/index.md

Install the on-device actions addon to log events and actions in your stories.

```sh
npm install --save-dev @storybook/addon-ondevice-actions
```

--------------------------------

### Install Maestro CLI

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/testing.md

Install Maestro CLI on macOS using Homebrew. For other platforms, see the Maestro installation guide.

```sh
# macOS
brew tap mobile-dev-inc/tap
brew install maestro

# Other platforms - see https://maestro.mobile.dev/getting-started/installing-maestro
```

--------------------------------

### Install dependencies for 6.5 upgrade

Source: https://github.com/storybookjs/react-native/blob/next/skills/upgrading-react-native-storybook/references/from-5-3-to-6-5.md

Install commands for the new base dependencies and addon dependencies. Use the repo's existing package manager.

```sh
npm install --save-dev @storybook/react-native @storybook/core/common @react-native-async-storage/async-storage react-native-safe-area-context react-dom
npm install --save-dev @storybook/addon-ondevice-controls @storybook/addons @storybook/addon-controls @react-native-community/datetimepicker @react-native-community/slider
npm install --save-dev @storybook/addon-ondevice-actions @storybook/addon-actions
```

--------------------------------

### Install Storybook dependencies

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/getting-started/manual-setup.md

Install the required packages for manual in-app integration. Use npm or your preferred package manager.

```sh
npm install storybook @storybook/react-native @react-native-async-storage/async-storage react-dom react-native-safe-area-context react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg
```

--------------------------------

### Setup global annotations for Jest tests

Source: https://github.com/storybookjs/react-native/blob/next/skills/writing-react-native-storybook-stories/SKILL.md

Setup global annotations for tests in a Jest setup file. This imports preview annotations from the .rnstorybook directory and sets them with setProjectAnnotations.

```ts
// setup-portable-stories.ts
import { setProjectAnnotations } from '@storybook/react';
import * as previewAnnotations from '../.rnstorybook/preview';
setProjectAnnotations(previewAnnotations);
```

--------------------------------

### Install agent skills with npx skills add

Source: https://github.com/storybookjs/react-native/blob/next/README.md

Universal installation command for any AI agent or IDE that supports skills, such as Claude Code, Cursor, or Windsurf.

```sh
npx skills add storybookjs/react-native
```

--------------------------------

### Install @storybook/addon-ondevice-backgrounds

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/addons/index.md

Install the on-device backgrounds addon to change background colors of your stories.

```sh
npm install --save-dev @storybook/addon-ondevice-backgrounds
```

--------------------------------

### MCP Client Configuration Example

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/mcp-configuration.md

Example JSON configuration for an MCP client to connect to the Storybook MCP endpoint at `http://localhost:7007/mcp`.

```json
{
  "mcpServers": {
    "storybook": {
      "type": "http",
      "url": "http://localhost:7007/mcp"
    }
  }
}
```

--------------------------------

### Install Controls Addon and dependencies

Source: https://github.com/storybookjs/react-native/blob/next/packages/ondevice-controls/README.md

Install the Controls addon and its required dependencies using yarn.

```sh
yarn add -D @storybook/addon-ondevice-controls @react-native-community/datetimepicker @react-native-community/slider
```

--------------------------------

### Environment-specific scripts for dev and prod

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/cli-configuration.md

Example package.json scripts showing different configurations for development and production.

```json
{
  "scripts": {
    "storybook:dev": "sb-rn-get-stories -c ./.storybook-dev",
    "storybook:prod": "sb-rn-get-stories -c ./.storybook-prod --no-doc-tools"
  }
}
```

--------------------------------

### Install dependencies for Controls addon

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Run this command to add the dependencies needed for the on-device controls addon.

```sh
yarn add -D @storybook/addon-ondevice-controls @storybook/addons @storybook/addon-controls @react-native-community/datetimepicker @react-native-community/slider
```

--------------------------------

### Install commands for new dependencies

Source: https://github.com/storybookjs/react-native/blob/next/skills/upgrading-react-native-storybook/references/from-7-6-to-8-3.md

Commands to install the new native UI dependencies and update Storybook packages. For Expo projects, use `expo install` to match the Expo SDK versions.

```sh
npx expo install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg
```

```sh
npm install --save-dev @storybook/react-native@^8.3.5 @storybook/react@^8.3.5 @storybook/addon-ondevice-controls@^8.3.5 @storybook/addon-ondevice-actions@^8.3.5 @storybook/addon-ondevice-backgrounds@^8.3.5 @storybook/addon-ondevice-notes@^8.3.5
```

--------------------------------

### Clone and build the repository for reproduction

Source: https://github.com/storybookjs/react-native/blob/next/CONTRIBUTING.md

Commands to clone the repository, build it, and run the example app to reproduce issues. Includes commands for iOS, Android, and web platforms.

```sh
git clone https://github.com/storybookjs/react-native.git react-native-storybook
cd react-native-storybook
pnpm build

# make changes to try and reproduce the problem, such as adding components + stories
cd examples/expo-example
# for ios
pnpm ios
# for android
pnpm android
# for web
pnpm web

# see if you can see the problem, if so, commit it:
git checkout -b "branch-describing-issue"
git add -A
git commit -m "reproduction for issue #123"

# fork the storybook repo to your account, then add the resulting remote
git remote add <your-username> https://github.com/<your-username>/<fork-name>.git
git push -u <your-username> master
```

--------------------------------

### Install dependencies for Actions addon

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Run this command to add the dependencies needed for the on-device actions addon.

```sh
yarn add -D @storybook/addon-ondevice-actions @storybook/addon-actions
```

--------------------------------

### Generate and run secure Storybook

Source: https://github.com/storybookjs/react-native/blob/next/examples/expo-example/README.md

Run these commands to generate certificates and start the secure Storybook server. The first command generates certificates, and the second starts the secure server.

```bash
pnpm storybook:secure:cert
```

```bash
pnpm storybook:secure
```

--------------------------------

### Initialize Storybook with CLI

Source: https://github.com/storybookjs/react-native/blob/next/skills/setup-react-native-storybook/references/expo-setup.md

Run this command to create a new Storybook setup for React Native in your Expo project.

```sh
npm create storybook -- --type react_native --yes
```

--------------------------------

### Complete example with multiple controls

Source: https://github.com/storybookjs/react-native/blob/next/skills/writing-react-native-storybook-stories/references/controls.md

Complete example combining multiple control types in a Storybook meta and story definition.

```tsx
import type { Meta, StoryObj } from '@storybook/react-native';
import { MyComponent } from './MyComponent';

const meta = {
  component: MyComponent,
  argTypes: {
    title: { control: { type: 'text' } },
    fontSize: { control: { type: 'range', min: 12, max: 24, step: 1 } },
    isVisible: { control: { type: 'boolean' } },
    variant: {
      options: ['primary', 'secondary', 'danger'],
      control: { type: 'select' },
    },
    backgroundColor: { control: { type: 'color' } },
    tags: { control: { type: 'array' } },
    config: { control: { type: 'object' } },
    lastUpdated: { control: { type: 'date' } },
  },
} satisfies Meta<typeof MyComponent>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Interactive: Story = {
  args: {
    title: 'Sample',
    fontSize: 16,
    isVisible: true,
    variant: 'primary',
    backgroundColor: '#007AFF',
    tags: ['react', 'native'],
    config: { theme: 'light', animations: true },
    lastUpdated: new Date(),
  },
};
```

--------------------------------

### Install testing dependencies

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/testing.md

Install the required testing dependencies for portable stories with Jest.

```sh
npm install --save-dev @testing-library/react-native @testing-library/jest-native jest
```

--------------------------------

### .storybook/preview.tsx with Preview from @storybook/react

Source: https://github.com/storybookjs/react-native/blob/next/skills/upgrading-react-native-storybook/references/from-6-5-to-7-6.md

Example of the preview configuration file using Preview type from @storybook/react, with empty decorators and parameters.

```tsx
import type { Preview } from '@storybook/react';

const preview: Preview = {
  decorators: [],
  parameters: {},
};

export default preview;
```

--------------------------------

### Install additional dependencies for Storybook 6.5

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Run this command to add the core dependencies required for Storybook 6.5 compatibility.

```sh
yarn add -D @storybook/react-native @storybook/core/common @react-native-async-storage/async-storage react-native-safe-area-context react-dom
```

--------------------------------

### Install Storybook dependencies for Expo

Source: https://github.com/storybookjs/react-native/blob/next/MANUAL_SETUP.md

Installs all required Storybook dependencies for an Expo project.

```sh
expo install @storybook/react-native @react-native-async-storage/async-storage react-dom react-native-safe-area-context react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg
```

--------------------------------

### Setup project annotations in Jest setup file

Source: https://github.com/storybookjs/react-native/blob/next/PORTABLE_STORIES.md

Call setProjectAnnotations once before tests run, typically in a Jest setup file. It merges preview annotations from .rnstorybook/preview and addon preview exports so composeStories/composeStory apply them. Include addon preview exports if the addon requires decorators/loaders to render stories correctly.

```TypeScript
// setup-portable-stories.ts
import { setProjectAnnotations } from '@storybook/react';
import * as addonAnnotations from 'my-addon/preview';
import * as previewAnnotations from './.rnstorybook/preview';

setProjectAnnotations([previewAnnotations, addonAnnotations]);
```

--------------------------------

### Install reanimated/worklets and configure Babel

Source: https://github.com/storybookjs/react-native/blob/next/skills/setup-react-native-storybook/references/repack-setup.md

Installs the required dependencies and configures the worklets Babel plugin. The plugin must be last in the plugins array.

```sh
npm install react-native-reanimated react-native-worklets
```

```js
// babel.config.js
module.exports = {
  presets: [
    // your existing preset, e.g.:
    'module:@react-native/babel-preset',
  ],
  plugins: [
    // ... any other plugins
    'react-native-worklets/plugin', // must be last
  ],
};
```

--------------------------------

### Install react-native-enriched-markdown for native rendering

Source: https://github.com/storybookjs/react-native/blob/next/packages/ondevice-notes/README.md

Optional installation for native rendering of GitHub Flavored Markdown, tables, task lists, highlight, superscript, subscript, and syntax-highlighted code blocks. Requires New Architecture (Fabric).

```sh
yarn add react-native-enriched-markdown
```

--------------------------------

### Install babel-plugin-react-docgen-typescript

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/cli-configuration.md

Install the babel plugin required for doc tools to extract component props.

```sh
npm install --save-dev babel-plugin-react-docgen-typescript
```

--------------------------------

### .storybook/main.js with stories and addons

Source: https://github.com/storybookjs/react-native/blob/next/skills/upgrading-react-native-storybook/references/from-5-3-to-6-5.md

Example .storybook/main.js with story globs and on-device addons. This makes the Storybook config file-driven instead of hard-coded in index.js.

```js
module.exports = {
  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
  addons: [
    '@storybook/addon-ondevice-controls',
    '@storybook/addon-ondevice-actions',
    '@storybook/addon-ondevice-backgrounds',
  ],
};
```

--------------------------------

### Install react-native-enriched-markdown

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/addons/index.md

Optionally install react-native-enriched-markdown for native rendering with GFM features. Requires New Architecture; falls back to JavaScript renderer in some environments.

```sh
npm install react-native-enriched-markdown
```

--------------------------------

### Install EAS CLI globally

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/sharing-storybook.md

Installs the EAS CLI globally to configure EAS builds and updates.

```sh
npm install -g eas-cli
```

--------------------------------

### Run Storybook

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/getting-started/index.md

Run this command to start Storybook. It uses the storybook script added by the CLI.

```sh
npm run storybook
```

--------------------------------

### Install react-native-reanimated and react-native-worklets

Source: https://github.com/storybookjs/react-native/blob/next/skills/setup-react-native-storybook/references/expo-setup.md

Ensures the required dependencies for Storybook's default UI are installed. Expo handles the babel plugin automatically.

```sh
npx expo install --fix react-native-reanimated react-native-worklets
```

--------------------------------

### Run Storybook for React Native

Source: https://github.com/storybookjs/react-native/blob/next/skills/setup-react-native-storybook/SKILL.md

Start the Storybook server and run the app on iOS or Android.

```sh
npm run start
npm run ios     # or npm run android
```

--------------------------------

### Run replay suite

Source: https://github.com/storybookjs/react-native/blob/next/e2e/agent-device/storybook-addons/README.md

Command to run the replay suite for the expo-example app. Run one app/server at a time because every example uses port 8081 and the Storybook websocket on 7007.

```sh
agent-device test e2e/agent-device/storybook-addons/expo-example-full-ui.yaml --maestro --platform ios -e OPEN_LINK='storybook://expo-development-client/?url=http%3A%2F%2Flocalhost%3A8081' --artifacts-dir artifacts/agent-device/storybook-addons --report-junit artifacts/agent-device/storybook-addons/junit.xml --timeout 120000
```

--------------------------------

### package.json scripts for sb-rn-get-stories

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/cli-configuration.md

Example of adding the sb-rn-get-stories command to the prebuild script when not using a withStorybook wrapper. Run it whenever story files are added, removed, or renamed.

```json
{
  "scripts": {
    "prebuild": "sb-rn-get-stories",
    "build": "react-native build-android"
  }
}
```

--------------------------------

### Initialize Storybook in existing project

Source: https://github.com/storybookjs/react-native/blob/next/README.md

Run this command to set up Storybook with all dependencies and configuration files.

```sh
npm create storybook@latest
```

--------------------------------

### Install and configure Babel plugins for Storybook

Source: https://github.com/storybookjs/react-native/blob/next/skills/setup-react-native-storybook/references/react-native-cli-setup.md

Install the Babel plugin and update babel.config.js to include the transform-inline-environment-variables plugin and react-native-worklets/plugin, which must be placed last in the plugins array.

```sh
npm install --save-dev babel-plugin-transform-inline-environment-variables

```

```js
// babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'transform-inline-environment-variables',
    'react-native-worklets/plugin', // must be last
  ],
};

```

--------------------------------

### React Native CLI Metro config with sbmodern

Source: https://github.com/storybookjs/react-native/blob/next/skills/upgrading-react-native-storybook/references/from-5-3-to-6-5.md

React Native CLI Metro config example that sets resolverMainFields to start with 'sbmodern'.

```js
module.exports = {
  resolver: {
    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
  },
};
```

--------------------------------

### Filtering Controls by Name with include/exclude

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/addons/controls.md

Shows how to filter controls by name using the 'controls' parameter with 'exclude' or 'include', accepting an array or regular expression. This example excludes all props starting with 'on' followed by a capital letter.

```typescript
export default {
  component: MyComponent,
  parameters: {
    controls: { exclude: /^on[A-Z].*/ },
  },
};
```

--------------------------------

### Add npm scripts for Storybook

Source: https://github.com/storybookjs/react-native/blob/next/skills/setup-react-native-storybook/references/react-native-cli-setup.md

Add npm scripts to start Storybook with the STORYBOOK_ENABLED environment variable set to 'true'. The storybook script starts the bundler, while storybook:ios and storybook:android run the app on the respective platforms.

```json
{
  "scripts": {
    "storybook": "STORYBOOK_ENABLED='true' react-native start",
    "storybook:ios": "STORYBOOK_ENABLED='true' react-native run-ios",
    "storybook:android": "STORYBOOK_ENABLED='true' react-native run-android"
  }
}

```

--------------------------------

### metro.config.js with withStorybook wrapper

Source: https://github.com/storybookjs/react-native/blob/next/README.md

Configure Metro with the withStorybook wrapper. It auto-detects Metro or Re.Pack and handles entry-point swapping, story generation, and WebSocket setup. When STORYBOOK_ENABLED=true is set, the wrapper activates; otherwise it is a no-op.

```js
// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withStorybook } = require('@storybook/react-native/withStorybook');

const defaultConfig = getDefaultConfig(__dirname);

module.exports = withStorybook(defaultConfig);
```

--------------------------------

### Reset project with npm run reset-project

Source: https://github.com/storybookjs/react-native/blob/next/examples/expo-router-example/README.md

Moves the starter code to the app-example directory and creates a blank app directory for development.

```bash
npm run reset-project
```

--------------------------------

### Expo Metro config with sbmodern

Source: https://github.com/storybookjs/react-native/blob/next/skills/upgrading-react-native-storybook/references/from-5-3-to-6-5.md

Expo Metro config example that prepends 'sbmodern' to resolver.resolverMainFields so Metro prefers the sbmodern entrypoint.

```js
const { getDefaultConfig } = require('expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.resolverMainFields.unshift('sbmodern');

module.exports = defaultConfig;
```

--------------------------------

### Add start-server script to package.json

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Add this script to your `package.json` to run the Storybook server.

```json
"start-server": "react-native-storybook-server"
```

--------------------------------

### Start Expo with Storybook enabled

Source: https://github.com/storybookjs/react-native/blob/next/README.md

Set STORYBOOK_ENABLED=true and run expo start. The wrapper swaps the app's entry point with Storybook's. When the variable is not set, the app runs normally with zero Storybook code in the bundle.

```sh
STORYBOOK_ENABLED=true expo start
```

--------------------------------

### Navigate to project directory

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/sharing-storybook.md

Changes into the newly created project directory.

```sh
cd AwesomeStorybook
```

--------------------------------

### Test TextInput controls with composeStories

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/testing.md

Real-world example of testing controls with composeStories. Shows testing a TextInput with default placeholder and customizing via args.

```ts
// TextInput.test.tsx
import { render, screen } from '@testing-library/react-native';
import { composeStories } from '@storybook/react';
import * as TextInputStories from './TextInput.stories';

const { Basic } = composeStories(TextInputStories);

test('text input renders with default placeholder', () => {
  render(<Basic />);

  const input = screen.getByPlaceholderText('Enter text...');
  expect(input).toBeTruthy();
});

test('text input can be customized via args', () => {
  render(<Basic placeholder="Custom placeholder" value="Test value" />);

  const input = screen.getByDisplayValue('Test value');
  expect(input).toBeTruthy();
});
```

--------------------------------

### Configure Rspack with withStorybook for entry-point swapping

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/getting-started/repack.md

Use this Rspack config to enable Storybook with entry-point swapping. The `withStorybook` wrapper auto-detects Re.Pack and handles entry-point swapping, story generation, and WebSocket setup. `enablePackageExports: true` is required for Storybook package resolution.

```javascript
// rspack.config.mjs
import * as Repack from '@callstack/repack';
import { withStorybook } from '@storybook/react-native/withStorybook';

export default withStorybook(
  Repack.defineRspackConfig({
    // ... your existing config
    resolve: {
      ...Repack.getResolveOptions({
        enablePackageExports: true, // required for Storybook package resolution
      }),
    },
    plugins: [new Repack.RepackPlugin()],
  })
);
```

--------------------------------

### Wrap Metro config with withStorybook

Source: https://github.com/storybookjs/react-native/blob/next/skills/upgrading-react-native-storybook/references/from-7-6-to-8-3.md

Example of wrapping the Metro config with `withStorybook` from @storybook/react-native/metro/withStorybook. Keep the existing `.storybook` config path during this step.

```js
const path = require('path');
const withStorybook = require('@storybook/react-native/metro/withStorybook');

module.exports = withStorybook(config, {
  enabled: true,
  configPath: path.resolve(__dirname, './.storybook'),
});
```

--------------------------------

### Configure Storybook UI in index.tsx

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/index.md

Configures the Storybook UI in the entry point file. Options include enabling on-device UI, persisting the last selected story, setting an initial selection, providing async storage functions for persistence, and optional websocket settings for manual setups. The theme option is currently empty and documented via types.

```ts
import { view } from './storybook.requires';
import AsyncStorage from '@react-native-async-storage/async-storage';

const StorybookUIRoot = view.getStorybookUI({
  // UI Configuration
  onDeviceUI: true,
  shouldPersistSelection: true,

  // Theme Customization
  theme: {
    // theme documentation coming soon, for now use types to understand the available options
  },

  // Story Selection
  initialSelection: {
    kind: 'Components/Button',
    name: 'Primary',
  },

  // Storage Configuration
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },

  // Websocket Options (auto-injected when using the bundler-agnostic withStorybook)
  // You only need these if you're NOT using the bundler-agnostic wrapper:
  // enableWebsockets: false,
  // host: 'localhost',
  // port: 7007,

  // CustomUIComponent: MyCustomUI, // Optional custom UI component
});

export default StorybookUIRoot;
```

--------------------------------

### Add .storybook/preview.js with global decorators and parameters

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Create this file in your .storybook folder. Move any global decorators and parameters here. If you have none, export an empty array for decorators and an empty object for parameters.

```jsx
// .storybook/preview.js
import { View } from 'react-native';

export const decorators = [
  // Using a decorator to apply padding for every story
  (StoryFn) => (
    <View style={{ flex: 1, padding: 8 }}>
      <StoryFn />
    </View>
  ),
];

export const parameters = {
  my_param: 'anything',
};
```

--------------------------------

### Mermaid flowchart of entry-point swap

Source: https://github.com/storybookjs/react-native/blob/next/examples/expo-new-wrapper-example/README.md

Shows the Metro resolver entry-point swap when Storybook is enabled (`pnpm storybook`) versus disabled (`pnpm start`). When enabled, `index.js` is redirected to `.rnstorybook/index.tsx`, which calls `registerRootComponent(StorybookUIRoot)`. When disabled, `index.js` runs `App.tsx` and calls `registerRootComponent(App)`.

```mermaid
flowchart LR
  subgraph enabled [pnpm storybook]
    Enabled_indexJs[index.js] -->|"swap (resolver)"| SBIndex[.rnstorybook/index.tsx]
    SBIndex --> RegSB["registerRootComponent(StorybookUIRoot)"]
  end
  subgraph disabled [pnpm start]
    Disabled_indexJs[index.js] --> AppTsx[App.tsx]
    AppTsx --> RegApp["registerRootComponent(App)"]
  end
```

--------------------------------

### Example story in version 7 with Meta and StoryObj types

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Shows how to define a story using the Meta and StoryObj types imported from @storybook/react. The meta object uses satisfies to ensure type safety, and the story exports a Basic story with args.

```ts
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta = {
  component: Button,
  argTypes: {
    onPress: { action: 'pressed the button' },
  },
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  args: {
    text: 'Press me!',
  },
};
```

--------------------------------

### Story file with Meta and StoryObj from @storybook/react

Source: https://github.com/storybookjs/react-native/blob/next/skills/upgrading-react-native-storybook/references/from-6-5-to-7-6.md

Example of a story file using Meta and StoryObj types imported from @storybook/react, with a Basic story that sets the text argument.

```tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  args: {
    text: 'Press me!',
  },
};
```

--------------------------------

### Complete options reference

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/metro-configuration.md

Shows all available options for `withStorybook` with their defaults and comments. Options include `enabled`, `configPath`, `useJs`, `docTools`, `liteMode`, `websockets`, and `experimental_mcp`.

```javascript
module.exports = withStorybook(config, {
  enabled: true, // Include Storybook in the bundle (default: true)
  configPath: './.rnstorybook', // Storybook config directory (default: './.rnstorybook')
  useJs: false, // Generate .js instead of .ts (default: false)
  docTools: true, // Auto arg extraction (default: true)
  liteMode: false, // Mock default UI deps (default: false)
  websockets: 'auto', // WebSocket config (default: undefined)
  experimental_mcp: false, // Enable MCP endpoint (default: false)
});
```

--------------------------------

### Development Commands for Storybook React Native

Source: https://github.com/storybookjs/react-native/blob/next/CLAUDE.md

Shell commands for initial setup, development, story generation, testing, code quality, and documentation. Use these in the project root, except for documentation commands which are run from the docs/ directory.

```sh
# Initial Setup
pnpm install
pnpm build

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

# Story Generation
pnpm -F expo-example storybook-generate # Regenerate storybook.requires.ts

# Testing
pnpm test       # Run unit tests across all packages
pnpm test:ci    # Run tests in CI mode

# Code Quality
pnpm lint       # Run ESLint across the codebase
pnpm format:check   # Check Prettier formatting
pnpm format:fix     # Auto-fix Prettier formatting

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

--------------------------------

### Rebuild app after installing native module

Source: https://github.com/storybookjs/react-native/blob/next/packages/ondevice-notes/README.md

Commands to rebuild the app after installing react-native-enriched-markdown. For Expo, run 'npx expo prebuild'; for bare React Native, run 'cd ios && bundle exec pod install'.

```sh
# Expo
npx expo prebuild
```

```sh
# Bare React Native
cd ios && bundle exec pod install
```

--------------------------------

### Take screenshot after selecting story via WebSocket

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/websocket-configuration.md

Example showing how to take a screenshot after selecting a story via WebSocket. Uses an onopen handler to send the command and invoke a screenshot function.

```ts
const ws = new WebSocket('ws://localhost:7007');

async function takeScreenshot(name: string) {
  execSync(`xcrun simctl io booted screenshot --type png screenshots/${name}.png`);
}

ws.onopen = () => {
  console.log('connected');
  ws.send(
    JSON.stringify({
      type: 'setCurrentStory',
      args: [{ viewMode: 'story', storyId: 'button--basic' }],
    })
  );
  takeScreenshot('button-basic');
};
```

--------------------------------

### Configure Custom Theme with AsyncStorage

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/storybook-ui-configuration.md

Provides a complete custom theme configuration for the Storybook UI. It also includes AsyncStorage setup for persisting UI state, and shows all available theme properties such as colors, typography, input/button/boolean styles, layout margins, toolbar colors, and brand customization.

```ts
import { view } from './storybook.requires';
import AsyncStorage from '@react-native-async-storage/async-storage';

const StorybookUIRoot = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
  theme: {
    // Base theme type
    base: 'light', // or 'dark'

    // Text color for muted elements
    textMutedColor: '#5C6870',

    // Color palette
    color: {
      primary: '#FF4785',
      secondary: '#029CFD',
      tertiary: '#FAFBFC',

      // Status colors
      positive: '#66BF3C',
      negative: '#FF4400',
      warning: '#E69D00',

      // Text colors
      defaultText: '#2E3438',
      inverseText: '#FFFFFF',

      // Monochrome scale
      lightest: '#FFFFFF',
      lighter: '#F7FAFC',
      light: '#EEF3F6',
      medium: '#D9E8F2',
      dark: '#5C6870',
      darkest: '#2E3438',
    },

    // Background colors
    background: {
      app: '#F6F9FC',
      bar: '#FFFFFF',
      content: '#FFFFFF',
      preview: '#FFFFFF',
    },

    // Typography settings
    typography: {
      weight: {
        regular: '400',
        bold: '700',
      },
      size: {
        s1: 12,
        s2: 14,
        s3: 16,
        m1: 20,
        m2: 24,
        m3: 28,
        l1: 32,
        l2: 40,
        l3: 48,
      },
    },

    // Input field styling
    input: {
      background: '#FFFFFF',
      border: 'hsla(203, 50%, 30%, 0.15)',
      borderRadius: 4,
      color: '#2E3438',
      paddingHorizontal: 10,
      paddingVertical: 6,
    },

    // Button styling
    button: {
      background: '#F6F9FC',
      border: '#D9E8F2',
    },

    // Boolean control styling
    boolean: {
      background: '#ECF4F9',
      selectedBackground: '#FFFFFF',
    },

    // Layout and borders
    layoutMargin: 10,
    appBorderColor: 'hsla(203, 50%, 30%, 0.15)',
    appBorderRadius: 4,

    // Toolbar colors
    barTextColor: '#73828C',
    barHoverColor: '#029CFD',
    barSelectedColor: '#029CFD',
    barBg: '#FFFFFF',

    // Brand customization
    brand: {
      title: 'My App Storybook',
      url: 'https://myapp.com',
      image: require('./logo.png'), // or URI
    },
  },
});
```

--------------------------------

### Example package.json after upgrading to Storybook 10.x

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Shows the required devDependencies for Storybook React Native v10, including the core storybook package and on-device addons. Use this as a reference when updating your package.json.

```json
{
  "devDependencies": {
    "@storybook/react-native": "^10.0.0",
    "@storybook/react": "^10.0.0",
    "@storybook/addon-ondevice-controls": "^10.0.0",
    "@storybook/addon-ondevice-actions": "^10.0.0",
    "@storybook/addon-ondevice-backgrounds": "^10.0.0",
    "@storybook/addon-ondevice-notes": "^10.0.0",
    "storybook": "^10.0.0"
  }
}
```

--------------------------------

### Example dependency versions after upgrade to 7.6.10

Source: https://github.com/storybookjs/react-native/blob/next/skills/upgrading-react-native-storybook/references/from-6-5-to-7-6.md

Shows the recommended devDependencies for Storybook React Native packages after upgrading to 7.6.10 or newer. Ensure all listed packages are upgraded together and that @react-native-async-storage/async-storage is available for the new storage option.

```json
{
  "devDependencies": {
    "@storybook/react-native": "^7.6.10",
    "@storybook/addon-ondevice-actions": "^7.6.10",
    "@storybook/addon-ondevice-backgrounds": "^7.6.10",
    "@storybook/addon-ondevice-controls": "^7.6.10",
    "@storybook/addon-ondevice-notes": "^7.6.10"
  }
}
```

--------------------------------

### Add .storybook/main.js with stories and addons

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Create this file in your .storybook folder. Update the stories regex to match your project's story file locations and list the addons you want to use.

```jsx
// .storybook/main.js
module.exports = {
  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
  addons: [
    '@storybook/addon-ondevice-controls',
    '@storybook/addon-ondevice-actions',
    '@storybook/addon-ondevice-backgrounds',
  ],
};
```

--------------------------------

### Run pod install for iOS

Source: https://github.com/storybookjs/react-native/blob/next/MANUAL_SETUP.md

Required for iOS devices with React Native CLI to install native dependencies.

```sh
cd ios; pod install; cd ..;
```

--------------------------------

### package.json dependencies after upgrade to Storybook 10.x

Source: https://github.com/storybookjs/react-native/blob/next/skills/upgrading-react-native-storybook/references/from-9-to-10.md

Example package.json showing the required Storybook packages aligned on version 10.x. All packages must be updated together to maintain compatibility.

```json
{
  "devDependencies": {
    "storybook": "^10",
    "@storybook/react": "^10",
    "@storybook/react-native": "^10",
    "@storybook/addon-ondevice-controls": "^10",
    "@storybook/addon-ondevice-actions": "^10",
    "@storybook/addon-ondevice-backgrounds": "^10",
    "@storybook/addon-ondevice-notes": "^10"
  }
}
```

--------------------------------

### Configure Storybook server main.js

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Place this configuration in a `.storybook_server` folder with a `main.js` file. It should contain the same stories regex as your `.storybook/main.js` file.

```jsx
module.exports = {
  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
  env: () => ({}),
  addons: ['@storybook/addon-essentials'],
};
```

--------------------------------

### Wrap Metro config with withStorybook

Source: https://github.com/storybookjs/react-native/blob/next/README.md

Wrap your bundler config with the withStorybook function. It auto-detects Metro vs Re.Pack and handles entry-point swapping, story generation, and optional WebSocket setup. Place in metro.config.js.

```js
// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withStorybook } = require('@storybook/react-native/withStorybook');

const config = getDefaultConfig(__dirname);

module.exports = withStorybook(config);
```

--------------------------------

### Add Maestro scripts to package.json

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/testing.md

Add npm scripts to generate Maestro tests, run Maestro tests, and compare screenshots. The example uses Bun for running scripts to avoid ESM/CommonJS interop issues.

```json
{
  "scripts": {
    "generate-maestro-tests": "bun ./scripts/generate-maestro-tests.mts",
    "test:maestro": "maestro test .maestro/storybook-screenshots.yaml",
    "test:compare": "bun scripts/compare-screenshots.ts"
  }
}
```

--------------------------------

### Add notes via parameters

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/addons/index.md

Add markdown notes to a story using the parameters field. The example shows a heading, description, and a code snippet inside the notes string.

```ts
export default {
  component: MyComponent,
  parameters: {
    notes: `
      # Component Documentation
      This is a markdown description of the component.
      
      ## Usage
      ```tsx
      <MyComponent prop="value" />
      ```
    `,
  },
} satisfies Meta<typeof MyComponent>;
```

--------------------------------

### Install Storybook dependencies for React Native CLI

Source: https://github.com/storybookjs/react-native/blob/next/MANUAL_SETUP.md

Installs all required Storybook dependencies for a React Native CLI project.

```sh
yarn add -D @storybook/react-native @react-native-async-storage/async-storage react-native-safe-area-context react-dom react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg
```

--------------------------------

### CSF story example with Meta and StoryObj

Source: https://github.com/storybookjs/react-native/blob/next/README.md

Defines a story using the CSF syntax with a Meta object and a Basic story that passes args to MyButton. The meta uses satisfies Meta<typeof MyButton> and the story type is StoryObj<typeof meta>.

```tsx
import type { Meta, StoryObj } from '@storybook/react-native';
import { MyButton } from './Button';

const meta = {
  component: MyButton,
} satisfies Meta<typeof MyButton>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  args: {
    text: 'Hello World',
    color: 'purple',
  },
};
```

--------------------------------

### Install dependencies for range and date controls

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/addons/controls.md

Install the required React Native community packages for range and date controls: @react-native-community/slider and @react-native-community/datetimepicker.

```sh
npm install @react-native-community/slider @react-native-community/datetimepicker
```

--------------------------------

### Before: on-device addons in addons property

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Shows the previous configuration where on-device addons were listed in the addons array. This is the 'before' state for the migration to deviceAddons.

```ts
const main: StorybookConfig = {
  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
  addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],
};
```

--------------------------------

### Run sb-rn-get-stories with doc tools enabled

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/cli-configuration.md

Doc tools are included by default when running the command.

```sh
npx sb-rn-get-stories
# Doc tools included by default
```

--------------------------------

### Update package.json scripts for React Native CLI with STORYBOOK_ENABLED

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/getting-started/migrating-to-entry-point-swapping.md

Use these scripts for React Native CLI projects. Set STORYBOOK_ENABLED=true to start Storybook with react-native start.

```json
{
  "scripts": {
    "storybook": "STORYBOOK_ENABLED=true react-native start",
    "storybook:ios": "STORYBOOK_ENABLED=true react-native run-ios",
    "storybook:android": "STORYBOOK_ENABLED=true react-native run-android"
  }
}
```

--------------------------------

### Configure .rnstorybook/main.ts

Source: https://github.com/storybookjs/react-native/blob/next/packages/ondevice-controls/README.md

Add the Controls addon to the deviceAddons array in the Storybook configuration file.

```ts
import type { StorybookConfig } from '@storybook/react-native';

const main: StorybookConfig = {
  deviceAddons: ['@storybook/addon-ondevice-controls'],
};

export default main;
```

--------------------------------

### Install new required dependencies with Expo

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Use this command to install the new required dependencies for Expo projects. Make sure to use versions supported by your Expo/React Native version.

```sh
npx expo install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg
```

--------------------------------

### Build static website

Source: https://github.com/storybookjs/react-native/blob/next/docs/README.md

Generates static content into the `build` directory, which can be served using any static content hosting service.

```bash
$ pnpm build
```

--------------------------------

### composeStory usage example in Button.test.tsx

Source: https://github.com/storybookjs/react-native/blob/next/PORTABLE_STORIES.md

Example test using composeStory to create a story with all annotations, then render and interact with it using @testing-library/react-native. The test verifies that the onPress handler is called when the button is pressed.

```tsx
// Button.test.tsx
import { jest, test, expect } from '@jest/globals';
import { render, screen, userEvent } from '@testing-library/react-native';
import { composeStory } from '@storybook/react';

import meta, { Primary } from './Button.stories';

test('onclick handler is called', () => {
  // Returns a story which already contains all annotations from story, meta and global levels
  const PrimaryStory = composeStory(Primary, meta);

  const onPressSpy = jest.fn();

  render(<PrimaryStory onPress={onPressSpy} />);

  const user = userEvent.setup({});

  const actionButton = screen.getByText('Press me!');

  await user.press(actionButton);

  expect(onPress).toHaveBeenCalled();
});
```

--------------------------------

### Set up project annotations for portable stories

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/testing.md

Set up project annotations for stories that use global decorators or parameters. Create a setup-portable-stories.ts file and add it to the Jest setupFilesAfterEnv array.

```ts
// setup-portable-stories.ts
import { setProjectAnnotations } from '@storybook/react';
import * as previewAnnotations from '../.rnstorybook/preview';

setProjectAnnotations(previewAnnotations);
```

```javascript
// jest.config.js
const config = {
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts', '<rootDir>/setup-portable-stories.ts'],
};
```

--------------------------------

### Install new required dependencies with RN CLI

Source: https://github.com/storybookjs/react-native/blob/next/MIGRATION.md

Use this command to install the new required dependencies for React Native CLI projects. Make sure to use versions supported by your React Native version.

```sh
npm install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg
```

--------------------------------

### Create a new project with Storybook templates

Source: https://github.com/storybookjs/react-native/blob/next/packages/react-native/readme.md

These commands scaffold a new project using the provided Expo or React Native CLI templates that come pre-configured with Storybook.

```sh
npx create-expo-app --template expo-template-storybook AwesomeStorybook
```

```sh
npx @react-native-community/cli init MyApp --template react-native-template-storybook
```

--------------------------------

### sb-rn-get-stories --help option

Source: https://github.com/storybookjs/react-native/blob/next/docs/docs/intro/configuration/cli-configuration.md

Displays help information for the command.

```sh
npx sb-rn-get-stories --help
npx sb-rn-get-stories -h
```
Tokens:
Raw