🛠️ Setup

Requirements

To use Sherlo, ensure the following packages are installed:

• react-native - version 0.69.7 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 --dev @sherlo/react-native-storybook

pnpm

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

Update Storybook Component

To enable Sherlo interaction with Storybook, update the Storybook component exported from its config directory.

Use the withSherlo() function as shown below.

info

React Native Storybook config directory is typically named .storybook or .ondevice and is located in your project's root.

.storybook/index.ts

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

const params = {
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
};

- const Storybook = view.getStorybookUI(params);
+ const Storybook = withSherlo(view, params);

export default Storybook;

Preserving Storybook state

Define the storage in params to preserve Storybook state during app resets or when toggling its visibility.

Handle Storybook Entry Point

To grant Sherlo access to your Storybook, pass its entry point using one of the following methods:

• use Sherlo withStorybook() function, or
• set Storybook separate entry point

Sherlo withStorybook() function

This method generates a single build that includes both your App and Storybook, with the ability to toggle between them as necessary.

To implement, use withStorybook() in your project's root App.ts as shown below.

App.ts

import App from "./app"; // Main application component

let EntryPoint = App;

if (process.env.STAGE !== "production") {
  const withStorybook = require("@sherlo/react-native-storybook").withStorybook;
  const Storybook = require("./.storybook").default;

  EntryPoint = withStorybook(App, Storybook);
}

export default EntryPoint;

Accessing Storybook

You can access Storybook via Dev Menu or openStorybook().

Dev Menu

Available only in development builds

1. Shake your device or press:
   • iOS: Cmd ⌘+Ctrl+Z
   • Android: Ctrl+M
2. Click Toggle Storybook to show or hide Storybook.

openStorybook()

Available in all builds

You can add a button visible in non-production builds to launch Storybook by calling openStorybook() from @sherlo/react-native-storybook library.

This is useful for sharing builds with others, allowing easy access without running development builds locally.

Storybook separate entry point

This method generates two separate builds: one for your App and another for Storybook, keeping environments isolated.

App.ts

let EntryPoint;

if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true") {
  const Storybook = require("./.storybook").default;

  EntryPoint = Storybook;
} else {
  const App = require("./app").default;

  EntryPoint = App;
}

export default EntryPoint;

caution

Make sure to provide build with Storybook entry point when preparing builds.