π§© 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
- Yarn
- pnpm
- Bun
- Deno
npm install -D @sherlo/react-native-storybook
yarn add -D @sherlo/react-native-storybook
pnpm add -D @sherlo/react-native-storybook
bun add -D @sherlo/react-native-storybook
deno add -D @sherlo/react-native-storybook
If your project has iOS native code, run:
cd ios
- to navigate to the 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