🧩 Integration

Requirements

To use Sherlo, ensure the following packages are installed:

• react-native - version 0.64.0 or higher
• @storybook/react-native - version 7.6.11 or higher

Dependencies

To install Sherlo, run:

npm

Terminal

npm install -D @sherlo/react-native-storybook

Yarn

Terminal

yarn add -D @sherlo/react-native-storybook

pnpm

Terminal

pnpm add -D @sherlo/react-native-storybook

Bun

Terminal

bun add -D @sherlo/react-native-storybook

Deno

Terminal

deno add -D @sherlo/react-native-storybook

Native Modules

If your project has iOS native code, run:

1. cd ios - to navigate to the folder
2. pod install - to install the iOS dependencies

Storybook Component

To enable Sherlo to navigate through stories, update the Storybook component

info

Storybook component is typically exported from .rnstorybook or .storybook at project root

.rnstorybook / index.js

import AsyncStorage from "@react-native-async-storage/async-storage";
import { getStorybook } from "@sherlo/react-native-storybook";
import { view } from "./storybook.requires";

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

export default Storybook;

Storybook Access

To enable Sherlo to access Storybook, choose one of these options:

Standalone Storybook

Provide a build that opens straight into Storybook

No app, no menu — Storybook only

Integrated Storybook

Update your Root component to enable Storybook access:

• when testing with Sherlo
• via Dev Menu or openStorybook()

info

Root component could be App.jsx or app/_layout.jsx, depending on your project structure

Root component

import { addStorybookToDevMenu, isStorybookMode } from "@sherlo/react-native-storybook";
import Storybook from "./.rnstorybook"; // updated Storybook component
import App from "./App"; // main App component

addStorybookToDevMenu();

export default function Root() {
  if (isStorybookMode) {
    return <Storybook />;
  }

  return <App />;
}

Access Storybook via Dev Menu or openStorybook()

It's not supported by Expo Go, as it depends on native modules

Dev Menu - Available only in development builds

1. Shake your device or press:

• iOS: Cmd ⌘+Ctrl+Z
• Android: Cmd ⌘+M

2. Click Toggle Storybook to show or hide Storybook

---

openStorybook() - Available in all builds

Add a button to open Storybook using the openStorybook() function:

openStorybook()

import { openStorybook } from "@sherlo/react-native-storybook";
import { Button } from "react-native";

function OpenStorybookButton() {
  return <Button title="Open Storybook" onPress={openStorybook} />
}

note

This is useful for internal distribution, as it can be accessed without running a development build