ReactNative（expo環境）でAndroidエミュレーターのみfetchでエラーになる問題

社内勉強会の準備で盛大にハマったので、共有します。

Androidエミュレーターはlocalhostには繋がらない

タイトルのとおりですが、ReactNative Expoでfetchでget・postなどiOSのシュミレーターでは問題なく動くのですが、Androidだと Network request failed でエラーになります。

expo特有のバグかと思い。 expo fetch android errorなどのキーワードでしか検索しておらず、解決にかなり時間がかかりました。

Androidエミュレーターの仕様で、localhost or 127.0.0.1では、意図している開発環境のモックサーバー or サーバーには繋がらないようです。

AndroidエミュレーターのlocalhostはAndroidエミュレーター自身のことを指しているとのこと。

Android Emulator のネットワークを設定する  |  Android デベロッパー  |  Android Developers

http://10.0.2.2を使おう

Androidエミュレーターの公式ドキュメントにも載っておりますが、http://10.0.2.2 であれば、開発環境の意図したlocalhostに繋がります。

ネイティブアプリエンジニアの方であれば常識なのかもしれませんが、知らんがな。 React遣いのweb系の方は皆ハマる特落とし穴ではないでしょうか？

いい勉強になりました。 精進します。

ホイジャーまた。