react-native-maps Fundamentals

react-native-maps 15,999 (https://github.com/react-native-maps/react-native-maps 15,999 ) (MIT) wraps the platforms' own map SDKs as a native component: <MapView> is Google Maps 1 on Android and Apple Maps on iOS (or Google Maps there too with provider={PROVIDER_GOOGLE} and extra setup). Children such as <Marker>, <Polyline>, <Circle> and <Callout> become native map objects, so panning and zooming run at native speed, not through JavaScript.

Google's Maps SDK for Android needs an API key from a Google Cloud 1 project with the Maps SDK for Android enabled, restricted to your package name and signing certificate. The plugin puts it in the manifest:

app.json: the react-native-maps plugin (excerpt)JSON

      ["react-native-maps", { "androidGoogleMapsApiKey": "YOUR_ANDROID_MAPS_KEY" }],

BookNest builds with that placeholder, because this book has no Google Cloud account. The map view is created, its onMapReady fires, and then Google refuses to draw:

Output of 212

E Google Maps Android API: Authorization failure.  Please see
  https://developers.google.com/maps/documentation/
android-api/start for how to correctly set up the map.
E Google Maps Android API: Ensure that the following Android Key exists:
E Google Maps Android API:      API Key: YOUR_ANDROID_MAPS_KEY
E Google Maps Android API:      Android Application (<cert_fingerprint>;<package_name>):
  5E:8F:16:06:2E:A3:CD:
2C:4A:0D:54:78:76:BA:A6:F3:8C:AB:F6:25;com.anonymous.booknest

A beige, empty map with a Google logo is the classic symptom: search logcat for Authorization failure. The message even prints the SHA-1 fingerprint and package name to register. A debug build and a release build are signed with different keys (Publishing), so register both fingerprints, and never ship a key without the package restriction.

MENU

react-native-maps Fundamentals