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によって同一視・重複扱いされたのではないでしょうか。ともあれ直った！

Getting startedのドキュメントが結構改訂された

先述のBabelプラグインに関することでだけでなく、公式ドキュメントのGetting startedがあちこち改訂されており、どうやってRN Webを使い始めるかが分かりやすくなっている印象があります。

既にRN Webを使っている人も、一度見直してはいかがでしょうか。
特に、これからRN Webのバージョンを上げようとするなら、思わぬトラブルを回避するためにも目を通した方がよいでしょう。

当時途方に暮れた私は、とりあえずの回避策として.flowconfigの[ignore]のところに.*/node_modules/react-native-web/.*と書いて、エラーを黙らせていました。 ↩

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

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

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

Getting startedのドキュメントが結構改訂された