React Native Storybook Generator

React Native Storybook Generator is a VS Code extension that helps you quickly create Storybook stories for your React Native components. This extension parses your TypeScript or JavaScript components and automatically generates corresponding Storybook stories with the necessary setup.

Features

• Automatic Story Generation: Automatically generates Storybook stories for your React Native components.
• Support for Various Prop Types: Handles different prop types, including functions, enums, and complex types.
• Children Prop Handling: Detects and includes the children prop in the generated stories.
• Decorators: Adds default decorators for consistent layout and styling across your stories.
• Configurable: Supports custom configurations for handling various React Native component setups.

How to Use

1. Install the Extension: Search for React Native Storybook Generator in the VS Code Extensions Marketplace and install it.

2. Open a React Native Component: Open the file containing the React Native component for which you want to generate a Storybook story.

3. Run the Command:

   • Open the Command Palette (Cmd + Shift + P on macOS or Ctrl + Shift + P on Windows/Linux).
   • Type React Native Storybook Generator: Create Story and select the command.

4. Select the Component: If your file exports multiple components, you'll be prompted to select the component for which you want to generate the story.

5. Review the Generated Story: The generated story will appear in a new file in your project, ready for customization or use as-is.

Example

Here’s a simple example of a generated Storybook story for a SectionView component:

import React from "react";
import { View, Text } from "react-native";
import type { Meta, StoryObj } from "@storybook/react-native";

import { SectionView } from "./SectionView";

const meta: Meta<typeof SectionView> = {
  title: "Components/SectionView",
  component: SectionView,
  args: {},
  decorators: [
    (Story) => (
      <View style={{ alignItems: "center", justifyContent: "center", flex: 1 }}>
        <Story />
      </View>
    ),
  ],
};
export default meta;

type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  args: {},
  render: (args) => (
    <SectionView {...args}>
      <Text>Sample Child Content</Text>
    </SectionView>
  ),
};