ReactNativeが、"Sample" という名前のプロジェクトを正しく動かせない話

初めに

ReactNativeを触ってみて、チュートリアル通りにやっているはずなのに起動したら

こんな画面が出てきてしばらくハマった。

手順

$ react-native init Sample
$ cd Sample
$ react-native run-ios

でビルドが始まり、しばらく待つとiOSのシミュレータが起動する。

動いた〜、とか思って喜ぶと ↑ の赤い画面が出てくる。

原因

アプリ内部からlocalhostで動いているPackergerServerと通信を試みているのだが、
そのPackegerServerを起動する部分で名前の衝突が起きている様子。

↓ こんなエラーログが吐かれている。

This error is caused by a @providesModule declaration with the same name across two different files.
Error: @providesModule naming collision:
  Duplicate module name: Sample
  Paths: /Users/hira/Documents/git/react-native-sample/Sample/package.json collides with /Users/hira/Documents/git/react-native-sample/Sample/node_modules/react-native/Libraries/Sample/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
    at HasteMap._updateHasteMap (/Users/hira/Documents/git/react-native-sample/Sample/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:158:13)
    at p.getName.then.name (/Users/hira/Documents/git/react-native-sample/Sample/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:133:31)
~
Process terminated. Press <enter> to close the window

対策

プロジェクト名を Sample 以外 (SampleAppとか) にする。

$ react-native init SampleApp
$ cd SampleApp
$ react-native run-ios

↓ SampleApp に変えたら無事起動した。

終わりに

最初からエラーログをちゃんと読めばよかった。
エラーログは細かいところまで読もう。