Setup Storybook

[ihsan-ofluoglu]

Step 9: Adding Storybook

We need to initialize the Storybook on our project. We'll use automatic setup with a few edits:

npx -p @storybook/cli sb init --type react_native

yarn add -D react-native-storybook-loader

On device addons

On device addons are addons that are displayed in your app in addons panel. To use them you have to create a file called rn-addons.js in storybook directory. Because React Native does not dynamically resolve imports, you will also have to manually import this file before the getStorybookUI call.

yarn add @storybook/addon-ondevice-knobs yarn add @storybook/addon-ondevice-notes

Custom an entry file for Storybook.

// storybook/index.ts

import React from 'react';
import { getStorybookUI, configure, addDecorator } from '@storybook/react-native';
import { AppRegistry, View, Platform } from 'react-native';

import { loadStories } from './storyLoader';

import { name as appName } from '../app.json';

import './rn-addons';

const iosBarHeight = 20;

addDecorator(storyFn => (
  <View
    style={{
      paddingBottom: 16,
      backgroundColor: '#f7f7f7',
      flexGrow: 1,
      paddingTop: Platform.OS === 'ios' ? iosBarHeight + 16 : 16,
    }}
  >
    {storyFn()}
  </View>
));

// import stories
configure(() => {
  loadStories();
}, module);

const StorybookUIRoot = getStorybookUI({});

AppRegistry.registerComponent(appName, () => StorybookUIRoot);

export default StorybookUIRoot;

// package.json

"scripts": {
    "storybook": "watch rnstl ./src --wait=100 | start-storybook | yarn run start --projectRoot storybook --watchFolders $PWD"
},
"config": {
    "react-native-storybook-loader": {
      "searchDir": [
        "./src"
      ],
      "pattern": "**/*.stories.tsx",
      "outputFile": "./storybook/storyLoader.js"
    }
}

Finally:

yarn storybook