最近React NativeでStorybookを導入することがあったので、Tutorialを進める上でつまずいたことを書き記していきます。
Storybookとは？
UIコンポーネントをアプリと独立して開発できるフレームワークです。
GUIのパーツ集のような形でカタログとして扱ったり、コンポーネントの単体テスト目的でも利用されます。
GithubやDropbox、Airbnbといった有名な企業でも使われているようですね。
Storybook React Native向けのTutorial通りに動かない
StorybookにはReactやReact Native、Vueといった各フレームワーク用にそれぞれTutorialを用意してくれています。
初学者にとってTutorialはありがたいですよね！
でも、React NativeのTutorialでは問題がたくさんあり、うまく動かないケースが多々ありました。。。
yarn storybook がまったく機能しない
yarn storybookとコンソールに打てば、Storybookのサーバーが起動して、UIコンポーネントのカタログ集が見れるといった説明があります。
ただ、実際に実行してもUIコンポーネント候補をロード中で、いくら待っても表示されず。
似た現象がちらほら起きているようで、解決するケースもあるようです。
僕が出会ったケースだと上のURLで提示された解決方法では治らず。
ちなみに、npmで環境を構築した場合も同様の現象が発生しました。
テストが通らない
TutorialではUI的なテストはStorybookで、制御周りのテストはjestのようなテストフレームワークで確認しましょう、ということが説明されています。
実際に、jestでのサンプルコードが記載されていますが、実際に実行してみると動かず。。。
Storybookの導入をしたかったので、ここはもう気にせずノータッチで進めました。
Storybookを動かすためには
今回、yarn storybookで動かすのは諦めて、yarn ios やyarn androidでエミュレーター上で動かすようにしました。
react-native-webを導入できれば、ブラウザー上でも確認できるようですが、僕の環境だと他のライブラリとバージョンの競合が起きたため、断念。
1. App.tsx(or js)でStorybookのコンポーネントを読み込み
必要なのはこれだけ。
ただし、事前にこちらを実行をしておく必要あります。
npx -p @storybook/cli sb init --type react_native
（Tutorialの頭の方を実行してればOK）
2. yarn ios / android で実行
あとは
yarn ios (or android)
で実行するのみ。
実行した結果はこちら。
備考
App.tsxでStorybookコンポーネントを呼び出すと、通常のアプリ（リリースしたいアプリ）が起動できないですよね。
だから、環境変数などで通常アプリとStorybookを両立しようとすると、僕の環境ではなぜか通常アプリ側のAmplifyで問題が発生しました。
色々試してみましたが、最終的にはApp.tsxの中で切り替えるのではなく、モードごとにApp.tsxを書き換えることで対応ができました。
あらかじめStorybook用のApp.tsxを準備して、yarn switch-storybookみたいな形で切り替えられるようにすると便利です。