📍

react-native-mapsでマップが表示されない

に公開
React Native
Expo
tech

はじめに

下記の環境でreact-native-mapsを使用してGoogle Mapsを表示しようとしたところ、画面がグレーアウトしてしまう事象が発生したため、解消方法と問題の特定プロセスを載せておきます。

  • expo: 54.0.9
  • react-native-maps: 1.20.1
  • エミュレータ： android studio
    • SDK: Android 15.0(API Level 35)
    • Image: Google Play ARM 64 v8a System Image

マップが表示されないときの様子

原因と解消方法

エミュレータ上でのDNSの名前解決が失敗していることが原因でした。

解決方法としては、ターミナル上から下記コマンドでエミュレータを起動することで名前解決が成功し、マップが正常に表示されました。

emulator -avd <AVD名> -dns-server 8.8.8.8,1.1.1.1

正常動作した時の様子

<AVD名>の箇所は、下記コマンドなどから使用しているエミュレータのAVD名を指定してください。

emulator -list-avds

問題の切り分け

今回は、Androidエミュレータ上での名前解決が原因だったわけですが、原因調査した時のプロセスも載せておきます。
（直接的な解決方法よりも、このような情報の方が価値があると思っているので。）

  1. 動作確認できていた状態（リビジョン）に戻してみる
    → 戻しても変わらず失敗するので、環境起因だと判断
  2. iosエミュレータでも再現するか確認してみる
    → 今回はiosエミュレータ上では問題なく動作したので、アプリ側ではなくandroid固有の事象と判断
  3. ログを確認してみる
    → adb logcatで出力されるログをAIに食わせてみて怪しそうな箇所がないか解析させる
    → ネットワーク関係のエラーが確認できた
  4. 疎通確認してみる
    → adb shell ping 8.8.8.8は成功するがadb shell ping google.comは失敗する
    → 名前解決が失敗していると判断
  5. 他のアプリでも失敗しているか確認してみる
    → エミュレータ上のGoogleアプリから適当にググってみる
    → 何も開けないので、エミュレータ上のDNS設定に問題があるっぽい
  6. エミュレータ上のDNSを指定する方法を調べて試してみる
    → エミュレータのDNS設定を指定する方法を調べて試す
    → あっけなく表示される
GitHubで編集を提案

Discussion