Storybook for React Native
A new docs site is being built for Storybook for React Native, you can find it at https://storybookjs.github.io/react-native/docs/intro/.
[!IMPORTANT]
This readme is for v10, for v9 docs see the v9.1 docs.
With Storybook for React Native you can design and develop individual React Native components without running your app.
If you are migrating from 9 to 10 you can find the migration guide here
For more information about storybook visit: storybook.js.org
[!NOTE]
Make sure you align your storybook dependencies to the same major version or you will see broken behaviour.
Table of contents
Getting Started
New project
There is some project boilerplate with @storybook/react-native and @storybook/addon-react-native-web both already configured with a simple example.
For Expo you can use this template with the following command
# With NPM
npx create-expo-app --template expo-template-storybook AwesomeStorybook
For React Native CLI you can use this template
npx @react-native-community/cli init MyApp --template react-native-template-storybook
Existing project
Run init to setup your project with all the dependencies and configuration files:
npm create storybook@latest
The only thing left to do is return Storybook's UI in your app entry point (such as App.tsx) like this:
export { default } from './.rnstorybook';
Then wrap your metro config with the withStorybook function as seen below
If you want to be able to swap easily between storybook and your app, have a look at this blog post
If you want to add everything yourself check out the manual guide here.
Additional steps: Update your metro config
We require the unstable_allowRequireContext transformer option to enable dynamic story imports based on the stories glob in main.ts. We can also call the storybook generate function from the metro config to automatically generate the storybook.requires.ts file when metro runs.
Expo
First create metro config file if you don't have it yet.
npx expo customize metro.config.js
Then wrap your config in the withStorybook function as seen below.
// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withStorybook } = require('@storybook/react-native/metro/withStorybook');
const config = getDefaultConfig(__dirname);
// For basic usage with all defaults, this is all you need
module.exports = withStorybook(config);
// Or customize the options
module.exports = withStorybook(config, {
// When false, removes Storybook from bundle (useful for production)
enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
// Path to your storybook config (default: './.rnstorybook')
configPath: './.rnstorybook',
// Optional websockets configuration for syncing between devices
// websockets: {
// port: 7007,
// host: 'localhost',
// },
});
React Native
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { withStorybook } = require('@storybook/react-native/metro/withStorybook');
const defaultConfig = getDefaultConfig(__dirname);
/**
* Metro configuration
* https://reactnative.dev/docs/metro
*
* @type {import('metro-config').MetroConfig}
*/
const config = {};
// set your own config here 👆
const finalConfig = mergeConfig(defaultConfig, config);
// For basic usage with all defaults
module.exports = withStorybook(finalConfig);
// Or customize the options
module.exports = withStorybook(finalConfig, {
// When false, removes Storybook from bundle (useful for production)
enabled: process.env.STORYBOOK_ENABLED === 'true',
storybookjs