react nativeでstorybook動かしたい

storybookってなんぞや？

storybook(公式サイト)とはコンポーネント毎のスタイルガイドを作ることができるツールの一つです。
コンポーネントのカタログ集みたいなイメージです。
デザイナーと開発者の認識のズレをなくすためのツールとして使うことが多いようです。

開発環境

react native cli ... 2.0.1
react native ... 0.59.4
@storybook/react-native ... 4.1.18
react-native-storybook-leader ... 1.8.0

早速実装してみる

まずはnpm install

ターミナル

$ npm install --save-dev @storybook/react-native

通常通りコンポーネントを作成する。

/src/compoennts/atoms/button.js

import React from 'react'
import PropTypes from 'prop-types'
import { TouchableHighlight } from 'react-native'

export default function Button({ onPress, children }) {
  return <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>
}

Button.defaultProps = {
  children: null,
  onPress: () => {}
}

Button.propTypes = {
  children: PropTypes.node,
  onPress: PropTypes.func
}

作成したコンポーネントがあるディレクトリにindex.stories.jsがあることを確認する。
index.stories.jsを用意し作成したコンポーネントをimportする。

/src/components/atoms/index.stories.js

import React from 'react'
import { Text } from 'react-native'
import { storiesOf } from '@storybook/react-native'
import Button from './Button'

storiesOf('Button', module)
  .add('with text', () => (
    <Button onPress={() => {}}>
      <Text>Hello Button</Text>
    </Button>
  ))

今後は複数のディレクトリを参照していきたいのでreact-native-storybook-loaderを導入する。

ターミナル

$ npm install --save-dev react-native-storybook-loader

react-native-storybook-loaderは複数のディレクトリをstorybookにしたい時に便利なパッケージです。
設定をpackage.jsonのconfigに書きます。

package.json

{
    ...
    "scripts": {
        ...
        "prestorybook": "rnstl",
        "storybook": "storybook start"
    },
    "config": {
        "react-native-storybook-loader": {
            "searchDir": [     // 検索対象のディレクトリ
                "./src"        // 今回はsrcの中を検索する
            ],
            "pattern": "**/*.stories.js", 　// どういう形のファイルが対象なのか
            "outputFile": "./storybook/storyLoader.js" // アウトプット先のファイル
        }
    },
    ...
}

storybookを起動する。

ターミナル

$ npm run storybook

http://localhost:7007 にアクセス
別ターミナル (storybookを終了しない)でreact nativeを起動する

別ターミナル

$ react-native run-ios

↑simulator画面

↑ブラウザ(localhost:7007)画面

まとめ

これでstorybookが開発を妨げることが少なくなりました。
今後もどんどん開発しやすくしていきたいです!