jakob-92746 v0.0.1
Storybook Example
You can use Storybook to test and share your component library quickly and easily! This example shows how to use Expo modules with Storybook CLI and Expo CLI.
Running with Storybook CLI
web only
This method runs your Expo components in a Storybook-React environment. This is different to Expo web, but may prove helpful as the Storybook-React community is more robust than the Storybook-React Native community.
- Create Expo project
expo init my-project
- You can use any template, we'll use the managed blank TypeScript project for this example.
cd
into the project and runnpx -p @storybook/cli sb init --type react
to bootstrap a new React project- Install the expo webpack config so we can add unimodules support
yarn add -D @expo/webpack-config
Create a custom webpack config
touch .storybook/webpack.config.js
const { resolve } = require("path"); const { withUnimodules } = require("@expo/webpack-config/addons"); module.exports = ({ config }) => { return withUnimodules(config, { projectRoot: resolve(__dirname, "../") }); };
Run
yarn add -D @expo/webpack-config
to get the webpack-config added.Run
yarn web
to try it out!- The example should open to
http://localhost:6006/
- The example should open to
- You may also want to add
storybook-static
to your.gitignore
š File Structure
Expo with Storybook CLI
āāā stories
ā āāā Example.stories.js ā”ļø A Storybook page to render
āāā .storybook
ā āāā config.js ā”ļø The entry point / config for a typical Storybook project.
ā āāā webpack.config.js ā”ļø The custom Webpack config used to add Expo support to Storybook CLI.
āāā assets ā”ļø All static assets for your project
āāā storybook-static ā”ļø Generated Storybook files (should be ignored)
āāā babel.config.js ā”ļø Babel config (should be using `babel-preset-expo`)
Running with Expo CLI
This method is universal :]
This project can be used for iOS, Android, and web! You may find that it's better to use it for native only, and to use the "Running with Storybook" method for web. Unlike the Expo + Next.js flow, you can use both web methods at the same time!
- Create Expo project
expo init my-project
- You can use any template, we'll use the managed blank TypeScript project for this example.
cd
into the project and runnpx -p @storybook/cli sb init --type react
to bootstrap a new React project.- Install the Storybook React Native package:
yarn add -D @storybook/react-native
- In your
App.tsx
orApp.js
import { configure, getStorybookUI } from "@storybook/react-native";
configure(() => {
// Since require.context doesn't exist in metro bundler world, we have to
// manually import files ending in *.stories.js
require("./stories");
}, module);
export default getStorybookUI();
Create a file for importing all of the stories (
stories/index.js
):touch stories/index.js
- Import all of your stories in this file. Ex:
// stories/index.js import "./1-Button.stories";
Register your stories for React Native:
// Example.stories.js
+ import { storiesOf } from '@storybook/react-native';
export const text = () => ( /_ Example JSX _/ );
// Register your story with the `module`, name, and React functional component.
+ storiesOf('Button', module).add('Text', text);
- Now run
expo start
to see it in action!
š File Structure
Storybook with Expo CLI
āāā stories
ā āāā index.js ā”ļø Native story imports
ā āāā Example.stories.js ā”ļø A Storybook page to render
āāā assets ā”ļø All static assets for your project
āāā App.tsx ā”ļø Entry Point for universal Expo apps
āāā app.config.js ā”ļø Expo config file
āāā babel.config.js ā”ļø Babel config (should be using `babel-preset-expo`)
š Notes
4 years ago