React Native Storybook Stories

Write stories for React Native components using @storybook/react-native v10 and Component Story Format (CSF).

Quick Start

Minimal story file:

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

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

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

export const Basic: Story = {
  args: {
    label: 'Hello',
  },
};

File Conventions

• Name: ComponentName.stories.tsx colocated with the component
• Import Meta and StoryObj from @storybook/react-native
• Default export: meta object with satisfies Meta<typeof Component>
• Named exports: UpperCamelCase story names, typed as StoryObj<typeof meta>
• Use args for props, argTypes for control config, parameters for addon config
• Use render for custom render functions, decorators for wrappers

Story Patterns

Multiple stories with shared args

export const Primary: Story = {
  args: { variant: 'primary', title: 'Click me' },
};

export const Secondary: Story = {
  args: { ...Primary.args, variant: 'secondary' },
};

Custom render function

export const WithScrollView: Story = {
  render: (args) => (
    <ScrollView>
      <MyComponent {...args} />
    </ScrollView>
  ),
};

Render with hooks (must be a named function)

export const Interactive: Story = {
  render: function InteractiveRender() {
    const [count, setCount] = useReducer((s) => s + 1, 0);
    return <Counter count={count} onPress={setCount} />;
  },
};

Actions (mock callbacks)

import { fn } from 'storybook/test';

const meta = {
  component: Button,
  args: { onPress: fn() },
} satisfies Meta<typeof Button>;

Or via argTypes:

argTypes: { onPress: { action: 'pressed' } },

Custom story name

export const MyStory: Story = {
  storyName: 'Custom Display Name',
  args: { label: 'Hello' },
};

Custom title / nesting

const meta = {
  title: 'NestingExample/Message/Bubble',
  component: MyComponent,
} satisfies Meta<typeof MyComponent>;

Controls & ArgTypes

For the full control type reference, see references/controls.md.

Common patterns:

const meta = {
  component: MyComponent,
  argTypes: {
    // Select dropdown
    size: {
      options: ['small', 'medium', 'large'],
      control: { type: 'select' },
    },
    // Range slider
    opacity: {
      control: { type: 'range', min: 0, max: 1, step: 0.1 },
    },
    // Color picker
    color: { control: { type: 'color' } },
    // Conditional control (shows only when `advanced` arg is true)
    padding: { control: 'number', if: { arg: 'advanced' } },
  },
} satisfies Meta<typeof MyComponent>;

Auto-detection: TypeScript prop types are automatically mapped to controls (string -> text, boolean -> boolean, union types -> select, number -> number).

Parameters

Addon parameters

parameters: {
  // Markdown docs in the Notes addon tab
  notes: `# MyComponent\nUsage: \`<MyComponent label="hi" />\``,
  // Background options for Backgrounds addon
  backgrounds: {
    default: 'dark',
    values: [
      { name: 'light', value: 'white' },
      { name: 'dark', value: '#333' },
    ],
  },
},

RN-specific UI parameters

Parameters can be set at story, meta (component), or global (preview.tsx) level.

Decorators

Wrap stories in providers, layouts, or context:

const meta = {
  component: MyComponent,
  decorators: [
    (Story) => (
      <View style={{ alignItems