あいつの日誌β

働きながら旅しています。

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

Storybook for React Native

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

https://storybook.js.org/basics/guide-react-native/

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

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

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

Can't find variable: React

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

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

Missing 'module' parameter for story with a kind of 'CenteredView'. It will break your HMR

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

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

entry app

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

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

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

それから

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

https://github.com/storybooks/storybook/pull/4680

追記: merge されました。