writing-react-native-storybook-stories_skill

Overview

This skill creates and edits React Native Storybook stories using @storybook/react-native v10 and the Component Story Format (CSF). It covers file conventions, arg/argTypes, parameters, decorators, addons, portable stories for testing, and configuration for on-device Storybook. Use it to author reliable, testable .stories.tsx files colocated with components.

How this skill works

I generate or update .stories.tsx files with a default meta export that satisfies Meta<typeof Component> and typed StoryObj stories. I add args for props, argTypes for controls, parameters for addons and RN-specific UI, decorators for wrappers, and render functions when needed. I can also adapt stories for portable testing with composeStories/composeStory and set up preview/main configuration files.

When to use it

• Adding new stories for a React Native component (.stories.tsx colocated with the component).
• Configuring controls, actions, backgrounds, notes, or other on-device addons.
• Creating custom render functions or decorators (providers, layout wrappers).
• Making portable stories for react-native testing with composeStories/composeStory.
• Setting Storybook parameters like layout, noSafeArea, or storybookUIVisibility.

Best practices

• Export a default meta object that uses satisfies Meta<typeof Component> and type stories as StoryObj<typeof meta>.
• Keep story names UpperCamelCase and use args for props to enable controls and portability.
• Use decorators for global wrappers in .rnstorybook/preview.tsx, and local decorators on meta for component-specific needs.
• Prefer useSafeAreaInsets and RN-specific parameters (noSafeArea) rather than wrapping every story in SafeAreaView.
• Reuse shared args (spread Primary.args) for consistency and smaller diffs; use composeStories in tests to render stories directly.

Example use cases

• Create Basic, Primary, and Secondary stories that share args and demonstrate variants.
• Wrap a story in a ScrollView via a custom render function to show scrollable layouts.
• Set argTypes to expose size as a select and color as a color picker for interactive controls.
• Add actions for callback props via args: { onPress: fn() } or argTypes: { onPress: { action: 'pressed' } }.
• Compose stories in Jest tests to render Primary and override args for unit tests.