Skip to main content

Storybook

The example/ app is an Expo project that doubles as the Storybook host for the library.

npm run storybook          # expo start with Storybook enabled
npm run storybook:ios      # iOS simulator
npm run storybook:android  # Android emulator
npm run storybook:web      # web

How it works​

  • example/.rnstorybook/ holds main.ts (story globs + device addons), preview.tsx (decorators) and index.tsx (the Storybook UI root).
  • Stories live in example/stories/**/*.stories.tsx.
  • example/metro.config.js wraps the config with withNativeWind and withStorybook; Storybook is only enabled when EXPO_PUBLIC_STORYBOOK_ENABLED=true, otherwise the Storybook modules are stubbed out of the bundle.
  • example/App.tsx renders StorybookUIRoot when the flag is on, and a small playground screen otherwise.

Regenerating the story index​

After adding or renaming a story file:

cd example
npx sb-rn-get-stories -c ./.rnstorybook

Writing a story​

import type { Meta, StoryObj } from "@storybook/react-native";
import { Button } from "../../src/components/ui/button";

const meta = {
  title: "Components/Button",
  component: Button,
  args: { title: "Continue", onPress: () => {} },
  argTypes: {
    variant: { control: "select", options: ["primary", "secondary", "outline", "ghost"] },
  },
} satisfies Meta<typeof Button>;

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

export const Primary: Story = {};
export const Disabled: Story = { args: { disabled: true } };
note

The repository's example app imports the package while developing the library itself. For your app, add components with the CLI; Tailwind scans their copied source under src/.