実はReact Native公式ドキュメントでReact Native for Webが使われている

2019年8月追記：
[Expo SnackがWeb対応した](https://blog.expo.io/expo-sdk-34-is-now-available-4f7825239319)ことを受けて、React Native公式ドキュメントのライブプレビューはreact-native-web-playerからExpo Snackに戻りました。

![スクリーンショット 2019-08-08 15.01.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2276/ff568aac-ba58-c466-77c0-e689bce20895.png)
http://facebook.github.io/react-native/docs/activityindicator

記事の内容は古くなってしまいましたが、React Native for Webが内部で使われていることに変更はありません。

React Native公式ドキュメントのプレビューを支える技術
----------

[React Nativeの公式ドキュメント](https://facebook.github.io/react-native/docs/activityindicator)では、コンポーネントの実際の表示をWeb上で確認できるプレビューが用意されています。

少し前までは[Appetize.io](https://appetize.io/)が使われていて、実機のスクリーンキャストらしきものを見ることができていました。今でも[Expo Snack](https://snack.expo.io/)はAppetizeを使っています（下図）。

<img width="480" alt="スクリーンショット_2018-09-04_13_49_02.png" src="https://qiita-image-store.s3.amazonaws.com/0/2276/ff33855d-c28d-79ac-5f42-543604e0758a.png">

さて、現在の公式ドキュメントでは、次のような表示に変わっています。

<img width="480" alt="スクリーンショット_2018-09-04_13_41_38.png" src="https://qiita-image-store.s3.amazonaws.com/0/2276/c3f23311-8602-bfc6-430c-71c98cfadbf1.png">

これはどうもAppetizeっぽくないですね……ちょっとDev Toolsを見てみます。

<img width="480" alt="スクリーンショット_2018-09-04_14_00_09.png" src="https://qiita-image-store.s3.amazonaws.com/0/2276/e2fb8ee3-be18-ca26-c6f8-1e76749c5790.png">

iframeで`react-native-web-player`なるものを表示しているようです。

react-native-web-playerとは
----------

[react-native-web-player](https://github.com/dabbott/react-native-web-player/blob/66f7f347a09f805b2efe8effbefb9729857c00c9/README.md)のREADMEを読んでみると、次のようなことが書いてあります。

> This project uses [react-native-web](https://github.com/necolas/react-native-web) to create an environment for learning and experimenting with React Native.
> 
> The web player is implemented as an iframe for easy, performant inclusion in any webpage. Transpilation is done in a web worker so the main thread isn't blocked as the page loads.

……結構すごいね？

* React Native for WebでReact Nativeのコンポーネントをブラウザ上に表現している
* iframeを使っているので、Webページに組み込みやすい
* [動的にバベってる](https://github.com/dabbott/react-native-web-player/blob/facb768/components/workspace/Workspace.js#L18-L19)けどWeb Workerの中だからページロードをブロックしないよ

単純にReact Native for Webを使うだけではなく、動くドキュメントとしての立ち位置にも気を配った作りになっているようです。

ドキュメントへの掲載状況
----------

もちろん、仕組み上の制限として、React Native for Webで表現できるコンポーネントだけしか、プレビューを提供することができません。

どのくらい掲載されているのか、一応数えてみましょうか。0.57-RC時点でのドキュメントで数えてみます。

| コンポーネント | プレビューの有無 |
|--------------|---------------|
| ActivityIndicator | ○ |
| Button | × |
| DatePickerIOS | × |
| DrawerLayoutAndroid | × |
| FlatList | × |
| Image | ○ |
| InputAccessoryView | ×（プレビューはあるけどRNWebで未実装なのでエラーになる） |
| KeyboardAvoidingView | × |
| ListView | × |
| MaskedViewIOS | × |
| Modal | × |
| NavigatorIOS | × |
| Picker | × |
| PickerIOS | × |
| ProgressBarAndroid | × |
| ProgressViewIOS | × |
| RefreshControl | × |
| SafeAreaView | × |
| ScrollView | × |
| SectionList | × |
| SegmentedControlIOS | × |
| Slider | × |
| SnapshotViewIOS | × |
| StatusBar | × |
| Switch | × |
| TabBarIOS | × |
| TabBarIOS.Item | × |
| Text | ○ |
| TextInput | ○ |
| ToolbarAndroid | × |
| TouchableHighlight | ○ |
| TouchableNativeFeedback | × |
| TouchableOpacity | ○ |
| TouchableWithoutFeedback | × |
| View | × |
| ViewPagerAndroid | × |
| VirtualizedList | × |
| WebView | × |

38個中、7個でした。思ってたよりめちゃくちゃ少ないですね……

[React Native for Web側でも実装されているコンポーネントは増えてきています](https://github.com/necolas/react-native-web/blob/f062ede/README.md#compatibility-with-react-native)。AndroidとiOSの差異を上手く表現できなさそうな`Button`や`Switch`あたりは仕方がないとしても、`ScrollView`なんかはプレビューを載せてもよさそうなんたけどなーと思いました。

つまりこれは公式ドキュメントへのPRチャンス！　各位！　いかがですか！

……と煽ってみたのはよいものの、2018/9/4現在、[react-native-web-playerが対応しているRNWebのバージョンは0.5.3](https://github.com/dabbott/react-native-web-player/blob/66f7f34/package.json#L54)といささか古めです（最新は0.8.9）。まずはWeb Playerのほうをメンテして、最新のRNWebに対応させるほうが先になりそうです。

つまりPRチャンス！　各位！　いかがですか！

[TouchableOpacityのプレビュー](https://facebook.github.io/react-native/docs/touchableopacity)なんかはちゃんと状態も持てているみたいなので、結構色々できそうですねー。

まとめ
----------

充実具合でいうと少し残念な感じでしたが、眉唾もの扱いされることも多いReact Native for Webが公式に採用されている場所があるというのは、なかなか興味深いところだと思います。

もっと活用事例が増えていくといいですね。