はじめに

storybook を用いると UI Component の色やサイズの変化をチェックできます。
デザイナーや非エンジニアの人たちと、プロダクトのイメージを合わせながら作業するのに便利です。

私の場合、 React + Storybook のセッティングはすんなりできたのですが、 React Native + Storybook で少し詰まることがあったので、その内容を記事にしました。

環境を構築する

基本的にはガイドにしたがって進めます。
まずは React Native のプロジェクトを開始します。

$ react-native init APP_NAME
$ cd APP_NAME

プロジェクトに @storybook/react-native を追加します。

$ yarn add -D @storybook/react-native

ディレクトリを作成します。（stories には ***.stories.js ファイルを格納します。)

$ mkdir -p storybook/stories

エントリーファイルを作成します。

$ touch storybook/index.js

storybook/index.js は以下のようにしてみました。(ガイドとは違います)

import React from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import { addDecorator, getStorybookUI, configure } from '@storybook/react-native';
import { loadStories } from './storyLoader';

addDecorator((storyFn) => <View style={styles.container}>{storyFn()}</View>);
configure(loadStories, module);

const StorybookUI = getStorybookUI({});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

const StorybookUIRoot = StorybookUI;

export default StorybookUIRoot;

storybook/stories/***.stories.js に、作成する story の内容を追加します。(ここでは割愛)

次に story を自動で読み込むために storyLoader の設定をします。

$ yarn add -D react-native-storybook-loader

package.json に下記の設定を追加します。

  "scripts": {
    ~~~ 略 ~~~
    "prestorybook": "rnstl",
    "storybook": "storybook start -c ./storybook",
    ~~~ 略 ~~~
  },
  "config": {
    "react-native-storybook-loader": {
      "searchDir": [
        "./storybook/stories"
      ],
      "pattern": "**/*.stories.js",
      "outputFile": "./storybook/storyLoader.js"
    }
  },

これにより、 storyLoader.js を自動生成できます。

ルートディレクトリにある index.js も修正します。
Storybook を開きたいときは isUsingStorybook を true に、アプリを開きたいときは false に設定します。

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

import StorybookUIRoot from './storybook';

const isUsingStorybook = true;
// const isUsingStorybook = false;
const rootComponent = isUsingStorybook ? StorybookUIRoot : App;
AppRegistry.registerComponent(appName, () => rootComponent);

ボタンでトグルして呼び出すコンポーネントを変えるようにすれば、手動で切り替える必要性はなくなります。(今回は割愛)

Storybook を起動する

metro bundler を起動します。

$ yarn storybook

その状態で、エミュレータを起動します。

$ react-native run-ios

起動したら localhost:7007 にアクセスして、 Storybook を確認します。
私のケースでは、エミュレータが起動するまで、左パネルに story の一覧が表示されませんでした。

エミュレータ起動後は story の一覧が表示され、選択した内容がエミュレータに表示されるようになりました。

おわりに

通常の React Project の場合は、 yarn storybook コマンドだけで story の一覧が表示されました。
そのため、はじめて React Native で起動した際、表示されないのは設定ミスがあるのでは？と試行錯誤しました。

エミュレータを起動してあげて初めて利用可能とわかるまで、ちょっとハマって悩んでしまったので備忘録も兼ねて記事にしました。

React Native で Storybook を利用する

はじめに

環境を構築する

Storybook を起動する

おわりに