Writing React Native Storybook Stories

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' },
};