🛠️ Setup

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

Install Sherlo

To install Sherlo, run:

npm

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

yarn

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

pnpm

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

Native Modules

Sherlo adds native modules. If you are not using Expo, run:

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

Storybook Component

To enable Sherlo interaction with Storybook, update the Storybook component

info

Storybook component is typically exported from .storybook config directory at your project root

.storybook/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 Entry Point

To provide Storybook access to Sherlo, use one of the following methods:

Custom Solution

If you can make a build that renders Storybook on launch, that's all we need

You can skip this step

Sherlo Solution

Update your Root component to:

• Enable automatic Storybook access for Sherlo
• Enable switching to Storybook 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 "./.storybook"; // 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

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

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

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