Skip to main content
Core functions for starting, preparing, and managing your Storybook React Native instance.

​
start()

Initializes the Storybook runtime and returns a View instance that can be used to render the Storybook UI.

​
Signature

function start({
  annotations,
  storyEntries,
  options,
}: {
  storyEntries: (NormalizedStoriesSpecifier & { req: any })[];
  annotations: any[];
  options?: ReactNativeOptions;
}): View

​
Parameters

​
annotations
any[]
required
Array of preview annotations (configurations, decorators, parameters) from your .storybook/preview.tsx or other preview files.
​
storyEntries
(NormalizedStoriesSpecifier & { req: any })[]
required
Array of story specifiers with their corresponding require contexts. This is typically generated by the Metro or Webpack bundler.
​
options
ReactNativeOptions
Optional React Native-specific configuration.

​
Returns

​
View
View
A View instance that manages the Storybook UI and story rendering. Call getStorybookUI() on this instance to get the React component.

​
Example

.storybook/index.tsx
import { start } from '@storybook/react-native';
import { view } from './storybook.requires';

const StorybookUIRoot = view.getStorybookUI();

export default StorybookUIRoot;

​
prepareStories()

Processes story entries and creates a story index with an import map. This is typically called internally by start() but can be used for advanced use cases.

​
Signature

function prepareStories({
  storyEntries,
  options,
  storySort,
}: {
  storyEntries: (NormalizedStoriesSpecifier & { req: any })[];
  options?: ReactNativeOptions;
  storySort?: Addon_StorySortParameterV7;
}): {
  index: StoryIndex;
  importMap: Record<string, any>;
}

​
Parameters

​
storyEntries
(NormalizedStoriesSpecifier & { req: any })[]
required
Array of story specifiers with their corresponding require contexts.
​
options
ReactNativeOptions
React Native-specific configuration options.
​
storySort
Addon_StorySortParameterV7
Function or configuration object for sorting stories in the navigation.

​
Returns

​
index
StoryIndex
The generated story index containing all discovered stories with their metadata.
​
importMap
Record<string, any>
Map of import paths to their story exports, used for lazy loading stories.

​
Example

import { prepareStories } from '@storybook/react-native';

const { index, importMap } = prepareStories({
  storyEntries: normalizedStories,
  options: { playFn: false },
  storySort: {
    order: ['Introduction', 'Components', '*'],
  },
});

console.log('Total stories:', Object.keys(index.entries).length);

​
getProjectAnnotations()

Creates a function that composes project annotations (render functions, decorators, parameters) for the Storybook instance.

​
Signature

function getProjectAnnotations(
  view: View,
  annotations: any[]
): () => Promise<ProjectAnnotations<ReactRenderer>>

​
Parameters

​
view
View
required
The View instance managing the Storybook UI.
​
annotations
any[]
required
Array of preview annotations to compose.

​
Returns

​
function
() => Promise<ProjectAnnotations<ReactRenderer>>
An async function that returns the composed project annotations including the default React Native render function.

​
Example

import { getProjectAnnotations } from '@storybook/react-native';

const getAnnotations = getProjectAnnotations(view, [
  preview1,
  preview2,
]);

const annotations = await getAnnotations();

​
updateView()

Updates an existing View instance with new annotations or story entries. Useful for hot module replacement or dynamic story updates.

​
Signature

function updateView(
  viewInstance: View,
  annotations: any[],
  normalizedStories: (NormalizedStoriesSpecifier & { req: any })[],
  options?: ReactNativeOptions
): void

​
Parameters

​
viewInstance
View
required
The existing View instance to update.
​
annotations
any[]
required
New array of preview annotations.
​
normalizedStories
(NormalizedStoriesSpecifier & { req: any })[]
required
Updated array of story specifiers.
​
options
ReactNativeOptions
React Native-specific configuration options.

​
Example

import { updateView } from '@storybook/react-native';

// After initial setup
if (module.hot) {
  module.hot.accept(() => {
    updateView(
      viewInstance,
      newAnnotations,
      newStoryEntries,
      { playFn: false }
    );
  });
}

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us