Storybook for React Native v4.0.2 を動かした時のメモ

expo と React Storybook for React Native を使った時の備忘録です。

Expo

expo は以下のコマンドで使えるようになります。

npm install -g expo-cli

expo を使って iOS のエミュレータを起動したりするなどできます。

expo init AwesomeProject
cd AwesomeProject
npm start

さて、既存の React Native のプロジェクトが出来たので以下のドキュメントを参考にして Storybook を追加します。

なんですが、ドキュメントには不備があり、以下の Error と Warning が発生します。

ReferenceError: Can't find variable: React
Missing 'module' parameter for story with a kind of 'CenteredView'. It will break your HMR

少しドキュメントが不明瞭だったので以下に実際にした作業を記します

storybook/stories/index.js に import React from 'react'; を追加します

import { storiesOf } from '@storybook/react-native';
+ import React from 'react';
import { View, Text } from 'react-native';

storybook/stories/index.js の storiesOf の引数に module を追加します。

-storiesOf('CenteredView')
+storiesOf('CenteredView', module)

expo の場合だと App.js を以下のように書き換えます。

import StorybookUI from './storybook';
export default StorybookUI

これで動作すると思います。

一応PRしておきました。もし同じようなエラーメッセージが出てしまった場合は参考にして見てください。

追記: merge されました。