React Native for Webの0.7が出て、導入しやすくなった

More than 1 year has passed since last update.

2018/05/18に、React Native for Webの0.7.0がリリースされました。

https://github.com/necolas/react-native-web/releases/tag/0.7.0

（その直後、軽微な修正によるアップデートがちょこちょこ出ています）

これからReact Native for Web（以下、RN Web）を使い始める人にとっては、地味にありがたいアップデートのようです。

Babelプラグインが不要になった

これまでRN Webを使うためには、RN Web用のBabelプラグイン（babel-plugin-react-native-web）を使う必要がありました。これについては以前の記事も参照ください。

ところが0.7.0のリリースノートによると「Babel plugin is legacy.」とのことで、Babelプラグインは必須ではなくなりました。公式ドキュメントのInstallの節においても、yarn add --dev babel-plugin-react-native-webという手順が削除されています。

とはいえ、JavaScriptコードに書くimportの行において、fromをreact-nativeからreact-native-webに変換する必要があることは変わりません。よってBabelプラグインの代わりに、以下の様にWebpackの設定としてaliasを書く必要があります（このあたりは公式ドキュメントにも書いてあります）。

webpack.config.js

module.exports = {

  // （前略）もろもろの設定

  resolve: {

    alias: {

      'react-native': 'react-native-web'

    }

  }

}

なお既にBableプラグインを使っているなら、今まで通り使い続けても構いません。

flowとの併用がしやすくなった

これまでにRN Webを使いつつ、flowで型チェックをしようと人ならしばしば経験したであろうエラーが解消しました。

今までは、RNとRN Webをインストールしたプロジェクトに対し、何気なくflowもインストールして実行してみると、以下の様なエラーが大量に出ることがありました。

Error: node_modules/react-native/Libraries/Animated/src/nodes/AnimatedModulo.js:0

AnimatedModulo. Duplicate module provider

current provider. See: node_modules/react-native-web/dist/vendor/Animated/nodes/AnimatedModulo.js:0

RNとRN Webとで同名のモジュールが検出されているようで（？）、何やらflowに怒られまくります。¹

RN Webのバージョンを0.7.xに上げると、このエラーが解消します。

どうやらエラーの原因は@providesModuleというflow独自のJsDocタグに関係していたようで、以下のコミットにおいて削除されていました。

https://github.com/necolas/react-native-web/commit/18933724d65c146fbcf6d21bff00beced48843e4

見たところRNの方も、2018/04/25に削除されていました。

https://github.com/facebook/react-native/commit/d5e9e55fa38c574bce6c04cbcaf6b144b87fa17f

今までは両者のソースコードに@providesModuleが含まれていたことから、別々のパッケージに含まれているモジュールにも関わらず、flowによって同一視・重複扱いされたのではないでしょうか。ともあれ直った！