Setup

Set up Sherlo in your React Native project by installing the SDK, updating your Metro config, and giving Sherlo access to Storybook.

Quick start

New to Sherlo? Run this instead of manual integration:

Terminal

npx sherlo init

Learn more

Check the minimum versions​

To use Sherlo, ensure the following packages are installed:

• react-native - version 0.74.0 or higher
• @storybook/react-native - version 8.0.0 or higher

Install the Sherlo SDK​

To install Sherlo, run:

npm

Terminal

npm install @sherlo/react-native-storybook

Yarn

Terminal

yarn add @sherlo/react-native-storybook

pnpm

Terminal

pnpm add @sherlo/react-native-storybook

Bun

Terminal

bun add @sherlo/react-native-storybook

Deno

Terminal

deno add @sherlo/react-native-storybook

Native modules

If your project has iOS native code, run:

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

Update your Metro config​

To enable Sherlo to control Storybook during testing, update your Metro config:

metro.config.js

const path = require("path");
const { getDefaultConfig } = require("@expo/metro-config");
const withStorybook = require("@storybook/react-native/metro/withStorybook");
const withStorybook = require("@sherlo/react-native-storybook/metro/withStorybook");

const defaultConfig = getDefaultConfig(__dirname);

module.exports = withStorybook(defaultConfig);

Give Sherlo access to Storybook​

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

Standalone

Provide a build that opens straight into Storybook.

Root component

import Storybook from "./.rnstorybook";

export default function App() {
  return <Storybook />;
}

No app, no menu - Storybook only.

Integrated

Update your Root component to enable Storybook access:

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

Root component

import { isStorybookMode } from "@sherlo/react-native-storybook";
import Storybook from "./.rnstorybook";

export default function App() {
  if (isStorybookMode) { // Checks if Storybook should be rendered
    return <Storybook />;
  }

  return <YourApp />;
}

Access Storybook via Dev Menu or openStorybook()

Not supported by Expo Go, as it depends on native modules.

The Toggle Storybook entry in the Dev Menu is registered automatically by the withStorybook wrapper.

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()

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.