３分で分かるReactNativeへのFlow導入

ReactNativeには最初から.flowConfigが存在している。
よって、Flowの導入は素早く終わる。
それでは始めよう

1. .flowConfigを開き、最下部のversion numberをチェック。（仮に0.61.0だとする）
2. ターミナルでyarn add --dev flow-bin@0.61.0 babel-preset-flow
3. .babelrcに

{
  "presets": ["react-native", "flow"]
}

を追加

終

最後に、使いやすくするための２つのスクリプトを追加しよう。
package.jsonを開き、

"scripts": {
  "flow": "flow",
  "flow-stop": "flow stop",
}

ただこのままではnode_module以下もFlowがチェックしてしまうので、.flowconfigに

[ignore]
.*/node_modules/.*

を付け足す

またimport {...} from 'react-native'の箇所でエラーが出るので、
1. flow-typedフォルダを作る
$ mkdir flow-typed
2. ファイルを加える
$ touch react-native.js
3. react-native.jsに以下を書き加える

declare module 'react-native'{declare module.exports: any;}

これで全てが完了した。
おめでとう。

一つ注意として、
class App extends Component {
と書くと
Componentには少なくとも一つの引数が必要だと怒られるので
class App extends Component<{}> {
と書こう

このままではImageを使うとエラーが出るので、

module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

に以下のようにコードを足す

module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'