Sunday, May 14, 2017

Using react-native-maps for Android - Bug fix for map not showing

If you are using React Native to build your iOS and Android apps, you may need to display a map in your application. For those of you building cross-platform apps, check out the react-native-maps component created by Airbnb - https://github.com/airbnb/react-native-maps. The react-native-maps component is cross-platform and when run on iOS it uses Apple's Maps and Google Maps when run on Android.


There is however one point you need to take note. Due to a bug in the react-native-maps package, you need to perform the following step in order for your android project to link correctly with the react-native-maps package

In the project folder, locate the /node_modules/react-native-maps/ folder and add the following statement in bold to the package.json file:

...
  "rnpm": {
    "android": {
      "sourceDir": "./lib/android"
    }
  },

...

Once this is done, you will be able to link your project correctly:


$ react-native link react-native-maps

One more thing, be sure to apply for your Maps API key from Google and add it into your AndroidManifest.xml file.

No comments: