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

環境

Android Studioを更新したらProjectが読み込めなくなった

Kotlin Android

Android Studioを2.2.3に更新したところ Cannot load project: com.intellij.ide.plugins.PluginManager$StartupAbortedException: com.intellij.diagnostic.PluginException: org/jetbrains/android/uipreview/AndroidLayoutPreviewToolWindowManager [Plugin: org.jetbrains.kotlin.android.dsl] というエラーでProjectが読み込めなくなった。

その時の環境(略)はこんな感じ。

Android Studio 2.2.3
Build #AI-145.3537739, built on December 2, 2016
JRE: 1.8.0_112-release-b05 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Kotlin: 1.0.6-release-Studio2.2-1
Anko DSL Preview: v0.9b

エラーでググるとAnko DSL Previewが原因ぽい(Android Studio 2.1.3ですでにこの問題が起こっていたらしい)。 stackoverflow.com

Anko DSL Previewをuninstallすると無事読み込めました。

2日前にissue立ってました。 Anko DSL Preview Plugin can not work in androidStudo 2.2.3 · Issue #293 · Kotlin/anko · GitHub