react-native-maps使おうとしたらAIRMapが無いって怒られた

環境

$ react-native -v
react-native-cli: 2.0.1
react-native: 0.61.5

状況

react-native-mapsを使ってiOSで地図を表示させたい。
でも、react-native run-iosで起動してみたらエラー出てしまったので解消したい。

run-iosまでにやったこと

$ npm install react-native-maps    // react-native-mapsをインストール
$ react-native link react-native-maps // react-native-mapsをプロジェクトと紐付け

そして下の記事を参考にしてApp.jsをちょちょっと書き換えてあげました。

(参考)https://qiita.com/megane42/items/a53db54c0aa64647c6e3

エラー内容

Invariant Violation: requireNativeComponent:
"AIRMap" was not found in the UIManager.

This error is located at:
 in AIRMap (at MapView.js993)
 in MapView (at App.js:34)
 in App (at renderApplication.js:40)
 in RCTView (at AppComtainer.js:101)
 in RCTView (at AppContainer.js:119)
 in AppContainer (at renderApplication.js:39)

AIRMapが無いんだけどどうしてくれんだ、ってエラーが出てますね。
どうしてくれましょうか。

解決策

ネットで検索してもなかなか情報がなかったので、とりあえずもう一回起動してみたところ、なにやらエラーが出ていました。。。

$ react-native run-ios
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - react-native-maps (to unlink run: "react-native unlink react-native-maps")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
(これ→)error Could not find the following native modules: react-native-maps. Did you forget to run "pod install" ?
info Found Xcode workspace "imhere.xcworkspace"
info Building (using "xcodebuild -workspace imhere.xcworkspace -configuration Debug -scheme imhere -destination id=25C2AEEA-275A-4BF4-840D-398D2A131B47 -derivedDataPath build/imhere")
    Capabilities for Signing & Capabilities may not function correctly because its entitlements use a placeholder team ID. To resolve this, select a development team in the imhere editor. (in target 'imhere' from project 'imhere')
▸ Running script 'Start Packager'
▸ Running script 'Bundle React Native code and images'
▸ Build Succeeded
info Installing "build/imhere/Build/Products/Debug-iphonesimulator/imhere.app"
info Launching "org.reactjs.native.example.imhere"
success Successfully launched the app on the simulator

エラーの箇所を抜粋すると

error Could not find the following native modules:
react-native-maps. Did you forget to run "pod install" ?
(訳)react-native-mapのnativeモジュール見つかんねぇんだけど、お前"pod install"忘れてね?

と書いてありました。

いや、全然してなかったですね。ごめんなさい。

公式にもちゃんとReactNativeのバージョンが0.60以上のときはpod installしろよって書いてありましたね。

(公式)https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md

というわけで、ネイティブモジュールをインストールしましょう。

$ cd ios
$ pod install
Analyzing dependencies
Downloading dependencies
Installing react-native-maps (0.26.1)
Generating Pods project
Integrating client project
Pod installation complete! There are 29 dependencies from the Podfile and 27 total pods installed.

お、なんだかいい感じにインストールできたっぽいですね。

というわけで再度起動してみると、、、

おー、いい感じに表示されました！！

最後に

Qiitaの記事を参考にして書いていくとたしかに早くプロダクトを作れますが、本家よりもやっぱり情報は削られているので、本当に参考程度にしてちゃんと本家を見ながらすすめるようにした方がよいですね。

あと、今回私のエラーの原因はpod installをしていなかったからでしたが、他の原因ももちろんあると思うので、違った場合には次を参考にしてみてください。

(参考)https://github.com/react-native-community/react-native-maps/issues/2495