🔧 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
Install Sherlo
To install Sherlo, run:
- npm
- yarn
- pnpm
npm install -D @sherlo/react-native-storybook
yarn add -D @sherlo/react-native-storybook
pnpm add -D @sherlo/react-native-storybook
Sherlo adds native modules. If you are not using Expo, run:
cd ios
to navigate to theios
folderpod install
to install the iOS dependencies
Storybook Component
To enable Sherlo to navigate through stories, update the Storybook component
Storybook component is typically exported from .storybook
config directory at your project root
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 launch Storybook, choose one of these options:
- Custom Solution
- Sherlo Solution
If you can make a build that renders Storybook on launch - that's it!
You can skip this step
Update your Root component to:
- Enable Sherlo automatic Storybook access
- Enable switching to Storybook via Dev Menu or
openStorybook()
Root component could be App.jsx
or app/_layout.jsx
, depending on your project structure
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()
openStorybook()
It's not supported by Expo Go, as it depends on native modules
Dev Menu - Available only in development builds
- Shake your device or press:
- iOS: Cmd ⌘+Ctrl+Z
- Android: Cmd ⌘+M
- 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