Core TypeScript types for defining stories, metadata, decorators, and preview configuration in Storybook React Native. These types are re-exported from @storybook/react for compatibility.
Defines metadata for a component’s stories including the component itself, default args, arg types, decorators, and parameters.
Type Definition import type { Meta } from '@storybook/react-native' ; type Meta < T = any > = { title ?: string ; component ?: T ; args ?: Partial < ComponentProps < T >>; argTypes ?: ArgTypes ; decorators ?: Decorator []; parameters ?: Parameters ; // ... and more };
Usage Basic Example
With All Options
import type { Meta } from '@storybook/react-native' ; import { Button } from './Button' ; const meta = { component: Button , args: { title: 'Click Me' , }, } satisfies Meta < typeof Button >; export default meta ;
Key Properties Optional custom title for the story group in the navigation. If omitted, the title is auto-generated from the file path. Example: 'Components/Button'
component
React.ComponentType<T>
required
The React component being documented. Used for auto-generating arg types and controls.
args
Partial<ComponentProps<T>>
Default argument values shared by all stories. Individual stories can override these.
Configuration for controls, including control types, options, and labels. argTypes : { variant : { control : 'select' , options : [ 'primary' , 'secondary' , 'tertiary' ], }, size : { control : 'radio' , options : [ 'small' , 'medium' , 'large' ], }, }
Array of decorators to wrap all stories. Useful for adding providers, themes, or layout containers.
Additional metadata and configuration options passed to addons and the Storybook runtime.
StoryObj Defines an individual story with its args, parameters, and other configuration. Used with Meta to create type-safe stories.
Type Definition import type { StoryObj , Meta } from '@storybook/react-native' ; type StoryObj < T = Meta > = { args ?: T extends Meta < infer C > ? Partial < ComponentProps < C >> : any ; parameters ?: Parameters ; decorators ?: Decorator []; render ?: ( args : any , context : StoryContext ) => React . ReactElement ; play ?: ( context : PlayFunctionContext ) => Promise < void >; // ... and more };
Usage Basic Stories
With Custom Render
import type { Meta , StoryObj } from '@storybook/react-native' ; import { Button } from './Button' ; const meta = { component: Button , } satisfies Meta < typeof Button >; export default meta ; type Story = StoryObj < typeof meta >; export const Primary : Story = { args: { title: 'Sign In' , }, }; export const Disabled : Story = { args: { title: 'Sign In' , disabled: true , }, };
Key Properties args
Partial<ComponentProps<T>>
Arguments (props) for this specific story. Merged with default args from Meta.
Story-specific parameters that override Meta-level parameters.
Story-specific decorators that wrap only this story.
render
(args: any, context: StoryContext) => React.ReactElement
Custom render function to control how the story is rendered. Receives args and context.
play
(context: PlayFunctionContext) => Promise<void>
Function to run interactions after the story renders. Note: Play functions are experimental in React Native.
Preview Defines global configuration for all stories including decorators, parameters, and global types.
Type Definition import type { Preview } from '@storybook/react-native' ; type Preview = { decorators ?: Decorator []; parameters ?: Parameters ; globalTypes ?: GlobalTypes ; // ... and more };
Usage import type { Preview } from '@storybook/react-native' ; import { View } from 'react-native' ; const preview : Preview = { decorators: [ ( Story ) => ( < View style = {{ padding : 16 }} > < Story /> </ View > ), ], parameters: { controls: { matchers: { color: / ( background | color ) $ / i , date: /Date $ / i , }, }, backgrounds: { default: 'light' , values: [ { name: 'light' , value: '#F8F8F8' }, { name: 'dark' , value: '#333333' }, ], }, }, }; export default preview ;
Key Properties Global decorators applied to all stories. These run before any story-level or meta-level decorators.
Global parameters available to all stories. Story and meta-level parameters can override these.
Defines global variables that can be controlled from the toolbar.
Decorator A function that wraps stories to add extra rendering context, such as providers, themes, or layout containers.
Type Definition import type { Decorator } from '@storybook/react-native' ; type Decorator < TArgs = Args > = ( Story : React . ComponentType , context : StoryContext < TArgs > ) => React . ReactElement ;
Usage Simple Decorator
Context-Aware Decorator
import type { Decorator } from '@storybook/react-native' ; import { View } from 'react-native' ; const withPadding : Decorator = ( Story ) => ( < View style = {{ padding : 20 }} > < Story /> </ View > ); export default withPadding ;
Parameters Story
React.ComponentType
required
The story component to be wrapped. Render this within your decorator.
Context object containing story metadata, args, globals, parameters, and more. Show Key Context Properties
The current args (props) for the story.
Global variables like backgrounds, viewport, etc.
Parameters from Meta and Story configuration.
Additional Types Other types exported from @storybook/react-native:
StoryFn import type { StoryFn } from '@storybook/react-native' ; // Legacy story format (prefer StoryObj) type StoryFn < TArgs = Args > = ( args : TArgs , context : StoryContext < TArgs >) => React . ReactElement ;
Args import type { Args } from '@storybook/react-native' ; // Generic args object type Args = Record < string , any >;
ArgTypes import type { ArgTypes } from '@storybook/react-native' ; // Configuration for controls type ArgTypes = Record < string , ArgType >;
Parameters import type { Parameters } from '@storybook/react-native' ; // Story parameters type Parameters = Record < string , any >;
Loader import type { Loader } from '@storybook/react-native' ; // Function to load data before story renders type Loader < TArgs = Args > = ( context : StoryContext < TArgs > ) => Promise < Record < string , any >>;
Complete Example import type { Meta , StoryObj , Decorator } from '@storybook/react-native' ; import { View } from 'react-native' ; import { fn } from 'storybook/test' ; import { Button } from './Button' ; // Define a decorator const withContainer : Decorator = ( Story ) => ( < View style = {{ padding : 20 }} > < Story /> </ View > ); // Define metadata const meta = { title: 'Components/Button' , component: Button , decorators: [ withContainer ], args: { onPress: fn (), }, argTypes: { variant: { control: 'select' , options: [ 'primary' , 'secondary' ], }, }, parameters: { backgrounds: { default: 'light' , }, }, } satisfies Meta < typeof Button >; export default meta ; // Define story type type Story = StoryObj < typeof meta >; // Define stories export const Primary : Story = { args: { title: 'Sign In' , variant: 'primary' , }, }; export const Secondary : Story = { args: { title: 'Create Account' , variant: 'secondary' , }, }; export const Disabled : Story = { args: { title: 'Sign In' , disabled: true , }, };
See Also