トップ > ReactNative > React NativeでStorybookの導入が難しすぎた

React NativeでStorybookの導入が難しすぎた

ReactNative StoryBook Android iOS

某社インターンに参加した時にStorybookはいいぞと勧められ、触ってみようとしたらいろいろハマったのでまとめます。

React NativeにStorybookを導入する

  1. Getting Started · React Nativeの通りReact Nativeの雛形を作る
  2. storybookのcliをInstallして、getstorybookを実行する
$ npm i -g react-native-cli
$ react-native init HogeFuga
$ cd HogeFuga
$ npm i -g @storybook/cli
$ getstorybook
$ yarn run storybook

本来、これだけで終わるはずだった...

error: unknown option `--projectRoots'

yarn run storybookを実行すると

error: unknown option `--projectRoots'

というエラーでStorybookが起動しない...

github.com

どうやらReact NativeのバージョンアップでAPIが変更になったようだ

仕方がないので、React Nativeのバージョンを0.56.1に下げた

$ yarn add react-native@0.56.1

Module build failed: Error: Couldn't find preset "module:metro-react-native-babel-preset"

解決したと思い再度実行してみると

ERROR in ./storybook/addons.js
Module build failed: Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "path/to/HogeFuga/storybook"

というエラーが...

github.com

.babelrcの中身をからにすると良いらしい

diff --git a/.babelrc b/.babelrc
index d4b74b5..2c63c08 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,2 @@
{
-  "presets": ["module:metro-react-native-babel-preset"]
 }

三度目の正直...

$ yarn run storybook

無事、Storybookが起動！！

まとめ

触ったタイミングが悪かった

導入

$ npm i -g react-native-cli
$ npm i -g @storybook/cli
$ react-native init HogeFuga
$ cd HogeFuga
$ yarn add react-native@0.56.1  # 0.57.2 => 0.56.1
$ echo '{\n}' > .babelrc  # .babelrcを空に
$ getstorybook
$ yarn run storybook

環境