Skip to main content
The getStorybookUI() method is called on a View instance returned by the start() function. It returns a React component that renders your Storybook UI.

​
Usage

import { start } from '@storybook/react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const view = start({
  annotations: [/* your preview configs */],
  storyEntries: [/* your story specifiers */],
});

const StorybookUIRoot = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
});

export default StorybookUIRoot;

​
Parameters

​
params
Partial<Params>
default:"{}"
Configuration options for the Storybook UI
​
onDeviceUI
boolean
default:"true"
Enable or disable the on-device UI. When false, only the story component is rendered without navigation.
​
hasStoryWrapper
boolean
default:"true"
Set as false to disable the wrapper around the story view.
This may be removed in the future for a better solution.
​
enableWebsockets
boolean
default:"false"
Enable websockets to allow the Storybook server to remotely control the app.
​
host
string
default:"Platform-specific"
The host for the websocket server.Defaults to:
  • Android: 10.0.2.2
  • iOS/other: localhost
Can also be set via globalThis.STORYBOOK_WEBSOCKET.host
​
port
number
default:"7007"
The port for the websocket server.Can also be set via globalThis.STORYBOOK_WEBSOCKET.port
​
secured
boolean
default:"false"
Use wss:// instead of ws:// for websocket connections.
​
query
string
default:""
Additional query string to append to the websocket URL.
​
initialSelection
InitialSelection
default:"undefined"
The initial story to display when Storybook loads.Can be either:
  • A story ID string: "component--story"
  • An object with kind and name: { kind: "Component", name: "Story" }
​
shouldPersistSelection
boolean
default:"true"
Whether to persist the selected story between app restarts using the provided storage.
​
storage
Storage
required
Storage implementation for persisting story selection.
interface Storage {
  getItem: (key: string) => Promise<string | null>;
  setItem: (key: string, value: string) => Promise<void>;
}
Typically use @react-native-async-storage/async-storage:
import AsyncStorage from '@react-native-async-storage/async-storage';

storage: {
  getItem: AsyncStorage.getItem,
  setItem: AsyncStorage.setItem,
}
​
theme
ThemePartial
default:"{}"
Custom theme overrides to customize the appearance of Storybook.See Theme Customization for details.
​
CustomUIComponent
SBUI
default:"undefined"
A custom UI component to replace the default Storybook UI.The component receives these props:
  • story: Current story context
  • storyHash: All stories organized by hierarchy
  • setStory: Function to change stories
  • storage: Storage instance
  • theme: Applied theme
  • storyBackgroundColor: Current background color (if backgrounds addon enabled)
  • children: The StoryView component

​
Return Value

​
StorybookUIRoot
React.ComponentType<{}>
A React component that renders the configured Storybook UI.This component should be exported as your app’s root component:
export default StorybookUIRoot;

​
Examples

​
Minimal Configuration

import { start } from '@storybook/react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const view = start({
  annotations: [/* ... */],
  storyEntries: [/* ... */],
});

const StorybookUIRoot = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
});

export default StorybookUIRoot;

​
With Websockets for Remote Control

const StorybookUIRoot = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
  enableWebsockets: true,
  host: '192.168.1.100', // Your dev machine IP
  port: 7007,
});

​
Story-Only Mode (No UI)

const StorybookUIRoot = view.getStorybookUI({
  onDeviceUI: false,
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
  initialSelection: 'button--primary',
});

​
With Initial Story

const StorybookUIRoot = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
  initialSelection: {
    kind: 'Button',
    name: 'Primary',
  },
});

​
With Custom Theme

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

const StorybookUIRoot = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
  theme: {
    ...darkTheme,
    color: {
      ...darkTheme.color,
      primary: '#00FF00',
    },
  },
});

​
Deep Linking Support

The returned component automatically supports deep linking to specific stories using the sbstoryid query parameter: 
myapp://storybook?sbstoryid=button--primary
Configure deep linking in your app: 
// app.json (Expo)
{
  "expo": {
    "scheme": "myapp"
  }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us